/* * Doctor Phone Pro - high-density post-login layout (v3.12.9) * * Presentation only. Loaded last (after ui-polish.css). Every rule is scoped to the signed-in app (#adminApp, or body[data-tab] for the modals it opens) so the public landing page, * the customer tracking card and the receiver page are untouched. Tailwind (CDN) injects its utilities at runtime, so the overrides use an id / :root prefix instead of !important. * * Measured at 390 x 844 with the seeded harness (before -> after): active ticket card 488 -> ~206 px (0.95 -> 2.7 tickets on the first screen), shell padding 14 -> 8 px, * card padding 12.8-20 -> 8 px, vertical gaps 16 -> 6-8 px, inputs 44-45 -> 36-38 px, filter pills 28 px (tap area 38+ px through an invisible slop), closing KPI figures 24 -> 18 px. * * 1. shell + containers (<= 480 px) 4. closing screen: dense 2-column KPI grid * 2. controls: inputs 36-38 px, pills 28-30 px 5. main hub: condensed module rows * 3. the repair ticket card (.tk, any width) 6. modals / sheets opened after sign-in */ /* ============================== 3. the repair ticket card (v3.12.9): any width ============================== */ #activePhonesContainer .tk { padding: 8px; border-radius: 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } #activePhonesContainer .tk-top { display: flex; align-items: center; gap: 4px 5px; min-width: 0; flex-wrap: wrap; min-height: 20px; } /* v3.13.1: chips wrap onto a second line instead of being cut (no more "هات...") */ #activePhonesContainer .tk-id { font: 900 13px/1 ui-monospace, monospace; color: #67e8f9; flex: 0 0 auto; letter-spacing: .02em; } #activePhonesContainer .tk-status { flex: 0 0 auto; max-width: 100%; padding: 2px 7px; border-radius: 6px; border: 1px solid; font-size: 10.5px; font-weight: 900; line-height: 1.3; white-space: nowrap; } #activePhonesContainer .tk-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 900; line-height: 1.2; white-space: nowrap; } #activePhonesContainer .tk-pill i { font-size: 8.5px; } #activePhonesContainer .tk-urgent { background: rgba(244, 63, 94, .2); color: #fecdd3; border: 1px solid rgba(251, 113, 133, .4); } #activePhonesContainer .tk-tech { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 6px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .06); font-size: 9.5px; font-weight: 800; line-height: 1.2; } #activePhonesContainer .tk-tech i { font-size: 8px; color: #22d3ee; } #activePhonesContainer .tk-tech.is-h { color: #67e8f9; } #activePhonesContainer .tk-tech.is-o { color: #fcd34d; } #activePhonesContainer .tk-mode { flex: 0 0 auto; white-space: nowrap; font-size: 10px; font-weight: 800; color: #fcd34d; } /* v3.13.2: the work mode is shown at every width, portrait phones included */ #activePhonesContainer .tk-date { margin-inline-start: auto; flex: 0 0 auto; font: 600 10px/1.3 ui-monospace, monospace; color: #94a3b8; white-space: nowrap; direction: ltr; } /* the slim action bar: four equal buttons, 30 px high, 38 px tap area (invisible slop) */ #activePhonesContainer .tk-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } #activePhonesContainer .tk-act { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 30px; min-height: 0; padding: 0 4px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #e2e8f0; font-size: 10.5px; font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; } #activePhonesContainer .tk-act i { font-size: 10px; flex: 0 0 auto; } #activePhonesContainer .tk-act::after { content: ""; position: absolute; inset: -4px -1px; } #activePhonesContainer .tk-act.tk-del { color: #fda4af; } /* the 5-step stepper (shared with the customer tracking card): smaller nodes and a 2 px line inside a repair card only */ #activePhonesContainer .tk-step { padding: 0; } #activePhonesContainer .tk-step .w-5 { width: 14px; height: 14px; font-size: 8px; border-width: 1.5px; } #activePhonesContainer .tk-step .top-\[9px\] { top: 6px; height: 2px; } #activePhonesContainer .tk-step .mt-1 { margin-top: 1px; font-size: 8.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the worker-intake approval strip */ #activePhonesContainer .tk-pending { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 6px; border-radius: 8px; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .4); } #activePhonesContainer .tk-approve { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px; border-radius: 8px; background: linear-gradient(90deg, #fbbf24, #f59e0b); color: #0f172a; font-size: 11px; font-weight: 900; flex: 0 0 auto; } #activePhonesContainer .tk-approve::after { content: ""; position: absolute; inset: -4px 0; } /* v3.13.1 - the info frame: thumbnail 46 x 46 | TWO clean rows (customer + phone / device + fault badges) | price and remaining. * Customer 16 px bold, phone 13.5 px mono with its own air, model 15 px bold, a colour-coded fault badge, price / remaining 15 px bold. Rows wrap instead of truncating. */ #activePhonesContainer .tk-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding-block: 2px; } #activePhonesContainer .tk-thumb { width: 46px; height: 46px; flex: 0 0 46px; object-fit: contain; border-radius: 10px; padding: 3px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .1); } #activePhonesContainer .tk-thumb-ph { display: flex; align-items: center; justify-content: center; color: #22d3ee; font-size: 19px; padding: 0; } #activePhonesContainer .tk-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; text-align: start; } #activePhonesContainer .tk-cust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; } #activePhonesContainer .tk-name { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; max-width: 100%; font-size: 16px; font-weight: 800; color: #fff; line-height: 1.3; } #activePhonesContainer .tk-name i { font-size: 10px; color: #94a3b8; flex: 0 0 auto; } #activePhonesContainer .tk-nm { min-width: 0; overflow-wrap: anywhere; } #activePhonesContainer .tk-phone { font: 600 13.5px/1.3 ui-monospace, monospace; letter-spacing: .04em; color: #22d3ee; direction: ltr; unicode-bidi: plaintext; flex: 0 0 auto; } #activePhonesContainer .tk-dev { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; } #activePhonesContainer .tk-mdl { font-size: 15px; font-weight: 800; color: #f8fafc; line-height: 1.3; overflow-wrap: anywhere; } #activePhonesContainer .tk-pre { font-size: 10px; color: #94a3b8; font-weight: 600; } #activePhonesContainer .tk-fault { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.5; border: 1px solid; white-space: nowrap; } #activePhonesContainer .tk-fault-screen { color: #fcd34d; background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .5); } #activePhonesContainer .tk-fault-soft { color: #d8b4fe; background: rgba(168, 85, 247, .18); border-color: rgba(192, 132, 252, .5); } #activePhonesContainer .tk-fault-power { color: #6ee7b7; background: rgba(16, 185, 129, .16); border-color: rgba(52, 211, 153, .5); } #activePhonesContainer .tk-fault-water { color: #7dd3fc; background: rgba(14, 165, 233, .16); border-color: rgba(56, 189, 248, .5); } #activePhonesContainer .tk-fault-other { color: #fdba74; background: rgba(249, 115, 22, .16); border-color: rgba(251, 146, 60, .5); } #activePhonesContainer .tk-fault-more { color: #cbd5e1; background: rgba(148, 163, 184, .14); border-color: rgba(148, 163, 184, .4); } #activePhonesContainer .tk-money { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: ui-monospace, monospace; text-align: end; } #activePhonesContainer .tk-m1, #activePhonesContainer .tk-m2 { display: flex; align-items: baseline; gap: 5px; line-height: 1.25; white-space: nowrap; } #activePhonesContainer .tk-m1 em, #activePhonesContainer .tk-m2 em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #94a3b8; font-family: Cairo, system-ui, sans-serif; } #activePhonesContainer .tk-m1 b, #activePhonesContainer .tk-m2 b { font-size: 15px; font-weight: 900; direction: ltr; unicode-bidi: isolate; } #activePhonesContainer .tk-total { color: #4ade80; } #activePhonesContainer .tk-rem { color: #67e8f9; } #activePhonesContainer .tk-cost { font-size: 11px; font-weight: 700; color: #64748b; } #activePhonesContainer .tk-cost.has-cost { color: #fca5a5; } #activePhonesContainer .tk-lossflag { font-size: 8.5px; font-weight: 800; color: #fda4af; background: rgba(244, 63, 94, .15); border: 1px solid rgba(244, 63, 94, .3); border-radius: 4px; padding: 0 4px; font-family: Cairo, system-ui, sans-serif; } #activePhonesContainer .tk-advflag { font-size: 8.5px; font-weight: 800; color: #6ee7b7; background: rgba(16, 185, 129, .13); border: 1px solid rgba(16, 185, 129, .3); border-radius: 4px; padding: 0 4px; font-family: Cairo, system-ui, sans-serif; white-space: nowrap; } /* status select + message + loss: one 34 px row (tap area 38 px through the row's own 4 px gaps and the slop below) */ #activePhonesContainer .tk-ctl { display: flex; align-items: center; gap: 4px; min-width: 0; } #activePhonesContainer .tk-sel { flex: 1 1 auto; min-width: 0; height: 34px; min-height: 34px; padding: 0 8px; border-radius: 8px; background: #1e293b; color: #fff; border: 1px solid rgba(255, 255, 255, .1); font-weight: 800; outline: none; } #activePhonesContainer .tk-mini { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 34px; min-height: 0; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #cbd5e1; font-size: 10.5px; font-weight: 800; line-height: 1; white-space: nowrap; } #activePhonesContainer .tk-mini i { font-size: 10px; } #activePhonesContainer .tk-mini::after, #activePhonesContainer .tk-cta::after { content: ""; position: absolute; inset: -3px 0; } #activePhonesContainer .tk-cta { position: relative; } #activePhonesContainer .tk-mini span { display: none; } /* icon-only on phones: the labels return from 481 px */ #activePhonesContainer .tk-loss { display: grid; gap: 5px; padding: 6px; border-radius: 8px; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .2); } #activePhonesContainer .tk-loss:not(.open) { padding-block: 0; border-width: 0; } #activePhonesContainer .tk-loss input { min-height: 36px; } /* the decisive delivery button: 30 px (+ slop) */ #activePhonesContainer .tk-cta { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 30px; min-height: 0; border-radius: 10px; font-size: 12px; font-weight: 900; color: #fff; padding: 0 8px; line-height: 1; } #activePhonesContainer .tk-cta i { font-size: 11px; } #activePhonesContainer .tk-cta-go { background: linear-gradient(90deg, #059669, #16a34a); } #activePhonesContainer .tk-cta-alt { background: #1e293b; color: #fcd34d; border: 1px solid rgba(245, 158, 11, .3); font-weight: 800; } #activePhonesContainer .tk-log { border: 1px solid rgba(255, 255, 255, .05); border-radius: 8px; background: rgba(0, 0, 0, .4); padding: 4px 6px; } #activePhonesContainer .tk-log-head { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: #94a3b8; border-bottom: 1px solid rgba(255, 255, 255, .05); padding-bottom: 2px; margin-bottom: 2px; } @media (min-width: 481px) { #activePhonesContainer .tk-mini span { display: inline; } #activePhonesContainer .tk-ctl .tk-sel { flex: 1 1 40%; } } /* ============================== 1. shell + containers (<= 480 px) ============================== */ @media (max-width: 480px) { /* outer shell padding 14 -> 8 px; the floating-sync / footer clearance below the last card stays */ :root #adminApp main { padding: 8px 8px 12px; } :root #adminApp .tab-content.space-y-4 > * + *, :root #adminApp .tab-content .space-y-4 > * + *, :root #adminApp .tab-content .space-y-5 > * + * { margin-top: 6px; } :root #adminApp .tab-content .space-y-3 > * + * { margin-top: 6px; } :root #adminApp .tab-content .space-y-2 > * + *, :root #adminApp .tab-content .space-y-2\.5 > * + * { margin-top: 5px; } :root #adminApp #activePhonesContainer > * + * { margin-top: 6px; } /* cards: 12.8-20 px padding -> 8-10 px, tighter radii */ :root #adminApp .tab-content .p-3, :root #adminApp .tab-content .p-3\.5, :root #adminApp .tab-content .p-4, :root #adminApp .tab-content .p-5, :root #adminApp .tab-content .p-6, :root #adminApp .tab-content .p-7, :root #adminApp .tab-content > .glass { padding: 8px; } :root #adminApp .tab-content .px-4, :root #adminApp .tab-content .px-5 { padding-inline: 10px; } :root #adminApp .tab-content .py-6, :root #adminApp .tab-content .py-5, :root #adminApp .tab-content .py-4, :root #adminApp .tab-content .py-3\.5 { padding-block: 8px; } :root #adminApp .tab-content .rounded-3xl, :root #adminApp .tab-content .rounded-2xl { border-radius: 12px; } :root #adminApp .tab-content .gap-4, :root #adminApp .tab-content .gap-5 { gap: 8px; } :root #adminApp .tab-content .gap-3 { gap: 6px; } :root #adminApp .tab-content .mb-4, :root #adminApp .tab-content .mb-5, :root #adminApp .tab-content .mb-6 { margin-bottom: 8px; } :root #adminApp .tab-content .pb-4, :root #adminApp .tab-content .pb-3 { padding-bottom: 6px; } /* section titles */ :root #adminApp .tab-content h3 { font-size: 14px; line-height: 1.25; } :root #adminApp .tab-content h4 { font-size: 12px; line-height: 1.25; } /* the lists' own gutters */ :root #adminApp .tab-content .glass .space-y-3 > * + * { margin-top: 6px; } } /* ============================== 2. controls: inputs 36-38 px, filter pills 28-30 px, taps >= 38 px ============================== */ @media (max-width: 480px) { :root #adminApp .tab-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not(.tk-sel), :root #adminApp .tab-content select:not(.tk-sel), :root #adminApp .tab-content textarea { min-height: 36px; padding-block: 4px; } :root #adminApp .tab-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), :root #adminApp .tab-content select { height: 38px; } :root #adminApp .tab-content textarea { min-height: 54px; } /* the search box + sort bar of the active list */ :root #adminApp #tab-active #activeSortBar { padding: 2px 4px; border-radius: 10px; } :root #adminApp #tab-active #activeSortBar select { height: 32px; min-height: 32px; padding: 0 4px; } :root #adminApp #tab-active #activeSearchQuery { height: 36px; min-height: 36px; } :root #adminApp .tab-content .glass > .flex.flex-wrap.justify-between { gap: 6px; } /* chips and tabs: 28 px drawn, 38 px tappable (the slop never leaves the strip: it uses the strip's own padding) */ :root #adminApp .tab-content [data-filter-chip], :root #adminApp .tab-content button.rounded-full { min-height: 28px; height: 28px; padding-block: 0; position: relative; } :root #adminApp .tab-content button.rounded-full::after { content: ""; position: absolute; inset: -5px 0; } :root #adminApp .tab-content .overflow-x-auto { scrollbar-width: none; } :root #adminApp .tab-content .overflow-x-auto::-webkit-scrollbar { display: none; } /* the regular buttons of the screens: 36 px drawn, the rest of the 38 px is the hit slop */ :root #adminApp .tab-content button:not(.tk-act):not(.tk-mini):not(.tk-cta):not(.tk-approve):not([role="tab"]):not(.rounded-full):not([id^="btnActFilter-"]) { min-height: 34px; position: relative; } :root #adminApp .tab-content button:not(.tk-act):not(.tk-mini):not(.tk-cta):not(.tk-approve):not([role="tab"]):not(.rounded-full):not([id^="btnActFilter-"])::after { content: ""; position: absolute; inset: -2px 0; pointer-events: auto; } /* no horizontal overflow, ever */ :root #adminApp .tab-content { overflow-x: clip; max-width: 100%; } /* clip, not hidden: hidden would turn every tab into a scroll container and break the sticky Save / header bars */ } /* ============================== 4. financial closing: dense 2-column KPI grid ============================== */ @media (max-width: 480px) { :root #adminApp #fcKpiDeck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } :root #adminApp #fcKpiDeck > [data-kpi] { padding: 6px 8px; border-radius: 10px; gap: 1px; } :root #adminApp #fcKpiDeck > [data-kpi] > span:nth-child(1) { font-size: 10px; line-height: 1.2; } :root #adminApp #fcKpiDeck > [data-kpi] > span:nth-child(2) { font-size: 17px; line-height: 1.15; letter-spacing: 0; } :root #adminApp #fcKpiDeck > [data-kpi].col-span-2 > span:nth-child(2) { font-size: 18px; } :root #adminApp #fcKpiDeck > [data-kpi] > span:nth-child(3) { font-size: 9px; line-height: 1.2; } :root #adminApp #fcPartnerDeck > * { padding: 8px; gap: 4px; border-radius: 10px; } :root #adminApp #fcPartnerDeck .text-2xl { font-size: 18px; line-height: 1.15; } :root #adminApp #fcPartnerDeck .text-base { font-size: 14px; } /* allocation forms: the amount row and its confirm button stay on one line */ :root #adminApp #fcLossDeductControlRow, :root #adminApp #fcExpDeductControlRow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: end; padding-top: 2px; } :root #adminApp #fcLossDeductInput, :root #adminApp #fcExpDeductInput { height: 36px; min-height: 36px; padding-block: 2px; } :root #adminApp #btnConfirmLossAllocation, :root #adminApp #btnConfirmExpenseAllocation { min-height: 36px; height: 36px; padding: 0 10px; font-size: 11px; } :root #adminApp #tab-closing .glass .border-b { padding-bottom: 6px; } :root #adminApp #fcDeliveredPhonesContainer { max-height: 14rem; } :root #adminApp #fcDeliveredPhonesContainer > * { padding: 6px 8px; } } /* ---- active list: the filter block (title + date scopes | search + sort | two chip rows) takes ~160 px instead of ~300 ---- */ @media (max-width: 480px) { :root #adminApp #tab-active > .glass:first-child { padding: 8px; } :root #adminApp #tab-active > .glass:first-child > .flex.flex-wrap { flex-wrap: nowrap; gap: 6px; } :root #adminApp #tab-active > .glass:first-child h3 { font-size: 13px; white-space: nowrap; } :root #adminApp #tab-active > .glass:first-child > .flex.flex-wrap > .flex.gap-1 button { padding-inline: 8px !important; font-size: 10.5px; } :root #adminApp #tab-active > .glass:first-child > .grid { grid-template-columns: 1.1fr 1fr; gap: 6px; } :root #adminApp #tab-active #activeSortBar > span { font-size: 0; padding: 0 4px; } :root #adminApp #tab-active #activeSortBar > span i { font-size: 11px; margin: 0; } :root #adminApp #tab-active #activeSortBar select { font-size: 16px; text-overflow: ellipsis; } } /* ---- closing: the allocation rows (label + 0 / max shortcuts above, amount + confirm below) ---- */ @media (max-width: 480px) { :root #adminApp #fcLossDeductControlRow .flex.justify-between, :root #adminApp #fcExpDeductControlRow .flex.justify-between { flex-wrap: wrap; row-gap: 3px; } :root #adminApp #fcLossDeductControlRow button[onclick^="setAllocationValue"], :root #adminApp #fcExpDeductControlRow button[onclick^="setAllocationValue"] { white-space: nowrap; min-height: 26px; height: 26px; padding: 0 8px; font-size: 10px; } :root #adminApp #fcLossDeductControlRow button[onclick^="setAllocationValue"]::after, :root #adminApp #fcExpDeductControlRow button[onclick^="setAllocationValue"]::after { inset: -6px -1px; } } /* ============================== 5. main hub: condensed module rows ============================== */ @media (max-width: 480px) { :root #adminApp #tab-home { padding-bottom: 0; } :root #adminApp #tab-home > [data-module-id] { padding: 6px 8px; border-radius: 10px; } :root #adminApp #tab-home > [data-module-id="quickSearch"] { padding: 8px; } :root #adminApp #tab-home > button[data-module-id], :root #adminApp #tab-home > [data-module-id]:not([data-module-id="quickSearch"]):not([data-module-id="intakeHandover"]) { min-height: 40px; } /* module rows: a 30 px icon, a 13 px title, the 10 px subtitle on a single truncated line */ :root #adminApp #tab-home > button[data-module-id] .tone-icon { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; } :root #adminApp #tab-home > button[data-module-id] .tone-title { font-size: 13px; line-height: 1.2; } :root #adminApp #tab-home > button[data-module-id] .leading-snug { font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; } :root #adminApp #tab-home > button[data-module-id] .gap-2\.5 { gap: 8px; } /* intake | handover: two compact tiles */ :root #adminApp #tab-home [data-module-id="intakeHandover"] { gap: 6px; } :root #adminApp #tab-home [data-module-id="intakeHandover"] > button { padding: 6px 8px; gap: 3px; border-radius: 10px; } :root #adminApp #tab-home [data-module-id="intakeHandover"] .tone-icon { width: 26px; height: 26px; font-size: 12px; } :root #adminApp #tab-home [data-module-id="intakeHandover"] .tone-title { font-size: 13px; } :root #adminApp #tab-home [data-module-id="intakeHandover"] .text-\[11px\] { font-size: 10px; } :root #adminApp #tab-home [data-module-id="intakeHandover"] .w-6 { width: 20px; height: 20px; } /* quick search: the title row shrinks, the field row is 36 px */ :root #adminApp #tab-home [data-module-id="quickSearch"] { gap: 6px; } :root #adminApp #tab-home [data-module-id="quickSearch"] .p-1 { padding: 2px; } :root #adminApp #tab-home #quickDirectCodeInput { min-height: 36px; height: 36px; } :root #adminApp #tab-home [data-module-id="quickSearch"] button { min-height: 36px; } :root #adminApp #tab-home [data-module-id="quickSearch"] > div:first-child { flex-wrap: wrap; gap: 4px; } } /* ============================== 6. modals + sheets opened after sign-in ============================== */ @media (max-width: 480px) { :root body[data-tab] .fixed.inset-0 > div:not(.fixed) { max-width: 100%; } :root body[data-tab] .fixed.inset-0 :is(.p-4, .p-5, .p-6, .p-7) { padding: 10px; } :root body[data-tab] .fixed.inset-0 :is(.px-5, .px-6) { padding-inline: 10px; } :root body[data-tab] .fixed.inset-0 :is(.py-4, .py-5) { padding-block: 8px; } :root body[data-tab] .fixed.inset-0 .space-y-4 > * + *, :root body[data-tab] .fixed.inset-0 .space-y-5 > * + * { margin-top: 8px; } :root body[data-tab] .fixed.inset-0 .space-y-3 > * + * { margin-top: 6px; } :root body[data-tab] .fixed.inset-0 :is(.rounded-3xl, .rounded-2xl) { border-radius: 14px; } :root body[data-tab] .fixed.inset-0 :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select) { min-height: 36px; height: 38px; padding-block: 4px; } :root body[data-tab] .dpp-sheet { padding: 0; } :root body[data-tab] .dpp-sheet-body { padding: 8px 10px; } } /* ============================== 7. closing: advance deposit settlement card (v3.13.0, "اقتطاع تسبيقات الصيانة (رأس المال أولاً)") ============================== * One dense card: title + counter | ticket selector + one-tap button | a single row of three metric previews | the settlements added to this closing. * Same density tokens as the rest of the compact layout (36-38 px controls, 16 px text in the select so iOS never zooms, 8 px padding), at every width. */ :root #adminApp #fcAdvanceCard { padding: 8px; border-radius: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } :root #adminApp #fcAdvanceCard .fc-adv-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } :root #adminApp #fcAdvanceCard .fc-adv-ttl { display: flex; align-items: center; gap: 6px; min-width: 0; } :root #adminApp #fcAdvanceCard .fc-adv-ttl h4 { margin: 0; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; } :root #adminApp #fcAdvanceCard .fc-adv-ico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #6ee7b7; background: rgba(16, 185, 129, .13); border: 1px solid rgba(16, 185, 129, .3); } :root #adminApp #fcAdvanceCard .fc-adv-badge { flex: 0 0 auto; min-width: 22px; padding: 1px 6px; text-align: center; border-radius: 999px; font: 800 10px/1.6 ui-monospace, monospace; color: #6ee7b7; background: rgba(16, 185, 129, .13); border: 1px solid rgba(16, 185, 129, .3); } :root #adminApp #fcAdvanceCard .fc-adv-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; } :root #adminApp #fcAdvanceCard .fc-adv-select { width: 100%; min-width: 0; height: 38px; padding: 0 8px; border-radius: 10px; font-size: 16px; color: #fff; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .12); text-overflow: ellipsis; } :root #adminApp #fcAdvanceCard .fc-adv-select:disabled { opacity: .55; } :root #adminApp #fcAdvanceCard .fc-adv-btn { height: 38px; min-height: 38px; padding: 0 12px; border-radius: 10px; font-size: 12px; font-weight: 900; white-space: nowrap; color: #022c22; background: #34d399; border: 1px solid #6ee7b7; display: inline-flex; align-items: center; gap: 6px; } :root #adminApp #fcAdvanceCard .fc-adv-btn:disabled { opacity: .45; background: rgba(255, 255, 255, .08); color: #94a3b8; border-color: rgba(255, 255, 255, .12); } :root #adminApp #fcAdvanceCard .fc-adv-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } :root #adminApp #fcAdvanceCard .fc-adv-m { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 4px 6px; border-radius: 8px; background: rgba(2, 6, 23, .7); border: 1px solid rgba(255, 255, 255, .08); } :root #adminApp #fcAdvanceCard .fc-adv-ml { font-size: 9.5px; font-weight: 700; line-height: 1.2; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root #adminApp #fcAdvanceCard .fc-adv-m b { font: 800 14px/1.15 ui-monospace, monospace; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } :root #adminApp #fcAdvanceCard .fc-adv-m:nth-child(1) b { color: #93c5fd; } :root #adminApp #fcAdvanceCard .fc-adv-m:nth-child(2) b { color: #6ee7b7; } :root #adminApp #fcAdvanceCard .fc-adv-m:nth-child(3) b { color: #67e8f9; } :root #adminApp #fcAdvanceCard .fc-adv-hint { margin: 0; font-size: 10px; font-weight: 700; color: #fcd34d; } :root #adminApp #fcAdvanceCard .fc-adv-list { display: flex; flex-direction: column; gap: 4px; } :root #adminApp #fcAdvanceCard .fc-adv-list:empty { display: none; } :root #adminApp #fcAdvanceCard .fc-adv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name rm" "nums rm"; column-gap: 6px; align-items: center; padding: 4px 6px; border-radius: 8px; background: rgba(16, 185, 129, .08); border: 1px solid rgba(16, 185, 129, .22); } :root #adminApp #fcAdvanceCard .fc-adv-name { grid-area: name; font: 800 11px/1.25 Cairo, system-ui, sans-serif; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root #adminApp #fcAdvanceCard .fc-adv-nums { grid-area: nums; font: 700 10px/1.25 ui-monospace, monospace; color: #6ee7b7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root #adminApp #fcAdvanceCard .fc-adv-rm { grid-area: rm; position: relative; width: 30px; height: 30px; min-height: 30px; border-radius: 8px; font-size: 16px; line-height: 1; color: #fda4af; background: rgba(244, 63, 94, .12); border: 1px solid rgba(244, 63, 94, .3); } :root #adminApp #fcAdvanceCard .fc-adv-rm::after { content: ""; position: absolute; inset: -4px; } @media (max-width: 360px) { :root #adminApp #fcAdvanceCard .fc-adv-m b { font-size: 12.5px; } :root #adminApp #fcAdvanceCard .fc-adv-btn span { display: none; } } /* ============================== 8. windowed repairs: the "تحميل الأرشيف" strip and the partial-total note (v3.13.1) ============================== * One slim row (info text | one button) under the ticket filters; the note is a single amber line above a total that is partial until the archive is loaded. * Tap target 38 px, text never clipped (it wraps), same density tokens as the rest of the compact layout. */ :root #adminApp .rw-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap; min-width: 0; margin: 4px 0; padding: 4px 8px; border-radius: 10px; background: rgba(2, 6, 23, .6); border: 1px solid rgba(255, 255, 255, .08); } :root #adminApp .rw-bar.hidden { display: none; } :root #adminApp .rw-info { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 160px; font-size: 11px; font-weight: 700; line-height: 1.35; color: #94a3b8; overflow-wrap: anywhere; } :root #adminApp .rw-info i { flex: 0 0 auto; color: #67e8f9; } :root #adminApp .rw-btn { flex: 0 0 auto; min-height: 38px; padding: 0 12px; border-radius: 10px; font-size: 12px; font-weight: 900; white-space: nowrap; color: #083344; background: #22d3ee; border: 1px solid #67e8f9; } :root #adminApp .rw-btn:disabled { opacity: .5; background: rgba(255, 255, 255, .08); color: #94a3b8; border-color: rgba(255, 255, 255, .12); } :root #adminApp .rw-note { margin: 4px 0; padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 1.35; color: #fcd34d; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .28); overflow-wrap: anywhere; } /* ============================== 9. ticket separation and the device info frame (v3.13.2) ============================== * Each phone is its own raised card (own surface, a crisp edge, a cyan accent on the start edge, a 12 px gap to the next one), and the thumbnail | customer | model | fault | money block sits * inside a tinted, bordered frame so neighbouring tickets never bleed into each other. Pure presentation: same markup, handlers and data. */ #activePhonesContainer > .tk { margin-top: 0; margin-bottom: 12px; background: rgba(15, 23, 42, .92); border-color: rgba(255, 255, 255, .16); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); } #activePhonesContainer > .tk:last-child { margin-bottom: 0; } #activePhonesContainer > .tk:not([data-watchdog-card]) { border-inline-start: 3px solid rgba(34, 211, 238, .75); } #activePhonesContainer > .tk.border-emerald-500\/40 { border-inline-start-color: rgba(52, 211, 153, .9); } #activePhonesContainer .tk-row { padding: 9px; border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); } /* ============================== 10. direct call button + one-line header identity (v3.13.3) ============================== */ #activePhonesContainer .tk-call { min-width: 38px; text-decoration: none; color: #6ee7b7; background: rgba(16, 185, 129, .12); border-color: rgba(52, 211, 153, .35); } #activePhonesContainer .tk-call:active { transform: scale(.96); }