/* ==========================================================================
   Learn TahaAi (js/tour.js): a lesson's dim, ring, finger and bubble, the
   notes a lesson shows instead of leaving the app, the Learn hub, first-time
   tips. Built on the look's tokens, so Navy, Glass and Classic all fit.
   ========================================================================== */
/* ---------- a lesson: four dims around the real control, so only it can be tapped ---------- */
.tour { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.tour[hidden] { display: none; }
.tour--probe, .tour--probe * { pointer-events: none !important; }   /* what's really under a point (js/tour.js topmost) */
.tour__dim { position: absolute; background: rgba(3, 7, 12, .66); pointer-events: auto; touch-action: none; }
.tour__ring { position: absolute; border-radius: 12px; border: 2px solid var(--accent-ui, #4D9BFF); box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 29, 109, 229), .28), 0 0 24px rgba(var(--accent-rgb, 29, 109, 229), .35); pointer-events: none; animation: tour-ring 1.6s ease-in-out infinite; transition: border-color 160ms ease, box-shadow 160ms ease; }
.tour__ring[hidden] { display: none; }
.tour__ring.is-done { border-color: var(--ok-text, #64DBA0); box-shadow: 0 0 0 4px rgba(100, 219, 160, .3); animation: none; }
.tour__ring.is-done::after { content: "✓"; position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-text, #64DBA0); color: #06140C; font: 800 14px/1 var(--font, system-ui); }
@keyframes tour-ring { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 29, 109, 229), .28), 0 0 18px rgba(var(--accent-rgb, 29, 109, 229), .3); } 50% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb, 29, 109, 229), .16), 0 0 30px rgba(var(--accent-rgb, 29, 109, 229), .4); } }
.tour__finger { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .82); border: 3px solid var(--accent-ui, #4D9BFF); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); pointer-events: none; transition: transform 460ms cubic-bezier(.23, 1, .32, 1); z-index: 2; }
.tour__finger[hidden] { display: none; }
.tour__finger.is-press { scale: .78; transition: transform 460ms cubic-bezier(.23, 1, .32, 1), scale 120ms ease; }

/* the bubble: what the control does, what to tap, Back / Skip step / Show me. It never sits on the control (js/tour.js layout) */
.tb { position: absolute; z-index: 1; pointer-events: auto; display: flex; flex-direction: column; background: var(--panel-2, #172838); color: var(--text, #F4F7FB); border: 1px solid var(--line-2, #2A3C4F); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); font-family: var(--font, system-ui); }
.tb[data-mode="card"] { border-color: var(--line-3, #61788F); }
.tb.is-finding { visibility: hidden; animation: tb-finding 0s linear 700ms forwards; }
@keyframes tb-finding { to { visibility: visible; } }
.tb__in { padding: 12px 16px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 0; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; border-radius: inherit; }
.tb__arrow { position: absolute; width: 14px; height: 14px; margin-left: -7px; background: var(--panel-2, #172838); border: 1px solid var(--line-2, #2A3C4F); transform: rotate(45deg); pointer-events: none; }
.tb__arrow[hidden] { display: none; }
.tb__arrow[data-dir="up"] { top: -8px; border-right: 0; border-bottom: 0; }
.tb__arrow[data-dir="down"] { bottom: -8px; border-left: 0; border-top: 0; }
.tb__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px -6px 0 0; }
.tb__crumb { display: flex; font-size: 12.5px; font-weight: 600; color: var(--text-3, #7E93A6); min-width: 0; white-space: nowrap; }
.tb__crumb::before, .tb__crumb-n { flex: none; }
.tb__crumb-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb__exit { flex: none; min-height: 36px; min-width: 44px; padding: 0 8px; border: 0; background: none; color: var(--text-2, #A3B5C6); font: 600 14px var(--font, system-ui); cursor: pointer; border-radius: 10px; }
.tb__exit:active { background: rgba(255, 255, 255, .06); }
.tb__title { margin: 0; font-size: 17px; font-weight: 750; line-height: 1.25; letter-spacing: -.01em; }
.tb__body, .tb__for, .tb__note { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2, #A3B5C6); }
.tb__body b, .tb__for b, .tb__do b, .tb__list b { color: var(--text, #F4F7FB); font-weight: 700; }
.tb__for b:first-child { display: block; font-size: 12.5px; color: var(--text-3, #7E93A6); font-weight: 650; margin-bottom: 2px; }
.tb__do { margin: 2px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(var(--accent-rgb, 29, 109, 229), .14); border-left: 3px solid var(--accent-ui, #4D9BFF); font-size: 15px; font-weight: 600; color: var(--text, #F4F7FB); }
.tb__ex, .tb__miss { margin: 0; font-size: 13.5px; color: var(--text-2, #A3B5C6); }
.tb__ex .linkbtn, .tb__miss .linkbtn { display: inline-block; padding: 6px 2px; font-weight: 600; color: var(--accent-text, #66A9FF); }
.tb__miss { padding: 8px 10px; border-radius: 10px; background: rgba(245, 189, 81, .1); color: var(--warn-text, #F5BD51); }
.tb__h { margin: 4px 0 0; font-size: 12.5px; font-weight: 650; color: var(--text-3, #7E93A6); }
.tb__list { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: 14.5px; line-height: 1.4; color: var(--text-2, #A3B5C6); }
.tb__rel { display: grid; gap: 2px; justify-items: start; }
.tb__rel .linkbtn { padding: 6px 0; color: var(--accent-text, #66A9FF); text-align: left; }
.tb__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
/* a bubble kept short by a tight screen scrolls its words; its buttons stay at the bottom */
.tb__in > .tb__acts:last-child { position: sticky; bottom: -14px; z-index: 1; margin-bottom: -14px; padding: 8px 0 14px; background: var(--panel-2, #172838); }
.tb__wide { flex: 1 1 100%; }
.tb__acts .grow { flex: 1 1 0; min-width: 0; }
.tb__acts .btn { min-height: 44px; padding: 0 14px; font-size: 14.5px; border-radius: 12px; }
.tb[data-mode="watch"] .tb__crumb::before { content: "Watching ·\00a0"; color: var(--accent-text, #66A9FF); }

/* what a lesson shows instead of leaving the app: the message word for word, the customer's page in the page */
.tnote { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .5); pointer-events: auto; }
.tnote[hidden] { display: none; }
.tnote__box { width: min(100%, 440px); grid-template-columns: minmax(0, 1fr); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--panel, #0E1A26); color: var(--text, #F4F7FB); border: 1px solid var(--line-2, #2A3C4F); border-radius: 16px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); font-family: var(--font, system-ui); }
.tnote__box h3 { margin: 0; font-size: 17px; font-weight: 750; }
.tnote__box p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2, #A3B5C6); }
.tnote__box blockquote { margin: 0; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: rgba(var(--accent-rgb, 29, 109, 229), .16); color: var(--text, #F4F7FB); font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.tnote__frame { width: 100%; height: min(60dvh, 560px); border: 1px solid var(--line-2, #2A3C4F); border-radius: 12px; background: #fff; }
body.tour-on .toast { z-index: 80; top: calc(10px + env(safe-area-inset-top)); bottom: auto; transform: translateX(-50%) translateY(-16px); }   /* the app's own messages stay readable over the dim, */
body.tour-on .toast.is-on { transform: translateX(-50%); }   /* at the top, clear of the bottom bars a lesson points at most */

/* ---------- the Learn hub (More → Help & walkthrough, and ?) ---------- */
.learn { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.learn[hidden] { display: none; }
.learn__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.learn__box { position: relative; width: min(100%, 620px); max-height: min(88dvh, 860px); display: flex; flex-direction: column; background: var(--panel, #0E1A26); border: 1px solid var(--line-2, #2A3C4F); border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); overflow: hidden; font-family: var(--font, system-ui); color: var(--text, #F4F7FB); }
.learn__head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "grab grab" "title x" "seg seg"; align-items: center; gap: 4px 8px; padding: 10px 16px 12px; border-bottom: 1px solid var(--line, #203346); }
.learn__grab { grid-area: grab; justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line-2, #2A3C4F); display: none; }
.learn__head h2 { grid-area: title; margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.02em; outline: none; }
.learn__x { grid-area: x; }
.learn__x svg { width: 18px; height: 18px; }
.learn__seg { grid-area: seg; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-top: 6px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line, #203346); }
.learn__seg button { min-height: 40px; border: 0; border-radius: 9px; background: none; color: var(--text-2, #A3B5C6); font: 650 14.5px var(--font, system-ui); cursor: pointer; }
.learn__seg button[aria-selected="true"] { background: var(--panel-2, #172838); color: var(--text, #F4F7FB); box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 2px 8px rgba(0, 0, 0, .3); }
.learn__body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); display: grid; grid-auto-rows: max-content; gap: 12px; align-content: start; }   /* rows keep their height: the list scrolls */
.lnote { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2, #A3B5C6); }
.lnote b { color: var(--text, #F4F7FB); }
.lnote .linkbtn { padding: 4px 0; color: var(--accent-text, #66A9FF); font-weight: 600; }
.lprog { display: grid; gap: 6px; font-size: 14px; color: var(--text-2, #A3B5C6); }
.lprog b { color: var(--text, #F4F7FB); }
.lprog i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ok-text, #64DBA0) var(--p), rgba(255, 255, 255, .08) var(--p)); }
.lcont { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb, 29, 109, 229), .5); background: rgba(var(--accent-rgb, 29, 109, 229), .14); color: var(--text, #F4F7FB); font: inherit; cursor: pointer; }
.lcont small { font-size: 12.5px; font-weight: 650; color: var(--accent-text, #66A9FF); }
.lcont b { font-size: 16.5px; font-weight: 700; }
.lcont span { font-size: 13.5px; color: var(--text-2, #A3B5C6); }
.lcont--quick { border-color: var(--line-2, #2A3C4F); background: var(--card, #111E2A); }
.learn .lgroup { margin: 8px 2px 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--text-3, #7E93A6); } /* only the hub's: a job's Parts and Labor groups are .lgroup too (js/admin.js) */
.lrows, .hqs { display: grid; gap: 0; border: 1px solid var(--line, #203346); border-radius: 14px; background: var(--card, #111E2A); overflow: hidden; }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px 8px 14px; border: 0; border-top: 1px solid var(--line, #203346); background: none; color: var(--text, #F4F7FB); font: inherit; text-align: left; cursor: pointer; }
.lrow:first-child { border-top: 0; }
.lrow:active { background: rgba(255, 255, 255, .04); }
.lrow__t { display: grid; gap: 1px; min-width: 0; }
.lrow__t b { font-size: 15.5px; font-weight: 650; }
.lrow__t small { font-size: 12.5px; color: var(--text-3, #7E93A6); }
.lrow > svg, .hq summary svg { width: 16px; height: 16px; color: var(--text-3, #7E93A6); }
.lpill { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line-2, #2A3C4F); color: var(--text-2, #A3B5C6); }
.lpill--done { color: var(--ok-text, #64DBA0); border-color: rgba(100, 219, 160, .4); background: rgba(100, 219, 160, .1); }
.lpill--started { color: var(--accent-text, #66A9FF); border-color: rgba(var(--accent-rgb, 29, 109, 229), .5); background: rgba(var(--accent-rgb, 29, 109, 229), .12); }
.lpill--updated { color: var(--warn-text, #F5BD51); border-color: rgba(245, 189, 81, .45); background: rgba(245, 189, 81, .1); }
.lpill--skipped { color: var(--text-3, #7E93A6); }
.lback { justify-self: start; padding: 8px 0; color: var(--accent-text, #66A9FF); font-weight: 600; text-decoration: none; }
.ldet { display: grid; gap: 10px; }
.ldet h3 { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.015em; }
.ldet__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-3, #7E93A6); }
.ldet__for { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2, #A3B5C6); padding: 12px 14px; border-radius: 12px; background: var(--card, #111E2A); border: 1px solid var(--line, #203346); }
.ldet__for b:first-child { display: block; font-size: 12.5px; color: var(--text-3, #7E93A6); margin-bottom: 3px; }
.ldet__h { margin: 2px 0 -4px; font-size: 13px; font-weight: 700; color: var(--text-3, #7E93A6); }
.ldet ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; line-height: 1.4; color: var(--text-2, #A3B5C6); }
.ldet__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ldet__acts .btn { min-height: 46px; flex: 1 1 140px; }
.ldet__skip { justify-self: start; padding: 8px 0; color: var(--text-2, #A3B5C6); }
.lfoot { display: grid; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line, #203346); }
.lfoot__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.lfoot__btns .btn { min-height: 44px; flex: 1 1 140px; font-size: 14px; }
.lswitch { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line, #203346); background: rgba(255, 255, 255, .03); cursor: pointer; }
.lswitch > span { display: grid; gap: 2px; }
.lswitch b { font-size: 15px; font-weight: 650; }
.lswitch small { font-size: 13px; line-height: 1.35; color: var(--text-3, #7E93A6); }
.lswitch input { -webkit-appearance: none; appearance: none; position: relative; width: 51px; height: 31px; margin: 0; border-radius: 999px; border: 1px solid var(--line-3, #61788F); background: var(--line-2, #2A3C4F); cursor: pointer; transition: background 180ms ease; }
.lswitch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform 180ms ease; }
.lswitch input:checked { background: var(--accent, #1D6DE5); border-color: var(--accent, #1D6DE5); }
.lswitch input:checked::before { transform: translateX(20px); }
/* Help */
.lfind input { width: 100%; min-height: 46px; font-size: 16px; }
.hq { border-top: 1px solid var(--line, #203346); }
.hq:first-child { border-top: 0; }
.hq summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 14px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.3; }
.hq summary::-webkit-details-marker { display: none; }
.hq[open] summary svg { transform: rotate(90deg); }
.hq summary svg { transition: transform 160ms ease; }
.hq__a { padding: 0 14px 14px; display: grid; gap: 10px; justify-items: start; }
.hq__a p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2, #A3B5C6); }
.hq__a p b { color: var(--text, #F4F7FB); }
.hq__show { min-height: 42px; padding: 0 16px; }
.hq__rel { font-size: 13.5px !important; }
.hq__rel .linkbtn { padding: 4px 0; color: var(--accent-text, #66A9FF); text-align: left; }

/* ---------- a first-time tip: small, above the bottom bar. It never takes a tap (taps reach what's under it), and the first
   touch anywhere, or a new screen, puts it away (js/tour.js) ---------- */
.ttip { position: fixed; left: 12px; right: 12px; z-index: 39; max-width: 460px; margin-inline: auto; padding: 12px 14px 10px; pointer-events: none; border-radius: 14px; background: var(--panel-2, #172838); border: 1px solid var(--line-3, #61788F); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); color: var(--text, #F4F7FB); font-family: var(--font, system-ui); display: grid; gap: 6px; animation: ttip-in 220ms cubic-bezier(.23, 1, .32, 1); }
.ttip[hidden] { display: none; }
.ttip--top { z-index: 41; animation-name: ttip-down; }   /* over a sheet (New work order, a parts invoice): at the top, above its dim */
@keyframes ttip-down { from { opacity: 0; transform: translateY(-8px); } }
.ttip p { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--text-2, #A3B5C6); }
.ttip p b { color: var(--text, #F4F7FB); }
.ttip p > b:first-child { color: var(--accent-text, #66A9FF); margin-right: 4px; }
.ttip p.ttip__how { font-size: 12.5px; color: var(--text-3, #7E93A6); }
@keyframes ttip-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 721px) { .ttip { left: auto; right: 24px; width: 380px; } }

/* the ? button (top bar on a phone, by the bell on a computer) */
.iconbtn[data-help] svg { width: 20px; height: 20px; }
.tourcheck { position: fixed; left: 8px; bottom: 8px; z-index: 90; max-width: calc(100vw - 16px); max-height: 40vh; overflow: auto; margin: 0; padding: 8px; font: 11px/1.35 ui-monospace, monospace; background: rgba(0, 0, 0, .85); color: #CFE; border-radius: 8px; }

/* phone: the hub is a full-height sheet */
@media (max-width: 720px) {
  .learn { padding: 0; place-items: end stretch; }
  .learn__box { width: 100%; max-height: calc(100dvh - 8px - env(safe-area-inset-top)); height: calc(100dvh - 8px - env(safe-area-inset-top)); border-radius: 18px 18px 0 0; border-bottom: 0; }
  .learn__grab { display: block; }
  .learn__head { touch-action: none; padding-top: 6px; }
  .learn__head h2 { font-size: 21px; }
}
@media (max-width: 360px) {   /* a small phone: the bubble a little tighter, its three buttons on one row */
  .tb__in { padding: 10px 12px 12px; gap: 6px; }
  .tb__in > .tb__acts:last-child { bottom: -12px; margin-bottom: -12px; padding-bottom: 12px; }
  .tb__title { font-size: 16px; }
  .tb__body, .tb__for, .tb__do, .tb__list { font-size: 14px; }
  .tb__do { padding: 7px 9px; }
  .tb__acts { gap: 6px; }
  .tb__acts .btn { padding: 0 11px; font-size: 14px; min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour__ring { animation: none; }
  .tour__finger { transition: none; }
  .ttip { animation: none; }
  .hq summary svg { transition: none; }
}