/* TFORMer Workstation's Print Jobs screen for the product hero (Pages/Shared/Sections/HeroApps/_WorkstationWindow):
   the app's light theme, with the job table, the template's data fields, the preview and the print controls, laid out
   like the real application. Builds on app-window.css (frame, typing, keyframes); loaded only by the partial.
   No Tailwind, no site tokens. Colours sampled from the application. */

.tec-appwin--workstation {
  --ws-bg: #fff;                 /* the app's light theme */
  --ws-text: #222;
  --ws-muted: #676767;
  --ws-panel: #fff;
  --ws-input: #f3f4f6;
  --ws-head: #eef1f6;            /* table header */
  --ws-row: #f8f9fa;
  --ws-line: #dce0eb;
  --ws-preview: #e9ecf1;
  --ws-blue: #425894;            /* accent: buttons, back, selection */

  border-radius: 8px 8px 0 0;
  background: var(--ws-bg);
  color: var(--ws-text);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
}
.tec-appwin--workstation i, .tec-appwin--workstation b { font-style: normal; font-weight: inherit; }

/* ---- title bar and header ---- */
.tec-appwin__ws-title { position: relative; flex: none; height: 26px; display: flex; align-items: center; justify-content: center; background: #f3f3f3; font-size: 10.5px; color: #333; }
.tec-appwin__ws-title > svg { position: absolute; left: 9px; width: 13px; height: 13px; }
.tec-appwin__ws-controls { position: absolute; right: 12px; display: flex; gap: 22px; }
.tec-appwin__ws-controls svg { width: 10px; height: 10px; }

.tec-appwin__ws-head { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 12px 8px; }
.tec-appwin__ws-back { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 2px; background: var(--ws-blue); }
.tec-appwin__ws-back svg { width: 15px; height: 15px; stroke: #fff; }
.tec-appwin__ws-h1 { font-size: 20px; }
.tec-appwin__ws-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.tec-appwin__ws-tools svg { width: 20px; height: 20px; }

/* ---- the job table ---- */
.tec-appwin__ws-table { flex: none; margin: 0 8px; border: 1px solid var(--ws-line); overflow: hidden; }
.tec-appwin__ws-row { display: flex; white-space: nowrap; }
.tec-appwin__ws-row > span { flex: none; width: 104px; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
.tec-appwin__ws-row > span:first-child { width: 86px; }
.tec-appwin__ws-row--head { height: 24px; align-items: center; background: var(--ws-head); font-size: 10.5px; font-weight: 700; color: #333; }
.tec-appwin__ws-row--filter { height: 26px; align-items: center; }
.tec-appwin__ws-row--filter > span { padding: 0 3px; }
.tec-appwin__ws-row--filter i { display: block; padding: 3px 6px; border: 1px solid var(--ws-line); background: #fff; font-size: 9.5px; color: #9a9a9a; }
.tec-appwin__ws-row--job { height: 22px; align-items: center; margin-bottom: 14px; background: var(--ws-row); font-size: 10.5px; color: var(--ws-text); }
.tec-appwin__ws-status { color: #1f8a3b; font-weight: 600; }

/* ---- the open job: fields and preview ---- */
.tec-appwin__ws-job { flex: 1; min-height: 0; display: flex; gap: 14px; margin: 6px 8px 0; padding: 12px; border: 1px solid var(--ws-line); background: var(--ws-panel); }
.tec-appwin__ws-form { flex: none; width: 31%; min-width: 0; overflow: hidden; }
.tec-appwin__ws-form-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.tec-appwin__ws-form-title svg { width: 18px; height: 18px; }
.tec-appwin__ws-caption { margin: 8px 0 4px; font-size: 10.5px; color: var(--ws-muted); }
.tec-appwin__ws-input { min-height: 23px; padding: 4px 8px; border-radius: 3px; border-bottom: 1px solid #c3c8d2; background: var(--ws-input); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
/* A field the template's owner locked: shown disabled, operators cannot change it. */
.tec-appwin__ws-input.is-locked { display: flex; align-items: center; justify-content: space-between; gap: 6px; border-bottom-color: transparent; background: #e8eaee; color: #8b919c; }
.tec-appwin__ws-input.is-locked svg { flex: none; width: 10px; height: 10px; }
.tec-appwin__ws-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tec-appwin__ws-preview { position: relative; flex: none; height: 245px;   /* fixed, so the print row stays above the hero's cut */ display: grid; grid-template-rows: minmax(0, 1fr);   /* the row is the box, not the label's own height */ place-items: center; padding: 22px 18px; border: 1px solid var(--ws-line); background: var(--ws-preview); }
.tec-appwin__ws-preview img { display: block; width: auto; height: 100%;   /* the box height is fixed: fit the label into it, whatever its format */ max-width: min(78%, 330px); object-fit: contain; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.tec-appwin__ws-full { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--ws-line); background: #fff; }
.tec-appwin__ws-full svg { width: 13px; height: 13px; }
.tec-appwin__ws-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; align-items: center; font-size: 9.5px; }
.tec-appwin__ws-zoom b { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ws-line); background: #fff; font-size: 12px; color: #444; }
.tec-appwin__ws-zoom i { padding: 3px 8px; border: 1px solid var(--ws-line); background: #fff; font-weight: 700; }
.tec-appwin__ws-print { flex: none; display: flex; align-items: center; gap: 8px; }
.tec-appwin__ws-format { margin-right: auto; font-size: 10px; color: var(--ws-muted); white-space: nowrap; }
.tec-appwin__ws-printer { position: relative; max-width: 42%; padding: 5px 22px 5px 8px; border: 1px solid var(--ws-line); background: #fff; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tec-appwin__ws-printer::after { content: ""; position: absolute; right: 8px; top: 50%; width: 5px; height: 5px; border: solid #555; border-width: 0 1.3px 1.3px 0; transform: translateY(-70%) rotate(45deg); }
.tec-appwin__ws-copies { display: flex; gap: 5px; }
.tec-appwin__ws-copies b, .tec-appwin__ws-copies i { display: grid; place-items: center; min-width: 22px; height: 24px; border: 1px solid var(--ws-line); background: #fff; font-size: 11px; }
.tec-appwin__ws-copies i { min-width: 28px; }
.tec-appwin__ws-printbtn { display: grid; place-items: center; width: 92px; height: 30px; background: var(--ws-blue); }
.tec-appwin__ws-printbtn svg { width: 20px; height: 20px; }

/* ---- medium and narrow windows ---- */
@container (max-width: 640px) {
  .tec-appwin__ws-format { display: none; }
  .tec-appwin__ws-printer { max-width: none; flex: 1; }
}
@container (max-width: 520px) {
  .tec-appwin__ws-form, .tec-appwin__ws-tools svg:nth-child(-n+2), .tec-appwin__ws-printer { display: none; }
  .tec-appwin__ws-print { justify-content: flex-end; }
  .tec-appwin__ws-preview { height: 150px; padding: 12px; }
  .tec-appwin__ws-preview img { width: auto; height: 120px; max-width: 86%; object-fit: contain; }
}

/* ---- animation: type the first field, press Print, the job appears in the table ---- */
.tec-appwin__ws-printbtn {
  animation: tec-appwin-wspress .4s ease-out calc(var(--aw-start) + var(--aw-chars) * var(--aw-rate) + .3s) both;
}
.tec-appwin__ws-row--job {
  animation: tec-appwin-wsjob .4s ease-out calc(var(--aw-start) + var(--aw-chars) * var(--aw-rate) + .75s) both;
}
@keyframes tec-appwin-wspress { 40% { background: #2f4170; transform: scale(.96); } }
@keyframes tec-appwin-wsjob { from { opacity: 0; transform: translateY(-4px); } }