/* Doctor Phone Pro v3.19.9 - the booking capsule + the readable back capsule of the public store, the chat inbox + the dedicated full-screen chat of the workshop (own file: kept apart from the v3.18.5 card-edge section of ui-polish.css) */
/* ============================== v3.19.9: the magnetic booking capsule on every store card | the readable «رجوع» capsule of the detail view ============================== */
.sp-save-cap { position: absolute; z-index: 3; inset-inline-start: .45rem; bottom: .45rem; display: inline-flex; align-items: center; gap: .3rem; max-width: calc(100% - .9rem); padding: .28rem .6rem; border-radius: 99px; font-weight: 900; font-size: .68rem; line-height: 1.2; color: #1c1409; background: linear-gradient(135deg, #f3dba4, #cbae8a); border: 1px solid rgba(255, 255, 255, .45); box-shadow: 0 6px 16px -6px rgba(203, 174, 138, .85), 0 0 0 1px rgba(0, 0, 0, .25); animation: sp-save-pulse 2.8s ease-in-out infinite; }
.sp-save-cap i { font-size: .7rem; }
@keyframes sp-save-pulse { 0%, 100% { box-shadow: 0 6px 16px -6px rgba(203, 174, 138, .85), 0 0 0 1px rgba(0, 0, 0, .25); } 50% { box-shadow: 0 6px 22px -4px rgba(243, 219, 164, 1), 0 0 0 1px rgba(0, 0, 0, .25); } }
@media (prefers-reduced-motion: reduce) { .sp-save-cap { animation: none; } }
.sp-back-cap { position: absolute; top: .6rem; inset-inline-start: .6rem; z-index: 4; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .95rem; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .7); color: #fff; font-weight: 900; font-size: .8rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .9); cursor: pointer; }
.sp-back-cap:active { transform: scale(.96); }

/* ============================== v3.19.9: «دردشة الزبائن» = a light inbox + a dedicated full-screen chat ============================== */
.dpp-chat-inbox { display: flex; flex-direction: column; }
.dpp-chat-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 8px 6px; background: transparent; border: 0; border-bottom: 1px solid rgba(148, 163, 184, .14); text-align: start; color: inherit; cursor: pointer; }
.dpp-chat-row:last-child { border-bottom: 0; }
.dpp-chat-row:active { background: rgba(148, 163, 184, .1); }
.dpp-chat-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; color: #e0f2fe; background: linear-gradient(145deg, #1e3a52, #0f2233); border: 1px solid rgba(125, 211, 252, .28); }
.dpp-chat-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dpp-chat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dpp-chat-top b { font-size: 13px; font-weight: 800; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpp-chat-top time { flex: none; font: 600 10px ui-monospace, monospace; color: #64748b; }
.dpp-chat-row.is-unread .dpp-chat-top b { color: #fff; font-weight: 900; }
.dpp-chat-row.is-unread .dpp-chat-top time { color: #67e8f9; }
.dpp-chat-dev { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #94a3b8; }
.dpp-chat-id { font: 800 10px ui-monospace, monospace; color: #7dd3fc; }
.dpp-chat-snip { font-size: 11.5px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpp-chat-row.is-unread .dpp-chat-snip { color: #cbd5e1; }
.dpp-chat-pip { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font: 900 11px ui-monospace, monospace; color: #fff; background: #e11d48; }
.dpp-chat-seen { flex: none; font-size: 11px; color: #34d399; opacity: .8; }

.dpp-chat-view { position: fixed; inset: 0; z-index: 8200; display: flex; flex-direction: column; background: #0a1220; color: #e2e8f0; }
html.dpp-chat-open { overflow: hidden; }

.dpp-chat-view .dpp-chat-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; border-bottom: 1px solid rgba(148, 163, 184, .18); background: #0d1727; }
.dpp-chat-back, .dpp-chat-tool { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #e2e8f0; font-size: 15px; text-decoration: none; cursor: pointer; }
.dpp-chat-wa { color: #34d399; } .dpp-chat-del { color: #fda4af; }
.dpp-chat-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; text-align: start; }
.dpp-chat-who b { font-size: 14px; font-weight: 900; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpp-chat-who span { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpp-chat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 10px; display: flex; flex-direction: column; gap: 10px; }
.dpp-bub-grp { display: flex; flex-direction: column; gap: 6px; }
.dpp-bub { max-width: 86%; padding: 8px 11px; border-radius: 16px; font-size: 13px; line-height: 1.55; word-break: break-word; }
.dpp-bub p { margin: 0; color: #f1f5f9; }
.dpp-bub-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 2px; font-size: 10px; color: #94a3b8; }
.dpp-bub-meta b { font-weight: 800; color: #cbd5e1; } .dpp-bub-meta span { font-family: ui-monospace, monospace; }
.dpp-bub-in { align-self: flex-start; background: #162033; border: 1px solid #253349; border-end-start-radius: 4px; }
.dpp-bub-out { align-self: flex-end; border-end-end-radius: 4px; border: 1px solid; }
.dpp-bub-out.dpp-sg-cyan { background: #0d2a35; border-color: #14586b; } .dpp-bub-out.dpp-sg-amber { background: #2a2210; border-color: #7a5a1a; } .dpp-bub-out.dpp-sg-emerald { background: #0e2a22; border-color: #0f6a52; }
.dpp-bub-voice { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 8px; border-radius: 12px; background: rgba(2, 6, 23, .55); border: 1px solid rgba(148, 163, 184, .2); } .dpp-bub-voice i { color: #93c5fd; } .dpp-bub-voice audio { flex: 1 1 auto; height: 30px; min-width: 0; }
.dpp-bub-act { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 10px; } .dpp-bub-act button { min-height: 28px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: #6ee7b7; font-weight: 800; cursor: pointer; } .dpp-bub-act button[title] { color: #64748b; } .dpp-bub-seen { color: #34d399; font-family: ui-monospace, monospace; }
.dpp-chat-composer { flex: none; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(148, 163, 184, .18); background: #0d1727; display: flex; flex-direction: column; gap: 8px; }
.dpp-chat-composer input { width: 100%; min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, .3); background: #060d19; color: #fff; font-size: 16px; }
.dpp-chat-composer input:focus { outline: none; border-color: #38bdf8; }
.dpp-chat-sign { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dpp-chat-sign button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; border: 1px solid; font-size: 12px; font-weight: 900; cursor: pointer; }
.dpp-chat-sign .dpp-sg-cyan { background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .5); color: #a5f3fc; } .dpp-chat-sign .dpp-sg-amber { background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .5); color: #fde68a; } .dpp-chat-sign .dpp-sg-emerald { background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .5); color: #a7f3d0; }
.dpp-chat-sign button:active { transform: scale(.97); }

/* ============================== v3.20.2: the public store card only ============================== */
/* the price (number + currency) never breaks over two lines: when the label and the price do not fit side by side, the label goes above */
.sp-price { flex-wrap: wrap; }
.sp-price-box, .sp-price-v, .sp-price-v small { white-space: nowrap; }
/* one primary action: «حجز الهاتف» keeps the gradient and gains a soft glow; call / WhatsApp become quiet tinted outlines */
.sp-book { box-shadow: 0 8px 22px -10px rgba(34, 211, 238, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.sp-btn.sp-call { background: rgba(56, 189, 248, .08); border: 1px solid rgba(56, 189, 248, .38); color: #bae6fd; font-weight: 800; }
.sp-btn.sp-wa { background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .38); color: #a7f3d0; font-weight: 800; }
/* the detail view's «رجوع»: solid dark, pure white text, a white focus ring (never the amber one) */
.sp-back-cap { background: #020617; border: 1px solid rgba(255, 255, 255, .4); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sp-back-cap span, .sp-back-cap i { color: #fff; }
.sp-back-cap:focus-visible, .sp-back-cap:focus { outline: 2px solid #fff; outline-offset: 2px; }

/* ============================== v3.20.3: the full-screen screens - the shared bottom «رجوع» pill, the Universal Print Studio, the management drawer ============================== */
/* the pill every edge-to-edge overlay carries (the same look as the floating pill of the sub screens, above the overlay): the one way out */
.dpp-back-pill { position: fixed; inset-inline-start: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 8700; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1.05rem; border-radius: 99px; background: #020617; border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: 12.5px; font-weight: 800; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .85); cursor: pointer; }
.dpp-back-pill i, .dpp-back-pill span { color: #fff; }
.dpp-back-pill i { font-size: 11px; }
.dpp-back-pill:active { transform: scale(.96); }
.dpp-back-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* v3.20.13: while the floating back capsule is on screen, the last row of every admin screen scrolls clear of it */
body:has(#floatingQuickBackButton:not(.hidden)) #adminApp main { padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }
html[lang="fr"] .dpp-back-pill { flex-direction: row-reverse; }
html[lang="fr"] .dpp-back-pill > i { transform: scaleX(-1); }
html.dpp-ps-open { overflow: hidden; }

/* the management drawer: edge to edge, no black backdrop, no popup frame; the safe-area top padding */
#managementDrawerModal { padding: 0 !important; background: #0a1220 !important; align-items: stretch !important; justify-content: stretch !important; }
#managementDrawerModal > .glass { max-width: none !important; width: 100% !important; max-height: none !important; height: 100% !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; background: #0a1220 !important; box-shadow: none !important; }
#managementDrawerModal .dpp-drawer-head { padding-top: max(14px, env(safe-area-inset-top)) !important; }
#managementDrawerModal .dpp-drawer-scroll { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---- the studio */
#dppPrintStudio { position: fixed; inset: 0; z-index: 8600; display: flex; flex-direction: column; background: #0a1220; color: #e2e8f0; }
#dppPrintStudio * { box-sizing: border-box; }
#dppPrintStudio .ps-head { flex: none; display: flex; flex-direction: column; gap: 6px; padding: max(10px, env(safe-area-inset-top)) 10px 8px; background: #0d1727; border-bottom: 1px solid rgba(148, 163, 184, .18); }
#dppPrintStudio .ps-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 14px; background: rgba(15, 23, 42, .85); border: 1px solid rgba(255, 255, 255, .12); }
#dppPrintStudio .ps-segb { min-width: 0; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; border: 0; border-radius: 11px; background: transparent; color: #cbd5e1; font-weight: 900; font-size: clamp(10.5px, 3vw, 12.5px); line-height: 1.15; text-align: center; cursor: pointer; }
#dppPrintStudio .ps-segb i { flex: none; font-size: 13px; }
#dppPrintStudio .ps-segb.on { background: #22d3ee; color: #020617; }
#dppPrintStudio .ps-seg-lang .ps-segb { min-height: 36px; font-size: clamp(11.5px, 3.3vw, 13px); }
#dppPrintStudio .ps-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px calc(92px + env(safe-area-inset-bottom, 0px)); }
#dppPrintStudio .ps-pickbar { display: flex; align-items: center; gap: 8px; }
#dppPrintStudio .ps-pick { flex: 1 1 auto; min-width: 0; min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(34, 211, 238, .42); color: #fff; text-align: start; cursor: pointer; }
#dppPrintStudio .ps-pick-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(34, 211, 238, .16); color: #67e8f9; }
#dppPrintStudio .ps-pick-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#dppPrintStudio .ps-pick-tx small { font-size: 10px; font-weight: 800; color: #94a3b8; }
#dppPrintStudio .ps-pick-tx b { font-size: 14px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dppPrintStudio .ps-chev { flex: none; font-size: 11px; color: #94a3b8; transition: transform .15s; }
#dppPrintStudio .ps-pick[aria-expanded="true"] .ps-chev { transform: rotate(180deg); }
#dppPrintStudio .ps-sync { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: -4px; padding: 0 4px; font-size: 10px; font-weight: 800; line-height: 1.25; color: #94a3b8; }
#dppPrintStudio .ps-sync.is-synced { color: #6ee7b7; } #dppPrintStudio .ps-sync.is-pending { color: #7dd3fc; } #dppPrintStudio .ps-sync.is-fail { color: #fcd34d; }
#dppPrintStudio .ps-pop { position: fixed; z-index: 8800; width: min(300px, calc(100vw - 16px)); overflow-y: auto; padding: 6px; border-radius: 16px; background: rgba(11, 18, 34, .98); border: 1px solid rgba(148, 163, 184, .28); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#dppPrintStudio .ps-pop-h { padding: 6px 10px 4px; font-size: 10px; font-weight: 900; color: #94a3b8; }
#dppPrintStudio .ps-pi { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: #e2e8f0; font-size: 12.5px; font-weight: 800; text-align: start; cursor: pointer; }
#dppPrintStudio .ps-pi > i:first-child { flex: none; width: 18px; text-align: center; font-size: 13px; color: #67e8f9; }
#dppPrintStudio .ps-pi-t { flex: 1 1 auto; min-width: 0; }
#dppPrintStudio .ps-pi-k { flex: none; display: flex; gap: 6px; font-size: 10px; color: #475569; }
#dppPrintStudio .ps-pi-k i.on { color: #94a3b8; }
#dppPrintStudio .ps-ck { flex: none; font-size: 11px; color: transparent; }
#dppPrintStudio .ps-pi[aria-checked="true"] { background: rgba(34, 211, 238, .14); color: #a5f3fc; }
#dppPrintStudio .ps-pi[aria-checked="true"] .ps-ck { color: #22d3ee; }
#dppPrintStudio .ps-pi:active { background: rgba(148, 163, 184, .2); }
#dppPrintStudio .ps-stagebox, #dppPrintStudio .ps-ctl { display: flex; flex-direction: column; gap: 10px; }
#dppPrintStudio .ps-card { padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 8px; }
#dppPrintStudio .ps-h { font-weight: 900; font-size: 12.5px; color: #e2e8f0; }
#dppPrintStudio .ps-note { font-size: 10.5px; font-weight: 700; color: #94a3b8; line-height: 1.5; }
#dppPrintStudio .ps-lab { font-size: 11px; font-weight: 800; color: #94a3b8; }
#dppPrintStudio .ps-canvascard { align-items: stretch; }
#dppPrintStudio .ps-paperwrap { display: flex; justify-content: center; padding: 14px 0; border-radius: 12px; background: #0f1b2e; direction: ltr; }
#dppPrintStudio .ps-paper { position: relative; overflow: hidden; contain: layout paint; flex: none; background: #fff; box-shadow: 0 0 0 1px #94a3b8, 0 10px 28px rgba(0, 0, 0, .55); direction: ltr; }
#dppPrintStudio .ps-scaler { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#dppPrintStudio .ps-el { cursor: grab; touch-action: none; outline: 1px dashed rgba(8, 145, 178, .65); outline-offset: .4mm; }
#dppPrintStudio .ps-el.is-sel { outline: 2px solid #0891b2; background: rgba(34, 211, 238, .14); }
/* v3.20.30: a TEXT is framed by its own glyph box (zero padding, line-height 1): the dashed / solid frame starts and ends at the letters, not at the wider container */
#dppPrintStudio .ps-el.ps-tx, #dppPrintStudio .ps-el.ps-tx.is-sel { outline: 0; background: none; }
#dppPrintStudio .ps-el.ps-tx .dpc-t { outline: 1px dashed rgba(8, 145, 178, .65); outline-offset: 0; }
#dppPrintStudio .ps-el.ps-tx.is-sel .dpc-t { outline: 2px solid #0891b2; background: rgba(34, 211, 238, .14); }
#dppPrintStudio .ps-testrow { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
#dppPrintStudio .ps-testin { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(15, 23, 42, .7); color: #f1f5f9; font-size: 13px; }
#dppPrintStudio .ps-info { text-align: center; font-size: 10.5px; font-weight: 800; color: #94a3b8; }
#dppPrintStudio .ps-info.is-warn { color: #fcd34d; }
#dppPrintStudio .ps-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border-radius: 12px; background: rgba(148, 163, 184, .1); font-size: 11px; font-weight: 800; color: #cbd5e1; }
#dppPrintStudio .ps-status.is-custom { background: rgba(52, 211, 153, .12); color: #a7f3d0; }
#dppPrintStudio .ps-link { min-height: 36px; padding: 0 8px; border: 0; background: transparent; color: #67e8f9; font-size: 11.5px; font-weight: 900; cursor: pointer; text-decoration: underline; }
#dppPrintStudio .ps-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#dppPrintStudio .ps-center { justify-content: center; }
#dppPrintStudio .ps-chip { min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #cbd5e1; font-weight: 900; font-size: 12px; cursor: pointer; }
#dppPrintStudio .ps-chip.on { background: rgba(34, 211, 238, .18); border-color: rgba(34, 211, 238, .6); color: #a5f3fc; }
#dppPrintStudio .ps-row { display: flex; align-items: center; gap: 8px; }
#dppPrintStudio .ps-range { flex: 1 1 auto; min-width: 40px; min-height: 44px; accent-color: #22d3ee; }
#dppPrintStudio .ps-val { min-width: 44px; text-align: center; font: 800 12.5px ui-monospace, Menlo, monospace; color: #a5f3fc; direction: ltr; }
#dppPrintStudio .ps-dims { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
#dppPrintStudio .ps-dim { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 800; color: #94a3b8; }
#dppPrintStudio .ps-num { min-height: 44px; width: 100%; padding: 0 10px; border-radius: 12px; text-align: center; font: 800 16px/1 ui-monospace, Menlo, monospace; background: rgba(3, 15, 30, .55); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
#dppPrintStudio .ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
#dppPrintStudio .ps-sw { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
#dppPrintStudio .ps-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#dppPrintStudio .ps-swk { position: relative; flex: none; width: 40px; height: 22px; border-radius: 99px; background: #334155; transition: background .15s; }
#dppPrintStudio .ps-swk::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; }
#dppPrintStudio .ps-sw input:checked + .ps-swk { background: #22d3ee; }
#dppPrintStudio .ps-sw input:checked + .ps-swk::after { inset-inline-start: 21px; }
#dppPrintStudio .ps-sw input:focus-visible + .ps-swk { outline: 2px solid #fff; outline-offset: 2px; }
#dppPrintStudio .ps-flist { display: flex; flex-direction: column; }
#dppPrintStudio .ps-frow { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(148, 163, 184, .12); }
#dppPrintStudio .ps-frow:last-child { border-bottom: 0; }
#dppPrintStudio .ps-frow.is-sel { background: rgba(34, 211, 238, .1); border-radius: 10px; }
#dppPrintStudio .ps-fname { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: #e2e8f0; font-size: 12.5px; font-weight: 800; text-align: start; cursor: pointer; }
#dppPrintStudio .ps-selhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #fff; }
#dppPrintStudio .ps-selbody { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
#dppPrintStudio .ps-selr { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#dppPrintStudio .ps-pad { flex: none; align-self: center; display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; }
#dppPrintStudio .ps-nudge { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .4); color: #a5f3fc; font-size: 14px; cursor: pointer; touch-action: none; }
#dppPrintStudio .ps-nudge:active { background: rgba(34, 211, 238, .3); }
#dppPrintStudio .ps-n-up { grid-area: 1 / 2; } #dppPrintStudio .ps-n-left { grid-area: 2 / 1; } #dppPrintStudio .ps-n-down { grid-area: 2 / 2; } #dppPrintStudio .ps-n-right { grid-area: 2 / 3; }
#dppPrintStudio .ps-tbox { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(3, 15, 30, .35); }
#dppPrintStudio .ps-tbox.is-cur { border-color: rgba(34, 211, 238, .55); }
#dppPrintStudio .ps-ttop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #fff; }
#dppPrintStudio .ps-ttop .ps-link { margin-inline-start: auto; }
#dppPrintStudio .ps-cnt { font: 700 10px ui-monospace, monospace; color: #94a3b8; direction: ltr; }
#dppPrintStudio .ps-ta { width: 100%; min-height: 84px; padding: 8px 10px; border-radius: 10px; resize: vertical; line-height: 1.5; font-size: 16px; background: rgba(3, 15, 30, .55); border: 1px solid rgba(255, 255, 255, .18); color: #fff; }
#dppPrintStudio .ps-ta::placeholder { color: #64748b; }
#dppPrintStudio .ps-docstage { display: flex; justify-content: center; overflow: hidden; border-radius: 12px; background: #0f1b2e; padding: 8px; }
#dppPrintStudio .ps-foot { position: absolute; inset-inline: 0; bottom: 0; z-index: 8650; display: flex; justify-content: flex-end; padding: 22px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, #0a1220 58%, rgba(10, 18, 32, 0)); pointer-events: none; }
#dppPrintStudio .ps-test { pointer-events: auto; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 1.1rem; border-radius: 99px; background: rgba(34, 211, 238, .16); border: 1px solid rgba(34, 211, 238, .55); color: #a5f3fc; font-size: 12.5px; font-weight: 900; cursor: pointer; }
#dppPrintStudio .ps-test:disabled { opacity: .55; }

/* v3.20.4 - the field action bar: cloud print | download | WhatsApp (DPP.docActions) */
.dpp-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; width: 100%; }
.dpp-act[hidden] { display: none !important; }
.dpp-act { min-height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #e5e7eb; font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background .12s ease; }
.dpp-act:active { transform: scale(.97); }
.dpp-act:disabled { opacity: .55; cursor: progress; }
.dpp-act.is-busy i { animation: dppActSpin .8s linear infinite; }
.dpp-act-print { background: rgba(16, 185, 129, .16); border-color: rgba(16, 185, 129, .4); color: #6ee7b7; }
.dpp-act-download { background: rgba(14, 165, 233, .14); border-color: rgba(14, 165, 233, .38); color: #7dd3fc; }
.dpp-act-whatsappPdf { background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .45); color: #fcd34d; }
.dpp-act-whatsapp { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .42); color: #86efac; }
.dpp-acts.is-compact { width: auto; display: inline-grid; grid-template-columns: repeat(var(--n, 3), 40px); gap: 4px; }
.dpp-acts.is-compact .dpp-act { min-height: 40px; width: 40px; padding: 0; font-size: 15px; border-radius: 10px; }
@keyframes dppActSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dpp-act, .dpp-act.is-busy i { animation: none; transition: none; } }

/* v3.20.5 - undo, explicit save, bold chips, per-part controls of the roll / A4 sheets, the shop phone field */
#dppPrintStudio .ps-undo { flex: 0 0 auto; min-height: 54px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #e2e8f0; font-size: 10.5px; font-weight: 900; cursor: pointer; }
#dppPrintStudio .ps-undo i { font-size: 15px; }
#dppPrintStudio .ps-undo:disabled { opacity: .4; cursor: default; }
#dppPrintStudio .ps-foot { flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding-inline-start: 124px; }
#dppPrintStudio .ps-docstage iframe { flex: none; max-width: none; }
#dppPrintStudio .ps-docstage.is-zoom { justify-content: flex-start; overflow: auto; -webkit-overflow-scrolling: touch; }
#dppPrintStudio .ps-save { pointer-events: auto; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 1.1rem; border-radius: 99px; background: rgba(16, 185, 129, .18); border: 1px solid rgba(16, 185, 129, .55); color: #6ee7b7; font-size: 12.5px; font-weight: 900; cursor: pointer; }
#dppPrintStudio .ps-save:disabled { opacity: .55; }
#dppPrintStudio .ps-body { padding-bottom: 150px; }
#dppPrintStudio .ps-bold { min-width: 40px; min-height: 36px; padding: 0 8px; }
#dppPrintStudio .ps-bold.on { background: rgba(34, 211, 238, .26); color: #fff; }
#dppPrintStudio .ps-text { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: 14px; font-weight: 800; direction: ltr; text-align: start; }
#dppPrintStudio .ps-seclist { display: flex; flex-direction: column; gap: 2px; }
#dppPrintStudio .ps-sec { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 0; border-bottom: 1px solid rgba(148, 163, 184, .12); }
#dppPrintStudio .ps-sec:last-child { border-bottom: 0; }
#dppPrintStudio .ps-sec.is-off .ps-secname { opacity: .5; }
#dppPrintStudio .ps-secname { flex: 1 1 120px; min-width: 0; font-size: 12.5px; font-weight: 800; color: #e2e8f0; }
#dppPrintStudio .ps-sec .ps-chip { min-height: 36px; min-width: 36px; padding: 0 8px; }
#dppPrintStudio .ps-sec .ps-val { min-width: 40px; text-align: center; font-size: 11.5px; color: #a5f3fc; }

/* v3.20.7 - the floating back capsule is SOLID (nothing shows through it) and the confirm buttons the generic button skin made unreadable stay filled */
#floatingQuickBackButton, :root button.dpp-back-pill { background: #020617 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1.5px solid rgba(255, 255, 255, .7) !important; color: #fff !important; box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .9) !important; opacity: 1 !important; }
#floatingQuickBackButton i, #floatingQuickBackButton span, :root button.dpp-back-pill i, :root button.dpp-back-pill span { color: #fff !important; }

.dpp-acts:not(.is-compact) .dpp-act { padding-inline: 4px; gap: 4px; }
.dpp-acts:not(.is-compact) .dpp-act-t { white-space: normal; text-align: center; line-height: 1.15; font-size: 10.5px; min-width: 0; }

/* v3.20.8: delivery card - WhatsApp sits beside the call button; the bottom bar is print | edit | collect-and-deliver */
:root:root [data-card="delivery"] .hv-wa { 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-wa { background: rgba(34, 197, 94, .2); border: 1px solid rgba(34, 197, 94, .5); color: #86efac; }
:root:root [data-card="delivery"] [data-hv-actions] > .dpp-acts { order: 1; width: auto; flex: 0 0 auto; }
:root:root [data-card="delivery"] [data-hv-actions] > .act-edit { order: 2; }
:root:root [data-card="delivery"] [data-hv-actions] > button:not(.act-edit) { order: 3; }

/* v3.20.9: the finance / treasury icon - an armored bank vault with a $ dial (colour SVG, not a font glyph) */
.dpp-vault, .fa-vault { font-style: normal; }
.dpp-vault::before, .fa-vault::before { content: "" !important; display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.28em; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cdefs%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23e2e8f0%22/%3E%3Cstop offset=%221%22 stop-color=%22%2364748b%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fde68a%22/%3E%3Cstop offset=%221%22 stop-color=%22%23d97706%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x=%2215%22 y=%2252%22 width=%228%22 height=%227%22 rx=%222%22 fill=%22%23475569%22/%3E%3Crect x=%2241%22 y=%2252%22 width=%228%22 height=%227%22 rx=%222%22 fill=%22%23475569%22/%3E%3Crect x=%228%22 y=%228%22 width=%2248%22 height=%2244%22 rx=%228%22 fill=%22url(%23s)%22 stroke=%22%230f172a%22 stroke-width=%222.5%22/%3E%3Crect x=%2213%22 y=%2213%22 width=%2238%22 height=%2234%22 rx=%225%22 fill=%22%23334155%22 stroke=%22%23cbd5e1%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2232%22 cy=%2230%22 r=%2214%22 fill=%22%230f172a%22 stroke=%22url(%23g)%22 stroke-width=%223%22/%3E%3Cg stroke=%22url(%23g)%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M32 20.5v19M22.5 30h19M25.3 23.3l13.4 13.4M38.7 23.3L25.3 36.7%22/%3E%3C/g%3E%3Ccircle cx=%2232%22 cy=%2230%22 r=%224%22 fill=%22url(%23g)%22 stroke=%22%230f172a%22 stroke-width=%221%22/%3E%3Ccircle cx=%2232%22 cy=%2220%22 r=%221.8%22 fill=%22%23fde68a%22/%3E%3Ccircle cx=%2232%22 cy=%2240%22 r=%221.8%22 fill=%22%23fde68a%22/%3E%3Ccircle cx=%2222%22 cy=%2230%22 r=%221.8%22 fill=%22%23fde68a%22/%3E%3Ccircle cx=%2242%22 cy=%2230%22 r=%221.8%22 fill=%22%23fde68a%22/%3E%3Cg fill=%22url(%23g)%22 stroke=%22%2392400e%22 stroke-width=%221%22%3E%3Ccircle cx=%225%22 cy=%225%22 r=%223.2%22/%3E%3Ccircle cx=%2259%22 cy=%225%22 r=%223.2%22/%3E%3Ccircle cx=%225%22 cy=%2259%22 r=%223.2%22/%3E%3Ccircle cx=%2259%22 cy=%2259%22 r=%223.2%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; font-family: inherit; }

/* v3.20.9: ONE royal cloud-print colour everywhere (owner request), with the printer glyph (no cloud) */
:root:root .dpp-cloud-print, :root:root button.dpp-act-print, :root:root .tk .tk-act.act-cloud, :root:root #activePhonesContainer .tk .tk-act.act-cloud { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .28) !important; color: #fff !important; box-shadow: none !important; }   /* v3.20.11: the neutral dark skin of « تحرير »; only the printer glyph carries the royal colour */
:root:root .dpp-cloud-print i, :root:root button.dpp-act-print i, :root:root .tk .tk-act.act-cloud i, :root:root #activePhonesContainer .tk .tk-act.act-cloud i { color: #a855f7 !important; }
:root:root .dpp-cloud-print span, :root:root .tk .tk-act.act-cloud span { color: #fff !important; font-weight: 900; }

/* v3.20.9: «تأكيد التخصيص»: bright bold white text on a solid, prominent background (the confirmed state turns solid green) */
:root:root #btnConfirmLossAllocation, :root:root #btnConfirmExpenseAllocation { color: #fff !important; font-weight: 900 !important; border: 1.5px solid rgba(255, 255, 255, .55) !important; opacity: 1 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important; }
:root:root #btnConfirmLossAllocation { background: #be123c !important; }
:root:root #btnConfirmExpenseAllocation { background: #0e7490 !important; }
:root:root #btnConfirmLossAllocation.bg-emerald-500\/25, :root:root #btnConfirmExpenseAllocation.bg-emerald-500\/25 { background: #047857 !important; }
:root:root #btnConfirmLossAllocation i, :root:root #btnConfirmExpenseAllocation i, :root:root #btnConfirmLossAllocation span, :root:root #btnConfirmExpenseAllocation span { color: #fff !important; }

/* v3.20.31: no stretch handles in the print studio: an element is sized by its type size and its max width (steppers). The value-only test input shows the system words around it fixed */
#dppPrintStudio .ps-testfix { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#dppPrintStudio .ps-testfix .ps-testin { flex: 1 1 120px; min-width: 0; }
#dppPrintStudio .ps-fixed { padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #cbd5e1; font-size: 11px; font-weight: 800; white-space: nowrap; }
/* v3.20.32: a person who may not design (a worker) is not offered the print studio's doors: he prints, the owners design (js/core/governance-watch.js applyPrintUi) */
body.dpp-no-design [data-design-only] { display: none !important; }