/* ==============================================================
   323 - VIEWING DRAWER / FIT-TO-SCREEN (v651)   phones only (<=720px)
   Goal: the whole drawer fits the screen with NO outer scrolling, on any phone size.
   - sheet = flex column; only the Activity log scrolls (inside the navy block)
   - units = one strip [A070 | A037 | A068] with booking state + maintenance state under each number
   - header on 2 lines, tools in ONE row, status / reschedule / note = label column + field
   - sizes use clamp()/dvh so tiles shrink on short screens
   Loaded after css/321. Roll back: remove its <link> and js/323 <script> in index.html.
   ============================================================== */
@media (max-width:720px){
  /* ---------- sheet: one column that fills at most the screen ---------- */
  #vcDetailModal .vc-ticket-modal{
    display:flex!important; flex-direction:column!important; overflow:hidden!important;
    max-height:calc(100dvh - 8px)!important; max-height:calc(100vh - 8px)!important; max-height:calc(100dvh - 8px)!important;
    --vcf-h: clamp(32px, 5.4dvh, 42px);
  }
  #vcDetailModal .vc-ticket-modal .vc-ticket-grid{ display:flex!important; flex-direction:column!important; flex:1 1 auto!important; min-height:0!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-main{ flex:0 1 auto!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; padding:12px 10px 6px!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-stub{ flex:1 1 auto!important; min-height:64px!important; display:flex!important; flex-direction:column!important; padding:7px 10px 8px!important; overflow:hidden!important; }
  #vcDetailModal .vc-ticket-modal *{ min-width:0; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-main > *{ max-width:100%; }

  /* ---------- header ---------- */
  #vcDetailModal .vc-ticket-modal .vc-ticket-close{ top:6px!important; right:6px!important; width:28px!important; height:28px!important; font-size:12px!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-head-row{ margin:0 0 5px!important; padding:0 0 5px!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-kicker{ margin:0 34px 1px 0!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-head-main .vc-ticket-title{
    font-size:14px!important; margin:0 34px 4px 0!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub{ flex-wrap:nowrap!important; margin:0!important; overflow:hidden; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-sub>span{ flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---------- unit strip ---------- */
  #vcDetailModal .vc-ticket-modal .vc-ticket-unit-status{ margin:5px 0 0!important; padding:0!important; border-radius:10px!important; overflow:hidden; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-unit-status-head,
  #vcDetailModal .vc-ticket-modal .vc-ticket-unit-status .vc-unit-status-row{ display:none!important; }
  /* if the strip could not be built, the old rows stay visible */
  #vcDetailModal .vc-ticket-modal .vc-ticket-unit-status:not(:has(.vcu-strip)) .vc-unit-status-row{ display:flex!important; }
  #vcDetailModal .vc-ticket-modal .vcu-strip{ display:flex; align-items:stretch; width:100%; }
  #vcDetailModal .vc-ticket-modal .vcu-cell{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; padding:5px 3px 5px; text-align:center;
  }
  #vcDetailModal .vc-ticket-modal .vcu-cell + .vcu-cell{ border-left:1px solid rgba(120,120,120,.28); }
  #vcDetailModal .vc-ticket-modal .vcu-no{ font-size:11px; line-height:1.1; font-weight:800; letter-spacing:.02em; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #vcDetailModal .vc-ticket-modal .vcu-book{ font-size:8.5px!important; line-height:1.3!important; padding:1px 7px!important; border-radius:999px; font-weight:800; letter-spacing:.03em; }
  #vcDetailModal .vc-ticket-modal .vcu-maint{ display:flex; justify-content:center; max-width:100%; }
  #vcDetailModal .vc-ticket-modal .vcu-maint .avl-remark-signal{ font-size:8.5px!important; padding:1px 6px!important; line-height:1.3!important; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #vcDetailModal .vc-ticket-modal .vcu-note{ font-size:8.5px; opacity:.75; }
  #vcDetailModal .vc-ticket-modal .vcu-maint:empty{ display:none; }

  /* ---------- stage + broker: tight ---------- */
  #vcDetailModal .vc-ticket-modal .vc-ticket-status{ margin:0 0 5px!important; padding:3px 9px!important; }
  #vcDetailModal .vc-ticket-modal .vc-attendance-strip,
  #vcDetailModal .vc-ticket-modal [class*="vc-attend"]{ margin-bottom:5px!important; }
  #vcDetailModal .vc-ticket-modal .vcb{ margin:0 0 5px!important; }
  #vcDetailModal .vc-ticket-modal .vcb-id{ padding:4px 9px!important; }
  #vcDetailModal .vc-ticket-modal .vcb-contract{ padding:3px 9px!important; }
  #vcDetailModal .vc-ticket-modal .vcb-c-empty{ padding:3px 8px!important; }

  /* ---------- actions: Broker|Reception, Pass, tools row, outcome ---------- */
  #vcDetailModal .vc-ticket-modal .vc-action-desk{ display:flex!important; flex-wrap:wrap!important; gap:5px!important; margin:0 0 5px!important; }
  #vcDetailModal .vc-ticket-modal .vc-action-section-primary,
  #vcDetailModal .vc-ticket-modal .vc-outcome-zone{ flex:0 0 100%!important; }
  #vcDetailModal .vc-ticket-modal .vc-action-section-contact,
  #vcDetailModal .vc-ticket-modal .vc-action-section-booking,
  #vcDetailModal .vc-ticket-modal .vc-contact-action-row,
  #vcDetailModal .vc-ticket-modal .vc-booking-action-grid{ display:contents!important; }
  /* Reschedule button only scrolls to the fields that are always visible here */
  #vcDetailModal .vc-ticket-modal .vc-booking-action:first-child{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-contact-action,
  #vcDetailModal .vc-ticket-modal .vc-booking-action{
    flex:1 1 0!important; min-height:calc(var(--vcf-h) + 2px)!important; padding:3px 1px!important;
  }
  #vcDetailModal .vc-ticket-modal .vc-primary-action{ min-height:var(--vcf-h)!important; padding:4px 8px!important; }
  #vcDetailModal .vc-ticket-modal .vc-primary-action-grid{ gap:5px!important; }
  #vcDetailModal .vc-ticket-modal .vc-pass-dest-btn,
  #vcDetailModal .vc-ticket-modal .vc-pass-copy-icon,
  #vcDetailModal .vc-ticket-modal .vc-pass-pdf-btn{ height:clamp(28px, 4.6dvh, 34px)!important; min-height:0!important; }
  #vcDetailModal .vc-ticket-modal .vc-outcome-actions .vc-secondary-action{ min-height:clamp(28px, 4.6dvh, 36px)!important; }

  /* ---------- status / reschedule / note: label column + field, nothing cut off ---------- */
  #vcDetailModal .vc-ticket-modal .vc-detail-two-col{ display:flex!important; flex-direction:column!important; gap:4px!important; }
  #vcDetailModal .vc-ticket-modal .vc-quick-controls{
    display:grid!important; grid-template-columns:42px minmax(0,1fr)!important; align-items:center!important;
    column-gap:6px!important; row-gap:4px!important; padding:6px 8px!important; margin:0!important; width:100%!important; box-sizing:border-box!important;
  }
  #vcDetailModal .vc-ticket-modal .vc-quick-controls>label{ margin:0!important; font-size:8.5px!important; line-height:1.1!important; white-space:nowrap; }
  #vcDetailModal .vc-ticket-modal .vc-quick-controls>.vc-status-hint{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-quick-controls select{ width:100%!important; max-width:100%!important; height:clamp(30px,4.6dvh,36px)!important; box-sizing:border-box!important; }
  #vcDetailModal .vc-ticket-modal .vc-inline-row{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; gap:5px!important; }
  #vcDetailModal .vc-ticket-modal .vc-inline-row>*{ min-width:0!important; max-width:100%!important; }
  #vcDetailModal .vc-ticket-modal .vc-inline-row input[type=date],
  #vcDetailModal .vc-ticket-modal .vc-inline-row input[type=time]{ height:clamp(30px,4.6dvh,36px)!important; padding:0 6px!important; font-size:12px!important; box-sizing:border-box!important; }
  #vcDetailModal .vc-ticket-modal .vc-inline-row>button{ height:clamp(30px,4.6dvh,36px)!important; }
  #vcDetailModal .vc-ticket-modal #vcNoteInput{ height:clamp(30px,4.6dvh,36px)!important; min-height:0!important; box-sizing:border-box!important; }
  /* custom date/time pickers (js/43) wrap the inputs: let the wrappers shrink too */
  #vcDetailModal .vc-ticket-modal .vc-inline-row [class*="dtp"],
  #vcDetailModal .vc-ticket-modal .vc-inline-row [class*="picker"]{ min-width:0!important; max-width:100%!important; }

  /* ---------- navy block: ref + the only scrolling area ---------- */
  #vcDetailModal .vc-ticket-modal .vc-ticket-stage-pill{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-ref-no{ font-size:15px!important; margin:0 0 4px!important; }
  #vcDetailModal .vc-ticket-modal .vc-history{ flex:1 1 auto!important; min-height:0!important; display:flex!important; flex-direction:column!important; }
  #vcDetailModal .vc-ticket-modal .vc-history>label{ display:none!important; }
  #vcDetailModal .vc-ticket-modal .vc-history-list{ flex:1 1 auto!important; min-height:0!important; max-height:none!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; }
}

/* very short screens (landscape / small phones): trim a little more */
@media (max-width:720px) and (max-height:640px){
  #vcDetailModal .vc-ticket-modal{ --vcf-h:30px; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-head-row{ margin-bottom:3px!important; padding-bottom:3px!important; }
  #vcDetailModal .vc-ticket-modal .vc-pass-action{ padding:2px 4px!important; }
  #vcDetailModal .vc-ticket-modal .vcu-cell{ padding:3px 2px!important; gap:1px!important; }
  #vcDetailModal .vc-ticket-modal .vc-ticket-ref-label{ display:none!important; }
}