/* Scan-IT Cloud for the product hero (Pages/Shared/Sections/HeroApps/_ScanCloudWindow.cshtml): a scan app of the web
   app in a phone browser, measured from the real screens (new-app scan.css, app.tailwind.css) at about 0.7 scale.
   Builds on app-window.css (keyframes, typing); loaded only by the partial. No Tailwind, no site tokens. The figure is
   a phone, not a window: it drops the shared frame's background, shadow and clipping. */

.tec-appwin--scancloud {
  --sc-brand: #ce191f;
  --sc-brand-subtle: #fff5f5;
  --sc-text: #07101f;
  --sc-muted: #64728a;
  --sc-stroke: #dfe6f1;
  --sc-hover: #f1f4f9;
  --sc-success: #107c10;
  --sc-cam: 214px;               /* camera height: (screen width - 24px) * 3/4 */
  --sc-scan: 1.6s;               /* when the camera reads the label */
  --aw-start: calc(var(--sc-scan) + 1.4s);   /* the check date is typed */
  --aw-rate: 80ms;

  align-items: center;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--sc-text);
}
.tec-appwin--scancloud svg { flex: none; width: 1em; height: 1em; }
.tec-appwin--scancloud i, .tec-appwin--scancloud em, .tec-appwin--scancloud b { font-style: normal; }

