/* ============================================================
   shift_tabs.css — PurpleCare worker shift cockpit
   Author: Elle · 21 May 2026
   Scope: /clinician/shifts/<sid>
   Token: --pc-purple #6B1FA4 (brand primary)
   Mobile-first. All breakpoints up from 360px.
   ============================================================ */

:root{
  --pc-purple:#6B1FA4;
  --pc-purple-700:#581687;
  --pc-purple-50:#F5F0FA;
  --pc-purple-100:#EDE9FE;
  --pc-ink:#111827;
  --pc-ink-soft:#374151;
  --pc-muted:#6B7280;
  --pc-slate:#475569;
  --pc-line:#E5E7EB;
  --pc-line-soft:#F3F4F6;
  --pc-amber:#D97706;
  --pc-red:#DC2626;
  --pc-grey:#6B7280;
  --pc-white:#FFFFFF;
  --pc-radius-sm:4px;
  --pc-radius-md:8px;
  --pc-radius-lg:14px;
  --pc-tap:32px;          /* min tap target (designer floor; WCAG-AA touch = 44 recommended for primary actions) */
  --pc-tap-primary:48px;  /* primary tap target */
  --pc-shadow-modal:0 12px 40px rgba(0,0,0,.22);
  --pc-tab-strip-h:56px;
}

/* ---------------------------------------------------------------
   1.  BOTTOM-FIXED TAB STRIP  (mobile)
       Details / Tasks / eMAR / Mileage / Progress / Events
   --------------------------------------------------------------- */

/* Reserve room at bottom of page so fixed strip never sits on top of content */
body.has-shift-tabs main.main{padding-bottom:calc(var(--pc-tab-strip-h) + env(safe-area-inset-bottom,0px) + 24px)}

.shift-tabs{
  /* mobile default = bottom-fixed strip */
  position:fixed;
  left:0;right:0;bottom:0;
  display:flex;
  gap:0;
  background:var(--pc-white);
  border-top:1px solid var(--pc-line);
  box-shadow:0 -2px 8px rgba(15,10,31,.06);
  z-index:50;
  padding:0 4px env(safe-area-inset-bottom,0px);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0;             /* override the inline mb:14px */
  border-bottom:0;
}
.shift-tabs::-webkit-scrollbar{display:none}

.st-tab{
  position:relative;
  flex:1 1 auto;
  min-width:64px;
  min-height:var(--pc-tap-primary);
  padding:8px 10px 10px;
  background:none;
  border:none;
  font:600 12px/1.15 'Inter',-apple-system,system-ui,sans-serif;
  color:var(--pc-muted);
  text-transform:none;
  letter-spacing:.01em;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  white-space:nowrap;
  border-bottom:0;            /* kill any old underline placement */
}
.st-tab:focus-visible{outline:2px solid var(--pc-purple);outline-offset:-2px;border-radius:6px}
.st-tab:hover{color:var(--pc-purple)}

/* Active = bold purple text + 3px purple underline pinned to top edge (mobile bottom-strip) */
.st-tab.st-active{
  color:var(--pc-purple);
  font-weight:700;
}
.st-tab.st-active::before{
  content:"";
  position:absolute;
  top:0;left:12%;right:12%;
  height:3px;
  background:var(--pc-purple);
  border-radius:0 0 3px 3px;
}

/* Count pill: n/m purple bg, white text */
.st-tab .st-count,
.st-tab #st-counter,
.st-tab #emar-counter,
.st-tab #mileage-counter,
.st-tab #progress-counter,
.st-tab #events-counter{
  display:inline-block;
  background:var(--pc-purple);
  color:var(--pc-white);
  font-size:10px;
  font-weight:700;
  line-height:1;
  padding:3px 6px;
  border-radius:999px;
  letter-spacing:.02em;
  min-width:18px;
  text-align:center;
}
.st-tab .st-count.empty{background:var(--pc-line);color:var(--pc-muted)}

/* Tab label wrapper so icon + text + pill stack cleanly */
.st-tab .st-label{display:block;font-size:11px}

