/* Barcode Studio's main window for the product hero (Pages/Shared/Sections/HeroApps/_StudioWindow.cshtml).
   Mac window, laid out like the real app. Builds on app-window.css (frame, typing, keyframes); loaded only by the
   partial. No Tailwind, no site tokens. */

.tec-appwin--studio {
  --aw-accent: #ff5c00;          /* the application's selection orange */
  --aw-action: #e1000f;          /* Export button */
  --aw-ok: #0a8a0a;
  --aw-ink: #1d1d1f;
  --aw-text: #2c2c2e;
  --aw-off: #a9a9ad;
  --aw-frame: #c9c9cc;
  --aw-gutter: #d5d5d8;

  border-radius: 11px 11px 0 0;
  background: #ececec;
  color: var(--aw-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ---- title bar ---- */
.tec-appwin__bar {
  position: relative;
  flex: none;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#f4f4f4, #e6e6e6);
  font-size: 13px;
  font-weight: 600;
  color: #4a4a4c;
}
.tec-appwin__lights { position: absolute; left: 12px; top: 50%; display: flex; gap: 7px; transform: translateY(-50%); }
.tec-appwin__lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .2); }
.tec-appwin__lights i:nth-child(2) { background: #febc2e; }
.tec-appwin__lights i:nth-child(3) { background: #28c840; }

/* ---- main tabs: Codes / Data List / Labels ---- */
.tec-appwin__tabs { flex: none; display: flex; gap: 4px; padding: 0 3px 3px; background: #e6e6e6; }
.tec-appwin__tab {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 7px;
  border: 1px solid var(--aw-frame);
  border-top: 5px solid #d8d8db;
  background: linear-gradient(#f6f6f6, #ebebeb);
  font-size: 17px;
  color: var(--aw-ink);
  white-space: nowrap;
}
.tec-appwin__tab.is-active { border-top-color: var(--aw-accent); }
.tec-appwin__tab svg { width: 20px; height: 20px; flex: none; color: #3a3a3c; }
.tec-appwin__tab-label { display: inline-block; overflow: hidden; text-overflow: ellipsis; }
.tec-appwin__tab-label::first-letter { text-decoration: underline; }   /* the menu mnemonic */

/* ---- body: lists left, preview and properties right ---- */
.tec-appwin__body { flex: 1; min-height: 0; display: flex; gap: 6px; padding: 0 3px; }

.tec-appwin__side { flex: none; width: 26%; min-width: 150px; display: flex; flex-direction: column; gap: 6px; }
.tec-appwin__list {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding-right: 11px;                 /* the scroll bar */
  border: 1px solid var(--aw-frame);
  background: #fafafa;
}
.tec-appwin__list::after {             /* scroll bar: track and thumb */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 11px;
  border-left: 1px solid #e2e2e4;
  background: linear-gradient(#cdcdd0, #cdcdd0) 2px 18px / 6px 46% no-repeat, #f1f1f2;
}
.tec-appwin__list--templates { flex: 0 0 50%; }
.tec-appwin__list--types { flex: 1; }
.tec-appwin__list-title { padding: 5px 9px; border-bottom: 1px solid #dedee0; background: linear-gradient(#fbfbfb, #ededed); font-size: 13.5px; color: var(--aw-ink); }
.tec-appwin__list li { padding: 5px 8px; border-left: 20px solid var(--aw-gutter); border-bottom: 1px solid #e4e4e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tec-appwin__list--templates li { padding-block: 8px; font-size: 13px; color: var(--aw-ink); }
.tec-appwin__list--types li { font-size: 11.5px; }
.tec-appwin__list li.tec-appwin__group { padding-block: 7px; border-left-color: var(--aw-accent); background: #dadadc; font-size: 13px; color: var(--aw-ink); }
.tec-appwin__list li.is-selected { border-left-color: var(--aw-accent); background: linear-gradient(#f0f0f0, #e2e2e4); }

.tec-appwin__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* ---- preview ---- */
.tec-appwin__preview { position: relative; flex: 0 0 56%; border: 1px solid var(--aw-frame); background: #fff; }
.tec-appwin__quality { position: absolute; top: 9px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--aw-ok); }
.tec-appwin__info { position: absolute; left: 12px; top: 24%; font-size: 10.5px; line-height: 1.35; color: var(--aw-text); }
.tec-appwin__info > div + div { margin-top: 5px; }
.tec-appwin__info-title { font-weight: 700; }
.tec-appwin__info--end { left: auto; right: 12px; text-align: right; }   /* same top as the left block */
.tec-appwin__info--end li + li { margin-top: 4px; }
.tec-appwin__link { color: #1a6fd8; }
.tec-appwin__symbol { position: absolute; left: 50%; top: 52%; width: 34%; transform: translate(-50%, -50%); outline: 1px solid #f07a2a; }
.tec-appwin__symbol img { display: block; width: 100%; height: auto; }
.tec-appwin__export {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: stretch;
  border-radius: 2px;
  background: var(--aw-action);
  font-size: 13px;
  color: #fff;
}
.tec-appwin__export { padding: 6px 0 6px 30px; }
.tec-appwin__export i { width: 22px; margin-left: 22px; border-left: 1px solid rgba(255, 255, 255, .35); position: relative; }
.tec-appwin__export i::after { content: ""; position: absolute; left: 7px; top: 50%; border: 4px solid transparent; border-top: 5px solid #fff; transform: translateY(-25%); }

/* ---- property panel ---- */
.tec-appwin__panel { flex: 1; min-height: 0; display: flex; border: 1px solid var(--aw-frame); background: #f7f7f8; }
.tec-appwin__ptabs { flex: none; width: 19%; min-width: 92px; background: #ededee; }
.tec-appwin__ptabs li { padding: 8px 9px; border-bottom: 2px solid #f7f7f8; font-size: 13px; color: var(--aw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tec-appwin__ptabs li.is-active { padding-left: 4px; border-left: 5px solid var(--aw-accent); background: #fff; }
.tec-appwin__ptabs li.is-off { color: var(--aw-off); }

.tec-appwin__fields { flex: 1; min-width: 0; padding: 8px 14px; }
.tec-appwin__section { margin-bottom: 4px; font-size: 15px; color: #a1a1a5; }
.tec-appwin__section--next { margin-top: 16px; }
.tec-appwin__grid { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 210px) auto; gap: 6px 14px; align-items: center; }
.tec-appwin__label { grid-column: 1; font-size: 11.5px; color: #48484a; }
.tec-appwin__input,
.tec-appwin__select,
.tec-appwin__spins,
.tec-appwin__check { grid-column: 2; }
.tec-appwin__input { align-self: start; height: 46px; padding: 4px 6px; border: 1px solid #bdbdc1; background: #fff; font-size: 13px; color: var(--aw-ink); white-space: nowrap; overflow: hidden; }
.tec-appwin__grid > .tec-appwin__label:first-child { align-self: start; padding-top: 3px; }
.tec-appwin__select {
  position: relative;
  padding: 3px 22px 3px 6px;
  border: 1px solid #bdbdc1;
  border-radius: 2px;
  background: linear-gradient(#fff, #f1f1f2);
  font-size: 11.5px;
  color: var(--aw-ink);
  white-space: nowrap;
}
.tec-appwin__select::after { content: ""; position: absolute; right: 8px; top: 50%; border: 4px solid transparent; border-top: 5px solid #48484a; transform: translateY(-25%); }
.tec-appwin__spins { display: flex; gap: 6px; }
.tec-appwin__spin {
  flex: 1;
  min-width: 0;
  padding: 3px 34px 3px 5px;
  border: 1px solid #bdbdc1;
  background: #fff linear-gradient(90deg, #bdbdc1 1px, transparent 1px) calc(100% - 32px) 0 / 100% 100% no-repeat;
  font-size: 11.5px;
  color: var(--aw-ink);
  white-space: nowrap;
  position: relative;
}
.tec-appwin__spin::after { content: "\2212 \007C +"; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #8e8e93; }
.tec-appwin__checks { grid-column: 3; grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
.tec-appwin__checks li + li { margin-top: 10px; }
.tec-appwin__checks li, .tec-appwin__check { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #48484a; white-space: nowrap; }
.tec-appwin__checks i, .tec-appwin__check i { flex: none; width: 13px; height: 13px; border: 1px solid #8e8e93; border-radius: 2px; background: #fff; }

/* ---- medium windows: drop the check boxes column ---- */
@container (max-width: 680px) {
  .tec-appwin__tab { font-size: 15px; }
  .tec-appwin__checks { display: none; }
  .tec-appwin__info { display: none; }
  .tec-appwin__symbol { width: 46%; }
}

/* ---- phones: preview and data only ---- */
@container (max-width: 520px) {
  .tec-appwin__tab { gap: 6px; padding: 5px 7px 6px; font-size: 13px; }
  .tec-appwin__tab svg { width: 15px; height: 15px; }
  .tec-appwin__side, .tec-appwin__ptabs { display: none; }
  .tec-appwin__preview { flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 10px 12px; }
  .tec-appwin__quality, .tec-appwin__symbol, .tec-appwin__export { position: static; transform: none; }
  .tec-appwin__symbol { width: 60%; }
  .tec-appwin__export { align-self: flex-end; }
}

/* ---- animation: type the data, draw the symbol, then show the quality line ---- */
.tec-appwin--studio .tec-appwin__symbol img {
  animation: tec-appwin-draw .7s steps(var(--aw-steps), end) calc(var(--aw-start) + var(--aw-chars) * var(--aw-rate) + .15s) both;
}
.tec-appwin--studio .tec-appwin__quality {
  animation: tec-appwin-show .3s ease-out calc(var(--aw-start) + var(--aw-chars) * var(--aw-rate) + .95s) both;
}