/* ==============================================================
   324 - VIEWING DRAWER / PROFESSIONAL PHONE LAYOUT (v652)   phones only (<=720px)
   Loaded after css/323. Pairs with js/324-drawer-pro.js. Every rule is scoped to
   #vcDetailModal .vc-ticket-modal and is one step more specific than css/321-323,
   so it wins without touching them. Roll back: remove its <link> and js/324 <script>.
   ============================================================== */
@media (max-width:720px){

  /* ---------- 1. header row: full words, one line, no wasted space ---------- */
  #vcDetailModal .vc-ticket-modal .vc-ticket-head-main .vc-ticket-kicker{
    display:flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:4px!important;
    margin:0 34px 5px 0!important; overflow:hidden; text-transform:none!important; letter-spacing:0!important; font-size:9.5px!important;
  }
  #vcDetailModal .vc-ticket-modal .vc-ticket-kicker::before{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-kicker>span,
  #vcDetailModal .vc-ticket-modal .vc-ticket-kicker .vcp-k-main{
    display:inline-flex!important; align-items:center!important; gap:4px!important; flex:0 0 auto; white-space:nowrap;
    padding:2px 7px!important; border-radius:999px!important; font-size:9.5px!important; font-weight:700!important; line-height:1.4!important; letter-spacing:0!important;
  }
  #vcDetailModal .vc-ticket-modal .vcp-k-main{ background:rgba(206,165,119,.18)!important; color:#7a5a2c!important; border:1px solid rgba(206,165,119,.45)!important; }
  #vcDetailModal .vc-ticket-modal .vcp-k-main i{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vcp-t-short{ display:none; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-kicker.vcp-k-short .vcp-t-full{ display:none; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-kicker.vcp-k-short .vcp-t-short{ display:inline; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-kicker .vc-confirmed-tag i,
  #vcDetailModal .vc-ticket-modal .vc-ticket-kicker .vc-brokeredit-tag i{ font-size:9px!important; }

  /* title + chips row: the chips share the whole width evenly */
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub{ display:flex!important; flex-wrap:nowrap!important; gap:4px!important; width:100%; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub>span{ flex:1 1 auto!important; justify-content:center!important; display:inline-flex!important; align-items:center; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub>.vc-purpose{ flex:0 0 auto!important; }

  /* ---------- 2. unit strip: ONE line  [A070 VAC UM | A037 VAC RFO | A068 VAC RFO] ---------- */
  #vcDetailModal .vc-ticket-modal .vcu-strip{ display:flex!important; flex-wrap:nowrap!important; align-items:center!important; }
  #vcDetailModal .vc-ticket-modal .vcu-cell{
    flex:1 1 auto!important; flex-direction:row!important; flex-wrap:nowrap!important; justify-content:center!important; align-items:center!important;
    gap:3px!important; padding:5px 2px!important; overflow:hidden;
  }
  #vcDetailModal .vc-ticket-modal .vcu-no{ flex:0 0 auto; font-size:10.5px!important; letter-spacing:0!important; }
  #vcDetailModal .vc-ticket-modal .vcu-book{ flex:0 0 auto; font-size:8px!important; padding:1px 5px!important; line-height:1.35!important; }
  #vcDetailModal .vc-ticket-modal .vcu-maint{ flex:0 1 auto; min-width:0; }
  #vcDetailModal .vc-ticket-modal .vcu-maint.vcp-none{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vcu-maint .avl-remark-signal{ font-size:8px!important; padding:1px 5px!important; gap:2px!important; }
  #vcDetailModal .vc-ticket-modal .vcu-maint .avl-remark-signal i{ font-size:7.5px!important; }
  #vcDetailModal .vc-ticket-modal .vcu-note{ font-size:8px!important; }

  /* ---------- 3. broker card ---------- */
  #vcDetailModal .vc-ticket-modal .vcb{ display:flex!important; flex-direction:column!important; align-items:stretch!important; }
  #vcDetailModal .vc-ticket-modal .vcb-id{
    display:flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:8px!important; padding:6px 10px!important; max-width:none!important; width:100%; box-sizing:border-box;
  }
  #vcDetailModal .vc-ticket-modal .vcb-who{ flex:1 1 auto!important; min-width:0!important; display:flex!important; flex-direction:column!important; gap:1px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-name-line{ display:flex; align-items:center; gap:5px; min-width:0; }
  #vcDetailModal .vc-ticket-modal .vcp-name-line strong{ flex:0 1 auto; min-width:0; font-size:12.5px!important; white-space:nowrap!important; overflow:hidden; text-overflow:ellipsis; }
  #vcDetailModal .vc-ticket-modal .vcp-name-line .vcb-tier{ padding:2px 7px!important; font-size:9px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-name-line .vcb-tier i{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vcp-name-line .vcb-tier{ margin:0!important; flex:0 0 auto; }
  #vcDetailModal .vc-ticket-modal .vcb-who small{ font-size:10px!important; letter-spacing:.02em; text-transform:uppercase; }
  #vcDetailModal .vc-ticket-modal .vcp-reach{
    flex:0 1 auto; max-width:40%; min-width:92px; display:flex; flex-direction:column; gap:2px; align-items:flex-start;
    padding-left:8px; border-left:1px solid rgba(120,120,120,.25);
  }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row{ display:flex; align-items:center; gap:5px; min-width:0; max-width:100%; font-size:10px; font-weight:600; line-height:1.3; }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row i{ flex:0 0 auto; width:11px; text-align:center; font-size:9px; color:#b08a52; }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row>span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row:first-child>span{ overflow:visible; text-overflow:clip; flex:0 0 auto; }
  #vcDetailModal .vc-ticket-modal .vcb-body{ display:block!important; border-left:0!important; border-top:1px solid rgba(120,120,120,.18); }
  #vcDetailModal .vc-ticket-modal .vcb-body:empty{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vcb-contract{ flex:none!important; width:100%; box-sizing:border-box; }

  /* ---------- 4. tools: four rows ---------- */
  #vcDetailModal .vc-ticket-modal .vc-action-desk.vcp-desk{ display:block!important; margin:0 0 6px!important; }
  #vcDetailModal .vc-ticket-modal .vc-action-desk.vcp-desk>.vc-action-section,
  #vcDetailModal .vc-ticket-modal .vc-action-desk.vcp-desk>.vc-outcome-zone{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vcp-tools{ display:flex; flex-direction:column; gap:5px; width:100%; }
  #vcDetailModal .vc-ticket-modal .vcp-row{ display:grid; grid-template-columns:repeat(var(--n,1),minmax(0,1fr)); gap:5px; width:100%; }
  #vcDetailModal .vc-ticket-modal .vcp-row.vcp-empty{ display:none; }

  /* row 1 - Broker | Reception : icon, title, real status, state badge */
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-action{
    position:relative; display:flex!important; flex-direction:row!important; align-items:center!important; gap:7px!important;
    min-height:44px!important; padding:5px 22px 5px 6px!important; border-radius:11px!important; min-width:0!important; width:auto!important; margin:0!important;
    background:#fff!important; border:1px solid #d8dee8!important; box-shadow:0 1px 2px rgba(22,45,76,.06)!important; color:#162d4c!important;
    overflow:hidden;
  }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-action::before{ display:none!important; content:none!important; }  /* no "START HERE" tag */
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vc-primary-icon{ width:28px!important; height:28px!important; flex:0 0 28px!important; border-radius:9px!important; display:grid!important; place-items:center; background:#162d4c!important; color:#fff!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vc-primary-icon i{ font-size:13px!important; color:inherit!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vc-primary-copy{ display:flex!important; flex-direction:column!important; gap:1px!important; min-width:0!important; flex:1 1 auto!important; align-items:flex-start!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vc-primary-copy b{ font-size:12.5px!important; line-height:1.15!important; font-weight:800!important; color:#162d4c!important; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vc-primary-copy small{ display:block!important; font-size:8.8px!important; line-height:1.2!important; font-weight:600; letter-spacing:0!important; color:#7b8998!important; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vc-primary-arrow{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vcp-state{ position:absolute; top:50%; right:6px; transform:translateY(-50%); width:15px; height:15px; display:block; color:#9aa7b6; line-height:0; }
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vcp-state svg{ width:100%; height:100%; display:block; }
  /* not sent yet = amber hint, sent = green */
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-confirm:not(.vcp-sent){ background:linear-gradient(135deg,#162d4c,#27456f)!important; border-color:#162d4c!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-confirm:not(.vcp-sent) .vc-primary-icon{ background:rgba(255,255,255,.16)!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-confirm:not(.vcp-sent) .vc-primary-copy b{ color:#fff!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-confirm:not(.vcp-sent) .vc-primary-copy small{ color:#f0d9b0!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-confirm:not(.vcp-sent) .vcp-state{ color:#f0d9b0; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-action.vcp-sent{ background:linear-gradient(135deg,#f1faf4,#e3f4ea)!important; border-color:#9fd3b3!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-action.vcp-sent .vc-primary-icon{ background:#1f8f55!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-action.vcp-sent .vc-primary-copy small{ color:#1f7a49!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-action.vcp-sent .vcp-state{ color:#1f8f55; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-reception:not(.vcp-sent){ background:linear-gradient(135deg,#fffaf0,#fdf0d6)!important; border-color:#e6c98f!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-reception:not(.vcp-sent) .vc-primary-icon{ background:linear-gradient(135deg,#d9b27a,#b98a4c)!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-reception:not(.vcp-sent) .vc-primary-copy small{ color:#9a6f2f!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-reception:not(.vcp-sent) .vcp-state{ color:#b98a4c; }

  /* row 2 - Viewing Pass */
  #vcDetailModal .vc-ticket-modal .vcp-r2>.vc-pass-action{
    width:100%!important; box-sizing:border-box; margin:0!important; padding:5px 6px!important; border-radius:11px!important;
    background:#fff!important; border:1px solid #e3e8ef!important; box-shadow:none!important;
    grid-template-columns:26px minmax(0,1fr) 28px minmax(0,1fr) 28px 28px!important; gap:4px!important;
  }
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-dest-btn{ padding:0 5px!important; gap:4px!important; justify-content:center; }
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-dest-btn .pass-open{ font-size:8px!important; opacity:.6; }
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-copy-icon,
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-pdf-btn{ width:28px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-action-head .vc-primary-icon{ width:26px!important; height:26px!important; border-radius:8px!important; background:#162d4c!important; color:#fff!important; display:grid!important; place-items:center; }
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-action-head .vc-primary-icon i{ font-size:11px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-dest-btn,
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-copy-icon,
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-pdf-btn{ height:32px!important; min-height:0!important; border-radius:8px!important; }

  /* rows 3 and 4 - equal icon tiles */
  #vcDetailModal .vc-ticket-modal .vcp-r3>*,
  #vcDetailModal .vc-ticket-modal .vcp-r4>*{
    display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important;
    min-width:0!important; width:auto!important; height:40px!important; min-height:40px!important; padding:3px 1px!important; margin:0!important; box-sizing:border-box;
    border-radius:10px!important; background:#fff!important; border:1px solid #dfe5ed!important; box-shadow:none!important;
    color:#33475f!important; text-decoration:none!important; text-align:center; font-weight:700;
  }
  #vcDetailModal .vc-ticket-modal .vcp-r3>*>i:not(.fa-chevron-right),
  #vcDetailModal .vc-ticket-modal .vcp-r4>*>i{ font-size:15px!important; margin:0!important; color:#5f7893!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r3>*>span,
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-booking-action>span{ display:flex!important; flex-direction:column!important; align-items:center!important; width:auto!important; height:auto!important; min-width:0; max-width:100%; background:none!important; border:0!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-booking-action>span i{ font-size:15px!important; color:#5f7893!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r3>*>i.fa-chevron-right,
  #vcDetailModal .vc-ticket-modal .vcp-r4>*>i.fa-chevron-right{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r3 b,
  #vcDetailModal .vc-ticket-modal .vcp-r4 b,
  #vcDetailModal .vc-ticket-modal .vcp-r4 .vc-secondary-action>span{ font-size:9.5px!important; line-height:1.1!important; font-weight:800!important; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:inherit!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r3 small{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-booking-action:first-child,
  #vcDetailModal .vc-ticket-modal .vcp-r3>.vc-booking-action:first-child{ display:flex!important; }
  /* brand tints */
  #vcDetailModal .vc-ticket-modal .vcp-r3>.vc-contact-wa{ background:#effaf3!important; border-color:#b9e3c8!important; color:#1a7a45!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r3>.vc-contact-wa>i{ color:#25a85a!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r3>.vc-contact-call>i{ color:#162d4c!important; }
  /* row 4 - admin: Edit neutral, Lost / Rej red outline, Del solid red */
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-danger-action{ background:#fff!important; border-color:#f0cfcf!important; color:#c0392b!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-danger-action>i{ color:#c0392b!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-danger-solid{ background:#c8402f!important; border-color:#c8402f!important; color:#fff!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-danger-solid>i{ color:#fff!important; }

  /* ---------- 5. reference + activity (navy block) ---------- */
  #vcDetailModal .vc-ticket-modal .vcp-ref-row{ display:flex; align-items:center; gap:7px; margin:0 0 5px; min-width:0; }
  #vcDetailModal .vc-ticket-modal .vcp-ref-row .vc-ticket-ref-label{ display:inline-block!important; flex:0 0 auto; margin:0!important; font-size:9px!important; letter-spacing:.08em; text-transform:uppercase; color:#93A0BC; }
  #vcDetailModal .vc-ticket-modal .vcp-ref-row .vc-ticket-ref-no{ display:inline-block!important; flex:0 1 auto; min-width:0; margin:0!important; font-size:16px!important; line-height:1.15; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #vcDetailModal .vc-ticket-modal .vcp-ref-copy{ all:unset; box-sizing:border-box; flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; border-radius:7px; background:rgba(233,217,174,.14); color:#E9D9AE; font-size:10px; cursor:pointer; }
  #vcDetailModal .vc-ticket-modal .vcp-ref-log{ margin-left:auto; flex:0 0 auto; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#93A0BC; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub::before{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub{ flex:0 0 auto!important; max-height:clamp(118px,23dvh,176px)!important; min-height:0!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-main{ flex:1 1 auto!important; min-height:0!important; }

  /* activity rows: [icon] [title / detail] [time]  - the icon never sits on the text again */
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list::before{ left:9px; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item{
    display:grid!important; grid-template-columns:18px minmax(0,1fr) auto!important; column-gap:7px!important; row-gap:0!important; align-items:start!important;
    padding:5px 2px!important; position:relative; width:100%; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,.08);
  }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item>i:first-child{
    position:static!important; grid-column:1!important; grid-row:1!important; width:18px!important; height:18px!important; display:grid!important; place-items:center;
    margin:0!important; font-size:9px!important; background:var(--color-navy,#162d4c); border-radius:50%;
  }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item>span{ grid-column:2!important; grid-row:1!important; min-width:0; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item>time{ grid-column:3!important; grid-row:1!important; padding:2px 0 0!important; font-size:8.5px!important; text-align:right; white-space:nowrap; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item>.vc-history-go{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item b{ display:block; font-size:10.5px!important; line-height:1.25!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item small{ display:block; font-size:9px!important; line-height:1.25!important; overflow-wrap:anywhere; }
}

@media (max-width:720px){
  #vcDetailModal .vc-ticket-modal .vc-inline-row input[type=date],
  #vcDetailModal .vc-ticket-modal .vc-inline-row input[type=time]{ font-size:11.5px!important; padding:0 4px!important; }
}
/* very short screens: a little tighter */
@media (max-width:720px) and (max-height:640px){
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-action{ min-height:38px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r3>*,
  #vcDetailModal .vc-ticket-modal .vcp-r4>*{ height:34px!important; min-height:34px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-tools{ gap:4px; }
}

/* very narrow phones (<=350px): one notch smaller so nothing is clipped */
@media (max-width:350px){
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub>span{ font-size:9px!important; padding:0 5px!important; }
  #vcDetailModal .vc-ticket-modal .vcu-cell{ gap:2px!important; padding:5px 1px!important; }
  #vcDetailModal .vc-ticket-modal .vcu-no{ font-size:9.5px!important; }
  #vcDetailModal .vc-ticket-modal .vcu-book{ font-size:7.5px!important; padding:1px 4px!important; }
  #vcDetailModal .vc-ticket-modal .vcu-maint .avl-remark-signal{ font-size:7.5px!important; padding:1px 3px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-reach{ max-width:46%; padding-left:6px; }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row i{ display:none; }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row{ font-size:9.5px; }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row:nth-child(2){ display:none; }  /* email stays in the Mail tile on very narrow phones */
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vc-primary-icon{ width:24px!important; height:24px!important; flex-basis:24px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vc-primary-copy b{ font-size:11px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1 .vc-primary-copy small{ font-size:8.3px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-dest-btn>i{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r2 .vc-pass-dest-btn{ padding:0 3px!important; }
}