/* Desktop / tablet: revert to in-page top strip */
@media (min-width:820px){
  body.has-shift-tabs main.main{padding-bottom:32px}
  .shift-tabs{
    position:static;
    border-top:0;
    border-bottom:2px solid var(--pc-purple-100);
    box-shadow:none;
    padding:0;
    margin:8px 0 18px;
    flex-wrap:wrap;
    gap:4px;
  }
  .st-tab{
    flex:0 0 auto;
    min-height:44px;
    padding:10px 16px;
    flex-direction:row;
    font-size:14px;
  }
  .st-tab.st-active::before{display:none}
  .st-tab.st-active{border-bottom:3px solid var(--pc-purple);margin-bottom:-2px}
}

/* ---------------------------------------------------------------
   2.  STATUS PILLS  (eMAR + general)
   --------------------------------------------------------------- */
.pill{
  display:inline-block;
  padding:3px 8px;
  border-radius:var(--pc-radius-sm);
  font:600 12px/1.3 'Inter',sans-serif;
  color:var(--pc-white);
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.pill-pending{background:#6B7280}
.pill-given  {background:#6B1FA4}
.pill-refused{background:#D97706}
.pill-missed {background:#DC2626}
.pill-na     {background:#475569}

/* Legacy .emar-pill classes -- repaint to match brief */
.emar-pill{
  display:inline-block;
  padding:3px 8px;
  border-radius:var(--pc-radius-sm);
  font:600 12px/1.3 'Inter',sans-serif;
  color:var(--pc-white);
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  background:var(--pc-grey);
}
.emar-pill.pending{background:#6B7280;color:#fff}
.emar-pill.given  {background:#6B1FA4;color:#fff}
.emar-pill.refused{background:#D97706;color:#fff}
.emar-pill.missed {background:#DC2626;color:#fff}
.emar-pill.na     {background:#475569;color:#fff}

/* ---------------------------------------------------------------
   3.  eMAR MODAL  -- stacked, full-width fields
   --------------------------------------------------------------- */
.emar-modal-back{
  position:fixed;inset:0;
  background:rgba(15,10,31,.55);
  display:none;
  align-items:flex-start;
  justify-content:center;
  z-index:90;
  overflow-y:auto;
  padding:24px 0;
}
.emar-modal-back.open{display:flex}

.emar-modal{
  background:var(--pc-white);
  border-radius:var(--pc-radius-lg);
  padding:20px 18px 18px;
  width:94%;
  max-width:560px;
  box-shadow:var(--pc-shadow-modal);
  display:flex;
  flex-direction:column;
  gap:0;
}
.emar-modal h2{font-size:17px;font-weight:700;color:#2D1B69;margin:0 0 4px}
.emar-modal .emar-sub{margin:0;color:var(--pc-muted);font-size:13px}

.emar-modal label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--pc-ink-soft);
  margin:14px 0 6px;
}

/* Fields stack full-width on every screen */
.emar-modal select,
.emar-modal textarea,
.emar-modal input[type=text],
.emar-modal input[type=number]{
  display:block;
  width:100%;
  padding:11px 12px;
  border:1px solid #D1D5DB;
  border-radius:var(--pc-radius-md);
  font:14px/1.4 'Inter',sans-serif;
  background:var(--pc-white);
  color:var(--pc-ink);
  outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.emar-modal select:focus,
.emar-modal textarea:focus,
.emar-modal input:focus{
  border-color:var(--pc-purple);
  box-shadow:0 0 0 3px rgba(107,31,164,.18);
}
.emar-modal textarea{min-height:60px;resize:vertical;line-height:1.5}

/* Conditional refusal textarea slot -- show/hide handled inline by JS; we only style it */
#emar-refusal-wrap textarea{border-color:var(--pc-amber)}
#emar-refusal-wrap textarea:focus{box-shadow:0 0 0 3px rgba(217,119,6,.18)}

/* Notes block with AI Summary above-right */
.emar-notes-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:14px 0 6px;
  gap:8px;
}
.emar-notes-head label{margin:0}
.emar-notes-head .emar-ai-btn,
#emar-ai-summary{
  font:600 12px/1 'Inter',sans-serif;
  padding:6px 10px;
  border-radius:6px;
  border:1px solid var(--pc-purple);
  background:var(--pc-white);
  color:var(--pc-purple);
  cursor:pointer;
}
#emar-ai-summary:hover{background:var(--pc-purple-50)}
#emar-ai-summary[disabled]{opacity:.6;cursor:not-allowed}

/* Signature pad -- 100% wide, 200px tall, #E5E7EB border, 8px radius, Clear bottom-right */
.emar-sigwrap{
  position:relative;
  width:100%;
  border:1px solid var(--pc-line);
  border-radius:var(--pc-radius-md);
  background:var(--pc-white);
  padding:0;
  margin-top:6px;
  overflow:hidden;
}
#emar-sig-canvas{
  display:block;
  width:100%;
  height:200px;
  background:var(--pc-white);
  border-radius:var(--pc-radius-md);
  touch-action:none;
  cursor:crosshair;
}
.emar-sig-hint{
  position:absolute;
  top:8px;left:10px;
  font-size:11px;
  color:#9CA3AF;
  pointer-events:none;
}
#emar-sig-clear{
  position:absolute;
  bottom:8px;right:8px;
  font:600 12px/1 'Inter',sans-serif;
  padding:6px 10px;
  border-radius:6px;
  border:1px solid var(--pc-line);
  background:var(--pc-white);
  color:var(--pc-ink-soft);
  cursor:pointer;
}
#emar-sig-clear:hover{background:#F9FAFB;color:var(--pc-purple)}

.emar-modal-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:18px;
  border-top:1px solid var(--pc-line);
  padding-top:14px;
}
.emar-modal-actions .btn-primary{background:var(--pc-purple)}
.emar-modal-actions .btn-primary:hover{background:var(--pc-purple-700)}

/* ---------------------------------------------------------------
   4.  TASKS ROWS  -- 48px min, checkbox · title · status
   --------------------------------------------------------------- */
.task-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:8px 12px;
  background:var(--pc-white);
  border:1px solid var(--pc-line);
  border-radius:var(--pc-radius-md);
  margin-bottom:6px;
}
.task-row input[type=checkbox]{
  flex:0 0 auto;
  width:22px;height:22px;
  accent-color:var(--pc-purple);
  cursor:pointer;
}
.task-row .task-title{
  flex:1 1 auto;
  font:500 15px/1.35 'Inter',sans-serif;
  color:var(--pc-ink);
  min-width:0;
  word-break:break-word;
}
.task-row .task-status{
  flex:0 0 auto;
  font:600 12px/1 'Inter',sans-serif;
}
.task-row.done{background:var(--pc-purple-50);border-color:#E9D8FD}
.task-row.done .task-title{
  text-decoration:line-through;
  color:var(--pc-muted);
}
.task-row.done .task-status{color:var(--pc-purple)}

/* ---------------------------------------------------------------
   5.  MILEAGE FORM
       Carer block = white bg
       Client block = #F5F0FA bg
       Travel + Transport side-by-side
       Odometer thumb 80x80
   --------------------------------------------------------------- */
.mileage-form{display:flex;flex-direction:column;gap:14px}

.mileage-block{
  border:1px solid var(--pc-line);
  border-radius:var(--pc-radius-lg);
  padding:16px 14px;
}
.mileage-block h3{
  font:700 14px/1.2 'Inter',sans-serif;
  color:var(--pc-ink);
  margin:0 0 10px;
  letter-spacing:.01em;
}
.mileage-carer{background:var(--pc-white)}
.mileage-client{background:var(--pc-purple-50);border-color:#E9D8FD}

/* Travel + Transport side-by-side; stacks below 480 */
.mileage-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:480px){
  .mileage-row{grid-template-columns:1fr}
}
.mileage-row label{
  display:block;
  font:600 12px/1.2 'Inter',sans-serif;
  color:var(--pc-ink-soft);
  margin-bottom:4px;
}
.mileage-row input,
.mileage-row select{
  width:100%;
  padding:10px 12px;
  border:1px solid #D1D5DB;
  border-radius:var(--pc-radius-md);
  font:14px/1.3 'Inter',sans-serif;
  background:var(--pc-white);
  color:var(--pc-ink);
}
.mileage-row input:focus,
.mileage-row select:focus{
  border-color:var(--pc-purple);
  outline:none;
  box-shadow:0 0 0 3px rgba(107,31,164,.18);
}

/* Travel Time -- minutes input with suffix */
.mileage-travel-time{
  position:relative;
}
.mileage-travel-time input{padding-right:54px}
.mileage-travel-time::after{
  content:"min";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font:600 12px/1 'Inter',sans-serif;
  color:var(--pc-muted);
  pointer-events:none;
}
/* When this wrapper contains a label too, anchor suffix to the input not the wrapper */
.mileage-travel-time.has-label::after{top:auto;bottom:14px;transform:none}

/* Odometer photo thumb */
.odo-thumb{
  display:block;
  width:80px;height:80px;
  border-radius:var(--pc-radius-md);
  border:1px solid var(--pc-line);
  background:#F9FAFB center/cover no-repeat;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.odo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.odo-thumb.empty::after{
  content:"📷";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  color:var(--pc-muted);
}
.odo-thumb input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

.odo-group{display:flex;align-items:center;gap:12px}
.odo-group .odo-fields{flex:1;min-width:0}

/* ---------------------------------------------------------------
   6.  AI SUMMARY LOADING SHIMMER
   --------------------------------------------------------------- */
.ai-summary{
  margin-top:8px;
  padding:10px 12px;
  background:var(--pc-purple-50);
  border-left:3px solid var(--pc-purple);
  border-radius:6px;
  font:13px/1.5 'Inter',sans-serif;
  color:#4B2670;
  white-space:pre-wrap;
  min-height:20px;
}
.ai-summary:empty{display:none}

.ai-summary.is-loading{
  position:relative;
  overflow:hidden;
  color:transparent;
  background:linear-gradient(
    90deg,
    var(--pc-purple-50) 0%,
    #E9D8FD 50%,
    var(--pc-purple-50) 100%
  );
  background-size:200% 100%;
  animation:pc-shimmer 1.2s linear infinite;
}
.ai-summary.is-loading::before{
  content:"";
  display:block;
  height:10px;
  border-radius:5px;
  background:rgba(255,255,255,.55);
  width:80%;
  margin:4px 0;
}
.ai-summary.is-loading::after{
  content:"";
  display:block;
  height:10px;
  border-radius:5px;
  background:rgba(255,255,255,.45);
  width:55%;
}
@keyframes pc-shimmer{
  0%  {background-position:200% 0}
  100%{background-position:-200% 0}
}

/* Button-level shimmer when AI Summary button is fetching */
#emar-ai-summary.is-loading{
  position:relative;
  color:transparent;
  pointer-events:none;
}
#emar-ai-summary.is-loading::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(107,31,164,.0) 0%,
    rgba(107,31,164,.18) 50%,
    rgba(107,31,164,.0) 100%);
  background-size:200% 100%;
  animation:pc-shimmer 1s linear infinite;
  border-radius:6px;
}

/* ---------------------------------------------------------------
   7.  INCOMPLETE-AT-CLOCKOUT MODAL
       Full-screen on mobile · per-row resolve · sticky footer
       Clock-out disabled (grey) until every row resolved → purple
       NO "continue anyway"
   --------------------------------------------------------------- */
#st-clockout-modal,
#emar-co-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,10,31,.55);
  align-items:flex-start;
  justify-content:center;
  z-index:80;
  overflow-y:auto;
  padding:40px 0;
}
#st-clockout-modal.open,
#emar-co-modal.open{display:flex}

#st-clockout-modal > .modal,
#emar-co-modal > .emar-modal{
  background:var(--pc-white);
  border-radius:var(--pc-radius-lg);
  width:94%;
  max-width:640px;
  padding:20px 18px 0;
  box-shadow:var(--pc-shadow-modal);
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 24px);
}

