/* ==============================================================
   325 - VIEWING DRAWER / POLISH (v653)   phones only (<=720px)
   Loaded after css/324. Fixes found by rendering the drawer with the real project files:
   - date / time / save on ONE line, "03:30 PM" no longer cut
   - NOTE box has the same frame + edges as STATUS / RESCH
   - "Unit" tile = same icon size and label line as the other tiles
   - broker card: phone + email on their own row under the name (email shown in full)
   - header: grab handle no longer touches the chips; Purpose (CLIENT) chip is flat, same height as the others
   - activity: vertical line passes through the icon centres, row dividers are straight
   - reference number never clipped; "Del" is a soft red; overdue ping no longer shows as a clipped pink block
   Every rule is scoped to #vcDetailModal .vc-ticket-modal. Roll back: remove this <link> tag.
   ============================================================== */
@media (max-width:720px){

  /* ---------- header ---------- */
  #vcDetailModal .vc-ticket-modal .vc-ticket-head-main .vc-ticket-kicker{ margin-top:6px!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-close{ top:12px!important; }

  /* chips row: all the same height, Purpose chip flat (no pill inside a pill) */
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub>span{ height:24px!important; min-height:24px!important; box-sizing:border-box!important; align-items:center!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub .vc-purpose{
    display:inline-flex!important; gap:5px!important; padding:0 9px 0 4px!important; border-left-width:1px!important; border-radius:999px!important;
  }
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub .vc-purpose-ico{ width:16px!important; height:16px!important; font-size:8.5px!important; border-radius:50%!important; flex:0 0 16px; padding:0!important; margin:0!important; box-sizing:border-box!important; min-width:0!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub .vc-purpose-body{ display:inline-flex!important; align-items:center!important; gap:0!important; background:none!important; border:0!important; padding:0!important; box-shadow:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub .vc-purpose-label{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub .vc-purpose-value{
    background:none!important; border:0!important; box-shadow:none!important; padding:0!important; margin:0!important; border-radius:0!important;
    font-size:10.5px!important; line-height:1!important; letter-spacing:.02em;
  }
  /* overdue "ping" on the time chip is clipped by the sheet on phones -> a pink block; keep it still */
  #vcDetailModal.vcx.vcx-overdue .vc-ticket-modal .vc-ticket-sub>span:last-child{ animation:none!important; }

  /* ---------- broker card: phone + email on their own row ---------- */
  #vcDetailModal .vc-ticket-modal .vcb-id{ flex-wrap:wrap!important; row-gap:4px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-reach{
    flex:1 1 100%!important; max-width:100%!important; min-width:0!important; width:100%;
    flex-direction:row!important; flex-wrap:wrap!important; align-items:center!important; gap:2px 14px!important;
    padding:4px 0 0!important; border-left:0!important; border-top:1px solid rgba(120,120,120,.18);
  }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row{ max-width:100%!important; font-size:10.5px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row>span,
  #vcDetailModal .vc-ticket-modal .vcp-reach-row:first-child>span{ overflow:visible!important; text-overflow:clip!important; white-space:nowrap; flex:0 1 auto; min-width:0; }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row:nth-child(2){ display:flex!important; }

  /* ---------- tool tiles: Unit = same size as the rest ---------- */
  #vcDetailModal .vc-ticket-modal .vcp-r3>.vc-booking-action>span,
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-booking-action>span{ display:flex!important; align-items:center!important; justify-content:center!important; height:15px!important; flex:0 0 15px; }
  #vcDetailModal .vc-ticket-modal .vcp-r3>.vc-booking-action>span i{ font-size:15px!important; color:#5f7893!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r3>.vc-booking-action>b{ font-size:9.5px!important; line-height:1.1!important; font-weight:800!important; }
  /* Del: soft red (was a solid block that outshouted everything else) */
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-danger-solid{ background:#fdeceb!important; border-color:#eeb4ae!important; color:#b3261e!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-danger-solid>i,
  #vcDetailModal .vc-ticket-modal .vcp-r4>.vc-danger-solid>span{ color:#b3261e!important; }

  /* ---------- status / resch / note ---------- */
  #vcDetailModal .vc-ticket-modal .vc-quick-controls:not(.vc-status-highlight){
    background:linear-gradient(180deg,#f6f8fb 0%,#fff 70%)!important; border:1px solid #d9e0ea!important; border-left:3px solid #7d8fa6!important; border-radius:var(--radius-md,12px)!important;
    padding:6px 8px!important; box-sizing:border-box!important;
  }
  #vcDetailModal .vc-ticket-modal .vc-quick-controls:not(.vc-status-highlight)>label{ color:#5f7893!important; }
  #vcDetailModal .vc-ticket-modal .vc-quick-controls>.vc-inline-row.vc-note-row{ display:flex!important; gap:5px!important; }
  #vcDetailModal .vc-ticket-modal .vc-note-row #vcNoteInput{ flex:1 1 auto!important; min-width:0!important; width:auto!important; }
  #vcDetailModal .vc-ticket-modal .vc-note-row>button{ flex:0 0 40px!important; width:40px!important; }

  /* date | time | save on ONE line; AM/PM never cut */
  #vcDetailModal .vc-ticket-modal .vc-quick-controls>.vc-inline-row:not(.vc-note-row){
    display:grid!important; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 40px!important; gap:5px!important; align-items:center!important;
  }
  #vcDetailModal .vc-ticket-modal .vc-inline-row:not(.vc-note-row) input[type=date],
  #vcDetailModal .vc-ticket-modal .vc-inline-row:not(.vc-note-row) input[type=time]{
    width:100%!important; min-width:0!important; font-size:11.5px!important; padding:0 4px 0 7px!important; letter-spacing:0!important; font-variant-numeric:tabular-nums;
    overflow:visible!important; text-overflow:clip!important;
  }
  #vcDetailModal .vc-ticket-modal .vc-inline-row input::-webkit-datetime-edit{ padding:0!important; white-space:nowrap; }
  #vcDetailModal .vc-ticket-modal .vc-inline-row input::-webkit-datetime-edit-fields-wrapper{ padding:0!important; }
  #vcDetailModal .vc-ticket-modal .vc-inline-row input::-webkit-calendar-picker-indicator{ margin:0 0 0 2px!important; padding:0!important; width:13px!important; height:13px!important; flex:0 0 13px; }
  #vcDetailModal .vc-ticket-modal .vc-inline-row:not(.vc-note-row)>button{ width:40px!important; padding:0!important; justify-content:center; grid-column:auto!important; grid-row:auto!important; }

  /* ---------- reference + activity ---------- */
  #vcDetailModal .vc-ticket-modal .vcp-ref-row .vc-ticket-ref-no{ overflow:visible!important; text-overflow:clip!important; flex:0 0 auto!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list{ padding-left:0!important; padding-right:0!important; }
  /* the line runs through the icon centres: icon column = 18px wide, starting 2px in */
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list::before{ left:10.5px!important; top:12px!important; bottom:12px!important; width:1px!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item{
    border:0!important; border-radius:0!important; box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)!important; padding:5px 4px 5px 2px!important; margin:0!important;
  }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item:last-child{ box-shadow:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub .vc-history-list>.vc-history-item>i:first-child{ position:relative; z-index:1; }
}

/* very narrow phones (<=400px): the picker glyphs inside the date / time fields give their space to the text.
   Tapping the field still opens the picker. */
@media (max-width:400px){
  #vcDetailModal .vc-ticket-modal .vc-inline-row input::-webkit-calendar-picker-indicator{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-inline-row:not(.vc-note-row) input[type=date],
  #vcDetailModal .vc-ticket-modal .vc-inline-row:not(.vc-note-row) input[type=time]{ padding:0 3px 0 6px!important; }
}
@media (max-width:350px){
  #vcDetailModal .vc-ticket-modal .vcp-reach-row i{ display:inline-block!important; }
  #vcDetailModal .vc-ticket-modal .vcp-reach-row{ font-size:10px!important; }
  #vcDetailModal .vc-ticket-modal .vc-inline-row:not(.vc-note-row) input[type=date],
  #vcDetailModal .vc-ticket-modal .vc-inline-row:not(.vc-note-row) input[type=time]{ font-size:11px!important; }
  #vcDetailModal .vc-ticket-modal .vc-quick-controls:not(.vc-status-highlight){ border-left-width:3px!important; }
}

/* phones up to 780px high (360x740, 375x667 ...): the Activity block gives back some room to the form */
@media (max-width:720px) and (max-height:780px){
  #vcDetailModal .vc-ticket-modal .vcp-reach{ padding-top:2px!important; border-top-width:0!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub{ max-height:clamp(96px,17dvh,176px)!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r3>*,
  #vcDetailModal .vc-ticket-modal .vcp-r4>*{ height:38px!important; min-height:38px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-r1>.vc-primary-action{ min-height:42px!important; }
}
/* short phones (<=700px high): give the form a little more room - the Activity block is the one that shrinks */
@media (max-width:720px) and (max-height:700px){
  #vcDetailModal .vc-ticket-modal .vc-ticket-head-main .vc-ticket-kicker{ margin-top:4px!important; margin-bottom:3px!important; }
  #vcDetailModal .vc-ticket-modal .vcp-reach{ padding-top:2px!important; border-top-width:0!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub{ max-height:clamp(96px,18dvh,150px)!important; }
}