/* ---- phone, status and browser bars ---- */
.tec-appwin__sc-phone { width: 330px; height: 600px; padding: 10px; border-radius: 42px; background: #111; box-shadow: 0 0 0 1.5px #3a3a3c, 0 40px 80px -24px rgba(20, 0, 20, .7); }
.tec-appwin__sc-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 33px; background: #fff; }
.tec-appwin__sc-status { flex: none; display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 4px 24px 0; background: #f5f7fb; font-size: 11px; font-weight: 600; }
.tec-appwin__sc-icons { display: flex; gap: 4px; align-items: center; }
.tec-appwin__sc-icons i { width: 12px; height: 8px; background: #222; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.tec-appwin__sc-icons b { width: 16px; height: 8px; border-radius: 2px; background: #222; }
.tec-appwin__sc-url { flex: none; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 12px 4px; padding: 5px 10px; border-radius: 9px; background: #e9edf3; font-size: 10.5px; color: #3c4658; }
.tec-appwin__sc-url svg { font-size: 8px; color: var(--sc-muted); }

/* ---- app title bar and page header ---- */
.tec-appwin__sc-title { flex: none; display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; background: #f5f7fb; }
.tec-appwin__sc-logo { display: grid; place-items: center; width: 22px; height: 22px; margin-right: auto; border-radius: 6px; background: var(--sc-brand); color: #fff; font-size: 12px; }
.tec-appwin__sc-help { font-size: 13px; }
.tec-appwin__sc-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sc-brand-subtle); color: var(--sc-brand); font-size: 10.5px; font-weight: 700; }
.tec-appwin__sc-head { flex: none; display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 12px; border-bottom: 1px solid var(--sc-stroke); }
.tec-appwin__sc-back { margin-right: 4px; font-size: 13px; color: var(--sc-muted); }
.tec-appwin__sc-head strong { flex: 1; min-width: 0; overflow: hidden; color: var(--sc-brand); font-size: 12.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.tec-appwin__sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--sc-stroke); border-radius: 7px; background: #fff; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.tec-appwin__sc-btn svg { font-size: 11px; }

/* ---- screen 1: camera, typed entry, records ---- */
.tec-appwin__sc-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.tec-appwin__sc-scan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 12px; }
.tec-appwin__sc-camera { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 11px; background: #0b1220; box-shadow: 0 6px 16px rgba(7, 16, 31, .1); }
.tec-appwin__sc-camera img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tec-appwin__sc-frame {
  position: absolute; inset: 16% 19%;
  --c: #fff;
  background:
    linear-gradient(var(--c), var(--c)) left top / 18px 2.5px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2.5px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 18px 2.5px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2.5px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 18px 2.5px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2.5px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 18px 2.5px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2.5px 18px no-repeat;
}
.tec-appwin__sc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.tec-appwin__sc-tool { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(11, 18, 32, .62); color: #fff; font-size: 12px; }
.tec-appwin__sc-manual { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.tec-appwin__sc-manual span { padding: 7px 10px; border: 1px solid var(--sc-stroke); border-radius: 7px; color: #8a95a8; font-size: 11px; white-space: nowrap; overflow: hidden; }
.tec-appwin__sc-manual b { display: grid; place-items: center; width: 32px; border: 1px solid var(--sc-stroke); border-radius: 7px; font-size: 12px; }
.tec-appwin__sc-tabs { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.tec-appwin__sc-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--sc-hover); font-size: 11px; }
.tec-appwin__sc-seg b, .tec-appwin__sc-seg span { min-width: 54px; padding: 4px 10px; border-radius: 6px; text-align: center; }
.tec-appwin__sc-seg b { background: #fff; box-shadow: 0 1px 2px rgba(7, 16, 31, .12); font-weight: 600; }
.tec-appwin__sc-seg span { color: var(--sc-muted); }
.tec-appwin__sc-tabs small { color: var(--sc-muted); font-size: 10px; }
.tec-appwin__sc-search { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--sc-stroke); border-radius: 7px; color: #8a95a8; font-size: 11px; }
.tec-appwin__sc-search svg { color: var(--sc-muted); }
.tec-appwin__sc-list { display: grid; gap: 5px; }
.tec-appwin__sc-list li { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--sc-stroke); border-radius: 11px; }
.tec-appwin__sc-list li > svg { color: var(--sc-muted); font-size: 10px; }
.tec-appwin__sc-rowicon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--sc-brand-subtle); color: var(--sc-brand); font-size: 12px; }
.tec-appwin__sc-rowtext { flex: 1; min-width: 0; }
.tec-appwin__sc-rowtext strong, .tec-appwin__sc-rowtext small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tec-appwin__sc-rowtext strong { font-size: 11.5px; }
.tec-appwin__sc-rowtext small { color: var(--sc-muted); font-size: 9.5px; }

/* ---- screen 2: the record form, over the list ---- */
.tec-appwin__sc-form { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 8px 12px; background: #fff; visibility: hidden; }
.tec-appwin__sc-formhead { display: flex; align-items: center; gap: 8px; }
.tec-appwin__sc-formhead > span:nth-child(2) { flex: 1; min-width: 0; }
.tec-appwin__sc-prev, .tec-appwin__sc-trash { font-size: 12px; }
.tec-appwin__sc-formhead em { display: inline-block; padding: 3px 8px; border-radius: 99px; background: #eef1f6; color: var(--sc-muted); font-size: 9px; font-weight: 600; }
.tec-appwin__sc-formhead strong { display: block; margin-top: 2px; font-size: 13px; }
.tec-appwin__sc-field { display: grid; gap: 3px; }
.tec-appwin__sc-label { display: flex; align-items: center; gap: 5px; color: var(--sc-muted); font-size: 10px; font-weight: 600; }
.tec-appwin__sc-label b { color: var(--sc-brand); font-weight: 700; }
.tec-appwin__sc-input { display: flex; align-items: center; justify-content: space-between; min-height: 27px; padding: 0 10px; border: 1px solid var(--sc-stroke); border-radius: 7px; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.tec-appwin__sc-input.is-readonly { background: var(--sc-hover); color: var(--sc-muted); }
.tec-appwin__sc-input.is-placeholder { color: #8a95a8; }
.tec-appwin__sc-locate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.tec-appwin__sc-locate .tec-appwin__sc-btn { min-height: 27px; }
.tec-appwin__sc-date svg { font-size: 11px; }
.tec-appwin__sc-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 6px; margin: 2px -12px 0; padding: 7px 12px 0; border-top: 1px solid var(--sc-stroke); }
.tec-appwin__sc-foot .tec-appwin__sc-btn { min-height: 30px; }
.tec-appwin__sc-save { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; border-radius: 7px; background: #c4282e; color: #fff; font-size: 11px; font-weight: 600; }
/* In the app the toast floats at the bottom of the screen; the hero cuts the phone off, so it floats over the lower
   edge of the camera view instead. */
.tec-appwin__sc-toast { position: absolute; left: 50%; top: calc(12px + var(--sc-cam) - 40px); transform: translateX(-50%); padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--sc-success) 45%, var(--sc-stroke)); border-radius: 99px; background: #fff; box-shadow: 0 8px 20px rgba(7, 16, 31, .14); color: var(--sc-success); font-size: 10.5px; font-weight: 600; white-space: nowrap; }

/* ---- rail at the bottom ---- */
.tec-appwin__sc-rail { flex: none; display: flex; justify-content: space-around; height: 46px; padding: 3px 8px 4px; border-top: 1px solid var(--sc-stroke); background: #fff; }
.tec-appwin__sc-rail li { position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; width: 56px; border-radius: 7px; color: var(--sc-muted); font-size: 9px; }
.tec-appwin__sc-rail svg { width: 18px; height: 18px; }
.tec-appwin__sc-rail .is-active { background: var(--sc-brand-subtle); color: var(--sc-brand); }
.tec-appwin__sc-rail .is-active::before { content: ""; position: absolute; top: -4px; left: 50%; width: 22px; height: 3px; border-radius: 2px; background: var(--sc-brand); transform: translateX(-50%); }

@container (max-width: 520px) {
  .tec-appwin__sc-phone { width: 280px; height: 540px; padding: 8px; border-radius: 36px; }
  .tec-appwin--scancloud { --sc-cam: 180px; }
  .tec-appwin__sc-screen { border-radius: 28px; }
}

/* ---- animation: the camera reads the label, the record opens, the date is typed, Save, back to the list ---- */
.tec-appwin__sc-frame { animation: tec-appwin-scframe .5s ease-out var(--sc-scan) both; }
.tec-appwin__sc-flash { animation: tec-appwin-scflash .4s ease-out calc(var(--sc-scan) + .25s) both; }
.tec-appwin__sc-form { animation: tec-appwin-scform 3.4s ease-out calc(var(--sc-scan) + .6s) both; }
.tec-appwin__sc-save { animation: tec-appwin-scpress .35s ease-in-out calc(var(--sc-scan) + 3.3s) both; }
.tec-appwin__sc-toast { animation: tec-appwin-key 0s calc(var(--sc-scan) + 4s) both, tec-appwin-show .3s ease-out calc(var(--sc-scan) + 4s) both; }
.tec-appwin__sc-list li:first-child { animation: tec-appwin-scrow 1.6s ease-out calc(var(--sc-scan) + 4s) both; }
@keyframes tec-appwin-scframe { 50% { --c: #4ade80; transform: scale(.94); } }
@keyframes tec-appwin-scflash { 0% { opacity: .7; } 100% { opacity: 0; } }
@keyframes tec-appwin-scform { 0% { visibility: visible; opacity: 0; transform: translateX(14px); } 8% { opacity: 1; transform: none; } 94% { opacity: 1; } 100% { visibility: hidden; opacity: 0; } }
@keyframes tec-appwin-scpress { 50% { transform: scale(.96); filter: brightness(.85); } }
@keyframes tec-appwin-scrow { 0%, 60% { background: var(--sc-brand-subtle); border-color: var(--sc-brand); } }