/* JKV_WEB_R25_20260924 - operations UI: vertical milestone tracker, real action buttons, mobile record cards.
   Presentation only. No workflow, data or permission change. */

/* ---------- 1. vertical milestone tracker (replaces the horizontal strip everywhere) ---------- */
.streamline-step-strip{display:grid!important;gap:0!important;margin:12px 0!important;padding:14px 14px 6px!important;border:1px solid #dbe8f3!important;border-radius:14px!important;background:#fff!important}
.streamline-step-strip>span{position:relative!important;display:block!important;padding:0 0 16px 34px!important;margin:0!important;border:0!important;background:none!important;border-radius:0!important;font-size:13.5px!important;font-weight:800!important;color:#7d8ea1!important;white-space:normal!important;line-height:1.25!important}
.streamline-step-strip>span::before{content:""!important;position:absolute!important;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #cfdceb;box-sizing:border-box}
.streamline-step-strip>span::after{content:""!important;position:absolute!important;left:8px;top:19px;bottom:-1px;width:2px;background:#e3ebf3}
.streamline-step-strip>span:last-child{padding-bottom:6px!important}
.streamline-step-strip>span:last-child::after{display:none!important}
.streamline-step-strip>span.done{color:#0D2B5B!important}
.streamline-step-strip>span.done::before{background:#1F8A3C;border-color:#1F8A3C;box-shadow:inset 0 0 0 2px #fff}
.streamline-step-strip>span.done::after{background:#1F8A3C}
.streamline-step-strip>span.done+span:not(.done)::before{border-color:#F7941D;box-shadow:0 0 0 3px rgba(247,148,29,.18)}
.streamline-step-strip>span.done+span:not(.done){color:#C96A00!important}

/* ---------- 2. real action buttons ---------- */
.btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:46px!important;padding:0 18px!important;border-radius:12px!important;font-weight:800!important;font-size:14.5px!important;line-height:1.1!important;text-decoration:none!important;cursor:pointer!important;border:1px solid transparent!important;transition:transform .06s ease,box-shadow .12s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:#F7941D!important;border-color:#F7941D!important;color:#fff!important;box-shadow:0 6px 16px rgba(247,148,29,.26)!important}
.btn.outline{background:#fff!important;border-color:#cfe0ef!important;color:#0D2B5B!important}
.btn.outline:hover{border-color:#1663C7!important;color:#1663C7!important}
.btn.danger{background:#fff!important;border-color:#e2b3b3!important;color:#9a2b2b!important}
.btn.small{min-height:38px!important;padding:0 14px!important;font-size:13px!important;border-radius:10px!important}
.btn[disabled],.btn:disabled{opacity:.5!important;cursor:not-allowed!important;box-shadow:none!important}
.row-actions,.form-actions,.head-actions,.document-actions,.wo-action-stack{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important}

/* ---------- 3. phone: records become cards instead of squeezed tables ---------- */
@media (max-width:760px){
  .btn{width:100%!important;min-height:50px!important;font-size:15px!important}
  .btn.small{width:auto!important;min-height:40px!important}
  .row-actions .btn,.form-actions .btn,.head-actions .btn,.wo-action-stack .btn{flex:1 1 100%!important}
  .table-wrap{overflow:visible!important;border:0!important;background:none!important;box-shadow:none!important}
  .data-table{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;border:0!important;table-layout:auto!important}
  .data-table tbody tr{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  .data-table thead{display:none!important}
  .data-table tbody,.data-table tr,.data-table td{display:block!important;width:auto!important}
  .data-table tr{border:1px solid #dbe8f3!important;border-radius:14px!important;background:#fff!important;padding:10px 12px!important;margin:0 0 10px!important;box-shadow:0 4px 12px rgba(13,43,91,.05)!important}
  .data-table td{border:0!important;padding:6px 0!important;text-align:left!important;font-size:14px!important;display:flex!important;gap:10px!important;align-items:flex-start!important;justify-content:space-between!important}
  .data-table td+td{border-top:1px dashed #edf2f7!important}
  .data-table td::before{content:attr(data-label);flex:0 0 42%;font-size:11px;font-weight:900;letter-spacing:.04em;color:#7d8ea1;text-transform:uppercase}
  .data-table td[data-label=""]::before{display:none}
  .data-table td>*{max-width:100%}
  .streamline-step-strip{padding:12px 12px 4px!important}
  .streamline-step-strip>span{font-size:14px!important}
}

/* JKV_WEB_R26_20260924 - live payment QR block */
.payment-destination img.jkv-live-qr{width:190px!important;height:190px!important;image-rendering:pixelated;background:#fff;border:1px solid #dbe8f3;border-radius:12px;padding:6px;box-sizing:border-box}
.jkv-qr-actions{display:grid;gap:8px;margin:10px 0 4px;max-width:340px}
.jkv-qr-actions .btn{width:100%}
.jkv-qr-note{font-size:12px;color:#4d6784;line-height:1.4}
@media (max-width:760px){.payment-destination img.jkv-live-qr{width:100%!important;height:auto!important;max-width:280px}.jkv-qr-actions{max-width:none}}

/* JKV_WEB_R32_20260925 - the vertical milestone tracker now covers every dashboard, not only the Technician view */
.jkv-roadmap,.s32-mini-roadmap,.procurement-roadmap{display:grid!important;gap:0!important;grid-template-columns:1fr!important;padding:12px 12px 4px!important;border:1px solid #dbe8f3!important;border-radius:14px!important;background:#fff!important;overflow:visible!important;white-space:normal!important}
.jkv-roadmap>*,.s32-mini-roadmap>span,.procurement-roadmap>div{position:relative!important;display:block!important;width:auto!important;min-width:0!important;flex:none!important;text-align:left!important;padding:0 0 15px 32px!important;margin:0!important;border:0!important;background:none!important;font-size:13px!important;line-height:1.25!important;color:#7d8ea1!important}
.jkv-roadmap>*::before,.s32-mini-roadmap>span::before,.procurement-roadmap>div::before{content:""!important;position:absolute!important;left:0!important;right:auto!important;top:1px!important;bottom:auto!important;width:17px!important;height:17px!important;border-radius:50%;background:#fff;border:2px solid #cfdceb;box-sizing:border-box;transform:none!important;margin:0!important}
.jkv-roadmap>*::after,.s32-mini-roadmap>span::after,.procurement-roadmap>div::after{content:""!important;position:absolute!important;left:7.5px!important;right:auto!important;top:18px!important;bottom:-1px!important;width:2px!important;height:auto!important;background:#e3ebf3;transform:none!important}
.jkv-roadmap>*:last-child,.s32-mini-roadmap>span:last-child,.procurement-roadmap>div:last-child{padding-bottom:6px!important}
.jkv-roadmap>*:last-child::after,.s32-mini-roadmap>span:last-child::after,.procurement-roadmap>div:last-child::after{display:none!important}
.jkv-roadmap>.done,.s32-mini-roadmap>span.done,.procurement-roadmap>div.done{color:#0D2B5B!important;font-weight:800!important}
.jkv-roadmap>.done::before,.s32-mini-roadmap>span.done::before,.procurement-roadmap>div.done::before{background:#1F8A3C;border-color:#1F8A3C;box-shadow:inset 0 0 0 2px #fff}
.jkv-roadmap>.done::after,.s32-mini-roadmap>span.done::after,.procurement-roadmap>div.done::after{background:#1F8A3C}
.jkv-roadmap>.current,.s32-mini-roadmap>span.current{color:#C96A00!important;font-weight:900!important}
.jkv-roadmap>.current::before,.s32-mini-roadmap>span.current::before{border-color:#F7941D;box-shadow:0 0 0 3px rgba(247,148,29,.18)}
.jkv-roadmap>* i,.s32-mini-roadmap>span i,.procurement-roadmap>div span{display:none!important}
.jkv-roadmap>* b,.s32-mini-roadmap>span b,.procurement-roadmap>div b{display:block!important;font-size:13px!important;font-weight:inherit!important;color:inherit!important;white-space:normal!important}
.procurement-roadmap>div small{display:block!important;font-size:11.5px!important;color:#5b7a95!important;margin-top:2px!important}
.s32-workorder-table .s32-tracker-row td{padding:8px 10px!important}

/* ---------- JKV_WEB_R41_20260928: phone work-order cards read like the JCR cards ---------- */
@media (max-width:760px){
  #dashboardContent .table-wrap,#dashboardContent .table-wrap>table,#dashboardContent .data-table,
  #dashboardContent .s32-workorder-table,#dashboardContent .s32-workorder-table .data-table{
    width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important;box-sizing:border-box!important}
  #dashboardContent .data-table tbody tr{display:block!important;box-sizing:border-box!important;width:auto!important;max-width:100%!important;
    padding:12px 14px!important;margin:0 0 12px!important;border:1px solid #dbe8f3!important;border-left:4px solid #1663C7!important;border-radius:12px!important;background:#ffffff!important}
  #dashboardContent .data-table tbody tr:first-child td:first-child{font-size:15px!important}
  #dashboardContent .data-table td{display:grid!important;grid-template-columns:minmax(0,38%) minmax(0,1fr)!important;
    gap:10px!important;align-items:start!important;padding:7px 0!important;box-sizing:border-box!important;max-width:100%!important}
  #dashboardContent .data-table td::before{white-space:normal!important;line-height:1.35!important;align-self:center!important}
  #dashboardContent .data-table td>*{min-width:0!important;max-width:100%!important}
  #dashboardContent .data-table td,#dashboardContent .data-table td b,#dashboardContent .data-table td span{overflow-wrap:anywhere!important;word-break:break-word!important;white-space:normal!important}
  /* anything wide - buttons, trackers, notes - takes its own full-width line under its label */
  #dashboardContent .data-table td:has(button),#dashboardContent .data-table td:has(a.btn),
  #dashboardContent .data-table td:has(.s32-mini-roadmap),#dashboardContent .data-table td:has(.jkv-roadmap),
  #dashboardContent .data-table td:has(form),#dashboardContent .data-table td:has(.row-actions){grid-template-columns:minmax(0,1fr)!important}
  #dashboardContent .data-table td:has(button)::before,#dashboardContent .data-table td:has(a.btn)::before,
  #dashboardContent .data-table td:has(.row-actions)::before{padding-bottom:4px!important}
  #dashboardContent .data-table td .btn{width:100%!important}
  #dashboardContent .data-table td .row-actions,#dashboardContent .data-table td .table-action{display:grid!important;gap:8px!important;width:100%!important}
  /* the live tracker row is one full-width block, never a grey empty box */
  #dashboardContent .data-table tr.s32-tracker-row{background:#ffffff!important;border-left-color:#1F8A3C!important}
  #dashboardContent .data-table tr.s32-tracker-row td{display:block!important;background:transparent!important;padding:0!important}
  #dashboardContent .data-table tr.s32-tracker-row td::before{display:none!important}
  #dashboardContent .data-table tr.s32-tracker-row .s32-tracker-label{display:flex!important;flex-direction:column!important;gap:2px!important;padding-bottom:8px!important}
  #dashboardContent .data-table td:empty,#dashboardContent .data-table td[data-label=""]:not(:has(*)){display:none!important}
}