/* Full-screen on mobile */
@media (max-width:639px){
  #st-clockout-modal,
  #emar-co-modal{
    padding:0;
    align-items:stretch;
    justify-content:stretch;
  }
  #st-clockout-modal > .modal,
  #emar-co-modal > .emar-modal{
    width:100%;
    max-width:100%;
    max-height:100vh;
    height:100vh;
    border-radius:0;
    padding:18px 16px 0;
  }
}

#st-clockout-modal h2,
#emar-co-modal h2{
  font:700 17px/1.25 'Inter',sans-serif;
  color:#B45309;
  margin:0 0 6px;
  flex-shrink:0;
}
#st-clockout-modal p,
#emar-co-modal p{
  font:14px/1.45 'Inter',sans-serif;
  color:#4B5563;
  margin:0 0 12px;
  flex-shrink:0;
}

#st-co-rows,
#emar-co-rows{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  padding:4px 4px 14px 0;
  min-height:0;
}

/* Per-row resolve card */
.st-co-row,
.emar-co-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid var(--pc-line);
  border-radius:var(--pc-radius-md);
  background:var(--pc-white);
  transition:background .15s, border-color .15s;
}
.st-co-row[data-resolved="1"],
.emar-co-row[data-resolved="1"]{
  background:#ECFDF5;
  border-color:#10B981;
}
.st-co-row .st-co-title,
.emar-co-row .emar-co-title{
  font:600 15px/1.3 'Inter',sans-serif;
  color:var(--pc-ink);
}
.st-co-row .st-co-meta,
.emar-co-row .emar-co-meta{
  font:12px/1.3 'Inter',sans-serif;
  color:var(--pc-muted);
}
.st-co-row .st-co-actions,
.emar-co-row .emar-co-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.st-co-row .st-co-actions .btn,
.emar-co-row .emar-co-actions .btn{
  min-height:40px;
  font-size:13px;
  padding:8px 12px;
}
.st-co-row .st-co-status,
.emar-co-row .emar-co-status{
  font:600 13px/1.2 'Inter',sans-serif;
  color:var(--pc-muted);
}

