/* ============================================================== 321 — VIEWING DRAWER / PHONE-COMPACT ACTION DESK (v648) Phones only (<=720px). Desktop and iPad are untouched. Row 1 : [ Broker ] [ Reception ] send confirmation / notify reception Row 2 : ticket icon + Broker link + copy + Reception link + copy + PDF Row 3 : Call | WhatsApp | Email | Follow-up (icons, one row) Row 4 : Reschedule | Edit request | Open unit (icons, one row) Row 5 : Mark lost | Reject | Delete (one row) Loaded last; every rule is scoped to #vcDetailModal so it wins over css/117-123, 238 and 250. Remove its in index.html to roll back. ============================================================== */ @media (max-width:720px){ #vcDetailModal .vc-ticket-modal .vc-action-desk{ gap:6px!important; margin:0 0 6px!important; } #vcDetailModal .vc-ticket-modal .vc-action-section{ border-radius:12px!important; } /* ---------- Row 1: Broker | Reception ---------- */ #vcDetailModal .vc-ticket-modal .vc-primary-action-grid{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:6px!important; padding:6px!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action{ min-height:48px!important; padding:6px 9px!important; gap:8px!important; min-width:0!important; display:flex!important; align-items:center!important; border-radius:11px!important; } #vcDetailModal .vc-ticket-modal .vc-primary-reception:first-child{ grid-column:1/-1!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action .vc-primary-arrow{ display:none!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action .vc-primary-icon{ width:28px!important; height:28px!important; flex:0 0 28px!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action .vc-primary-icon i{ font-size:13px!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action .vc-primary-copy{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:1px!important; min-width:0!important; flex:1 1 auto!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action .vc-primary-copy b{ font-size:13px!important; line-height:1.15!important; font-weight:800!important; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #vcDetailModal .vc-ticket-modal .vc-primary-action .vc-primary-copy small{ display:block!important; font-size:9.5px!important; line-height:1.15!important; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---------- Row 2: Viewing Pass links + copy + PDF, one line ---------- */ #vcDetailModal .vc-ticket-modal .vc-pass-action{ grid-column:1/-1!important; display:grid!important; grid-template-columns:24px minmax(0,1fr) 30px minmax(0,1fr) 30px 30px!important; gap:5px!important; align-items:center!important; padding:5px 6px!important; } #vcDetailModal .vc-ticket-modal .vc-pass-action-row, #vcDetailModal .vc-ticket-modal .vc-pass-copy-row{ display:contents!important; } #vcDetailModal .vc-ticket-modal .vc-pass-action-head{ margin:0!important; display:flex!important; } #vcDetailModal .vc-ticket-modal .vc-pass-action-head .vc-primary-copy{ display:none!important; } #vcDetailModal .vc-ticket-modal .vc-pass-action-head .vc-primary-icon{ width:24px!important; height:24px!important; } #vcDetailModal .vc-ticket-modal .vc-pass-dest-btn{ min-height:34px!important; padding:0 8px!important; font-size:11.5px!important; gap:5px!important; min-width:0!important; } #vcDetailModal .vc-ticket-modal .vc-pass-dest-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #vcDetailModal .vc-ticket-modal .vc-pass-copy-icon{ width:30px!important; height:34px!important; padding:0!important; } #vcDetailModal .vc-ticket-modal .vc-pass-pdf-btn{ width:30px!important; height:34px!important; padding:0!important; margin:0!important; font-size:0!important; line-height:1!important; display:flex!important; align-items:center; justify-content:center; border:1px solid #f0cfcf!important; background:#fff5f5!important; color:#c0392b!important; border-radius:7px!important; } #vcDetailModal .vc-ticket-modal .vc-pass-pdf-btn i{ font-size:14px!important; margin:0!important; } /* ---------- Row 3: Call | WhatsApp | Email | Follow-up ---------- */ #vcDetailModal .vc-ticket-modal .vc-contact-action-row{ display:grid!important; grid-auto-flow:column!important; grid-auto-columns:minmax(0,1fr)!important; gap:6px!important; padding:6px!important; } #vcDetailModal .vc-ticket-modal .vc-contact-action{ flex-direction:column!important; justify-content:center!important; align-items:center!important; gap:3px!important; min-height:52px!important; padding:6px 2px!important; text-align:center; min-width:0!important; } #vcDetailModal .vc-ticket-modal .vc-contact-action>i{ font-size:18px!important; margin:0!important; } #vcDetailModal .vc-ticket-modal .vc-contact-action span{ display:flex!important; flex-direction:column!important; align-items:center!important; gap:0!important; min-width:0; max-width:100%; } #vcDetailModal .vc-ticket-modal .vc-contact-action b{ font-size:10.5px!important; line-height:1.1!important; } #vcDetailModal .vc-ticket-modal .vc-contact-action small{ display:none!important; } /* ---------- Row 4: Reschedule | Edit request | Open unit ---------- */ #vcDetailModal .vc-ticket-modal .vc-booking-action-grid{ display:grid!important; grid-auto-flow:column!important; grid-auto-columns:minmax(0,1fr)!important; gap:6px!important; padding:6px!important; } #vcDetailModal .vc-ticket-modal .vc-booking-action{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; min-height:52px!important; padding:6px 2px!important; text-align:center; min-width:0!important; } #vcDetailModal .vc-ticket-modal .vc-booking-action>i{ display:none!important; } #vcDetailModal .vc-ticket-modal .vc-booking-action>span{ width:24px!important; height:24px!important; } #vcDetailModal .vc-ticket-modal .vc-booking-action>b{ font-size:10.5px!important; line-height:1.1!important; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---------- Row 5: Mark lost | Reject | Delete ---------- */ #vcDetailModal .vc-ticket-modal .vc-outcome-zone{ padding:6px!important; display:block!important; } #vcDetailModal .vc-ticket-modal .vc-outcome-zone>div:first-child{ display:none!important; } #vcDetailModal .vc-ticket-modal .vc-outcome-actions{ display:grid!important; grid-auto-flow:column!important; grid-auto-columns:minmax(0,1fr)!important; gap:6px!important; margin:0!important; } #vcDetailModal .vc-ticket-modal .vc-outcome-actions .vc-secondary-action{ min-height:40px!important; padding:0 4px!important; font-size:11px!important; gap:5px!important; width:auto!important; display:flex!important; align-items:center!important; justify-content:center!important; min-width:0!important; } /* ---------- Less air elsewhere in the drawer ---------- */ #vcDetailModal .vc-ticket-modal .vc-status-hint{ display:none!important; } #vcDetailModal .vc-ticket-modal .vc-detail-two-col{ gap:6px!important; } #vcDetailModal .vc-ticket-modal .vc-quick-controls{ padding:8px!important; } /* the floating call bubble sat on top of the buttons; Call is now in Row 3 */ #vcDetailModal .vc-quick-call-fab{ display:none!important; } } /* ============================================================== 321 part 2 (v649) - WHOLE DRAWER, top to bottom, phones only. Header chips on fewer lines, unit status = one line per unit, stage = one line (label + dots), broker card one-liner, action desk without extra frames, status/reschedule/note in compact rows, reference + activity block shorter. ============================================================== */ @media (max-width:720px){ #vcDetailModal .vc-ticket-modal{ max-height:94vh!important; max-height:94dvh!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-main{ padding:14px 10px 10px!important; } /* ---------- Header ---------- */ #vcDetailModal .vc-ticket-modal .vc-ticket-head-row{ display:block!important; margin-bottom:6px!important; padding-bottom:6px!important; gap:6px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-kicker{ font-size:9.5px!important; letter-spacing:.05em!important; margin:0 34px 3px 0!important; gap:2px 8px!important; line-height:1.3!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-kicker>span{ font-size:9.5px!important; letter-spacing:.04em!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-head-main .vc-ticket-title{ font-size:15px!important; line-height:1.25!important; margin:0 0 5px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-sub{ gap:4px!important; margin:0 0 6px!important; flex-wrap:wrap!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-sub>span{ padding:1px 8px 1px 7px!important; font-size:10.5px!important; line-height:1.5!important; gap:4px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-sub .vc-purpose{ padding:1px 9px 1px 2px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-sub .vc-purpose-ico{ width:18px!important; height:18px!important; font-size:9px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-sub .vc-purpose-value{ font-size:10.5px!important; } /* ---------- Units: ONE line per unit [id remark status] ---------- */ #vcDetailModal .vc-ticket-modal .vc-ticket-unit-status{ width:100%!important; flex:none!important; margin:0!important; padding:1px 8px!important; border-radius:10px!important; } #vcDetailModal .vc-ticket-modal .vc-unit-status-row{ display:flex!important; align-items:center!important; gap:6px!important; padding:4px 0!important; margin:0!important; flex-wrap:nowrap!important; } #vcDetailModal .vc-ticket-modal .vc-unit-status-top{ display:contents!important; } #vcDetailModal .vc-ticket-modal .vc-unit-status-id{ order:1; flex:0 0 auto; font-size:9.5px!important; letter-spacing:0!important; white-space:nowrap; } #vcDetailModal .vc-ticket-modal .vc-unit-remark-row{ order:2; flex:1 1 auto; min-width:0; display:flex!important; flex-wrap:wrap; gap:3px!important; margin:0!important; padding:0!important; } #vcDetailModal .vc-ticket-modal .vc-unit-status-top .avl-status-badge{ order:3; margin-left:auto!important; flex:0 0 auto; font-size:9px!important; padding:2px 7px!important; } #vcDetailModal .vc-ticket-modal .vc-unit-remark-row .avl-remark-signal{ font-size:8.5px!important; padding:1px 6px!important; gap:3px!important; line-height:1.4!important; } #vcDetailModal .vc-ticket-modal .vc-unit-remark-empty{ display:none!important; } /* ---------- Stage: label + dots on ONE line (full names on tap/hover of a dot) ---------- */ #vcDetailModal .vc-ticket-modal .vc-ticket-status{ display:flex!important; align-items:center!important; gap:10px!important; padding:5px 10px!important; margin:0 0 6px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-status-head{ display:flex!important; flex:0 0 auto; max-width:48%; margin:0!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-status-head span{ display:none!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-status-head b{ font-size:11px!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #vcDetailModal .vc-ticket-modal .vc-ticket-status .vc-stepper{ flex:1 1 auto!important; min-width:0!important; display:flex!important; overflow:visible!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-status .vc-step{ flex:1 1 0!important; min-width:0!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-status .vc-step-label{ display:none!important; } /* ---------- Broker card: one compact block ---------- */ #vcDetailModal .vc-ticket-modal .vcb{ margin:0 0 6px!important; border-radius:12px!important; } #vcDetailModal .vc-ticket-modal .vcb-id{ padding:6px 10px!important; gap:8px!important; max-width:none!important; } #vcDetailModal .vc-ticket-modal .vcb-mono{ width:30px!important; height:30px!important; flex:0 0 30px!important; font-size:11px!important; } #vcDetailModal .vc-ticket-modal .vcb-who strong{ font-size:13px!important; line-height:1.2!important; } #vcDetailModal .vc-ticket-modal .vcb-who small{ font-size:10.5px!important; line-height:1.2!important; } #vcDetailModal .vc-ticket-modal .vcb-tier{ font-size:9.5px!important; padding:2px 8px!important; gap:4px!important; } #vcDetailModal .vc-ticket-modal .vcb-contract{ padding:5px 10px!important; } #vcDetailModal .vc-ticket-modal .vcb-c-empty{ padding:5px 8px!important; gap:8px!important; align-items:center!important; } #vcDetailModal .vc-ticket-modal .vcb-c-empty>i{ font-size:15px!important; } #vcDetailModal .vc-ticket-modal .vcb-c-empty b{ font-size:11px!important; } #vcDetailModal .vc-ticket-modal .vcb-c-empty small{ display:none!important; } /* ---------- Action desk: no extra frames, tiles sit directly on the sheet ---------- */ #vcDetailModal .vc-ticket-modal .vc-action-section{ background:none!important; border:0!important; box-shadow:none!important; padding:0!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action-grid, #vcDetailModal .vc-ticket-modal .vc-contact-action-row, #vcDetailModal .vc-ticket-modal .vc-booking-action-grid, #vcDetailModal .vc-ticket-modal .vc-outcome-zone{ padding:0!important; background:none!important; border:0!important; box-shadow:none!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action{ min-height:46px!important; } #vcDetailModal .vc-ticket-modal .vc-contact-action, #vcDetailModal .vc-ticket-modal .vc-booking-action{ min-height:46px!important; } #vcDetailModal .vc-ticket-modal .vc-action-desk{ gap:5px!important; margin:0 0 6px!important; } /* ---------- Status / reschedule / note: compact rows ---------- */ #vcDetailModal .vc-ticket-modal .vc-notes{ padding:6px 10px!important; margin:0 0 6px!important; } #vcDetailModal .vc-ticket-modal .vc-notes p{ font-size:12px!important; margin:0!important; } #vcDetailModal .vc-ticket-modal .vc-quick-controls{ padding:7px 9px!important; } #vcDetailModal .vc-ticket-modal .vc-quick-controls>label{ font-size:9.5px!important; margin:4px 0 3px!important; letter-spacing:.04em!important; } #vcDetailModal .vc-ticket-modal .vc-quick-controls>label:first-child{ margin-top:0!important; } #vcDetailModal .vc-ticket-modal .vc-quick-controls select{ height:36px!important; font-size:12.5px!important; } #vcDetailModal .vc-ticket-modal .vc-inline-row{ display:flex!important; flex-wrap:nowrap!important; gap:6px!important; align-items:stretch!important; } #vcDetailModal .vc-ticket-modal .vc-inline-row input[type=date]{ flex:1.5 1 0!important; width:auto!important; min-width:0!important; height:36px!important; } #vcDetailModal .vc-ticket-modal .vc-inline-row input[type=time]{ flex:1 1 0!important; width:auto!important; min-width:0!important; height:36px!important; } #vcDetailModal .vc-ticket-modal .vc-inline-row>button{ flex:0 0 42px!important; width:42px!important; height:36px!important; padding:0!important; margin:0!important; font-size:0!important; display:flex!important; align-items:center!important; justify-content:center!important; } #vcDetailModal .vc-ticket-modal .vc-inline-row>button i{ font-size:15px!important; margin:0!important; } #vcDetailModal .vc-ticket-modal #vcNoteInput{ flex:1 1 auto!important; height:36px!important; min-height:36px!important; max-height:90px; resize:none!important; padding:8px 10px!important; font-size:12.5px!important; line-height:1.3!important; } /* ---------- Reference + activity ---------- */ #vcDetailModal .vc-ticket-modal .vc-ticket-stub{ padding:9px 10px 10px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-ref-label{ display:inline-block!important; margin:0 8px 0 0!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-ref-no{ display:inline-block!important; font-size:17px!important; margin:0 0 6px!important; vertical-align:baseline; } #vcDetailModal .vc-ticket-modal .vc-history-list{ max-height:150px!important; overflow-y:auto!important; } #vcDetailModal .vc-ticket-modal .vc-history-item{ padding:5px 6px!important; gap:7px!important; } #vcDetailModal .vc-ticket-modal .vc-history-item b{ font-size:11px!important; } #vcDetailModal .vc-ticket-modal .vc-history-item small{ font-size:9.5px!important; } } /* part 3 (v650) - smaller type, tighter tiles; wording is shortened by js/322 */ @media (max-width:720px){ #vcDetailModal .vc-ticket-modal .vc-ticket-head-main .vc-ticket-title{ font-size:13.5px!important; margin-bottom:4px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-kicker, #vcDetailModal .vc-ticket-modal .vc-ticket-kicker>span{ font-size:9px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-sub>span{ font-size:10px!important; padding:0 7px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-sub .vc-purpose-value{ font-size:10px!important; } #vcDetailModal .vc-ticket-modal .vc-unit-status-id{ font-size:9px!important; } #vcDetailModal .vc-ticket-modal .vc-unit-remark-row .avl-remark-signal{ font-size:8.5px!important; } #vcDetailModal .vc-ticket-modal .vc-ticket-status-head b{ font-size:10.5px!important; } #vcDetailModal .vc-ticket-modal .vcb-who strong{ font-size:12px!important; } #vcDetailModal .vc-ticket-modal .vcb-who small{ font-size:9.5px!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action{ min-height:42px!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action .vc-primary-copy b{ font-size:12px!important; } #vcDetailModal .vc-ticket-modal .vc-primary-action .vc-primary-copy small{ font-size:9px!important; } #vcDetailModal .vc-ticket-modal .vc-pass-dest-btn{ font-size:10.5px!important; min-height:32px!important; } #vcDetailModal .vc-ticket-modal .vc-contact-action, #vcDetailModal .vc-ticket-modal .vc-booking-action{ min-height:42px!important; gap:2px!important; } #vcDetailModal .vc-ticket-modal .vc-contact-action b, #vcDetailModal .vc-ticket-modal .vc-booking-action>b{ font-size:9.5px!important; } #vcDetailModal .vc-ticket-modal .vc-outcome-actions .vc-secondary-action{ min-height:36px!important; font-size:10.5px!important; } #vcDetailModal .vc-ticket-modal .vc-quick-controls>label{ font-size:9px!important; } #vcDetailModal .vc-ticket-modal .vc-history-item b{ font-size:10.5px!important; } #vcDetailModal .vc-ticket-modal .vc-history-item small{ font-size:9px!important; } }