/* Sticky footer */
.st-co-footer,
#st-clockout-modal .emar-modal-actions,
#emar-co-modal  .emar-modal-actions{
  position:sticky;
  bottom:0;
  left:0;right:0;
  background:var(--pc-white);
  border-top:1px solid var(--pc-line);
  padding:14px 0;
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  flex-wrap:wrap;
}
#st-co-counter,
#emar-co-counter{
  font:13px/1.2 'Inter',sans-serif;
  color:var(--pc-muted);
  margin-right:auto;
}

/* Clock-out button: disabled = grey · enabled = purple. Never "continue anyway". */
#st-co-clockout,
#emar-co-clockout{
  min-height:var(--pc-tap-primary);
  padding:12px 22px;
  font:700 14px/1 'Inter',sans-serif;
  border:none;
  border-radius:10px;
  background:#9CA3AF;          /* disabled grey */
  color:var(--pc-white);
  opacity:1;
  cursor:not-allowed;
  transition:background .15s;
}
#st-co-clockout:not([disabled]),
#emar-co-clockout:not([disabled]){
  background:var(--pc-purple);
  cursor:pointer;
}
#st-co-clockout:not([disabled]):hover,
#emar-co-clockout:not([disabled]):hover{
  background:var(--pc-purple-700);
}
/* Hard no on any "continue anyway" / "skip" escape hatch */
#st-clockout-modal [data-continue-anyway],
#emar-co-modal   [data-continue-anyway],
#st-clockout-modal .continue-anyway,
#emar-co-modal   .continue-anyway{display:none !important}

/* ---------------------------------------------------------------
   Hit-area safety net: anything inside the tab strip must be tappable
   --------------------------------------------------------------- */
.shift-tabs button,
.shift-tabs a{min-height:var(--pc-tap-primary)}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .ai-summary.is-loading,
  #emar-ai-summary.is-loading::after{animation:none}
}