/* TBarCode Office in Excel for the product hero (Pages/Shared/Sections/HeroApps/_OfficeWindow.cshtml): Windows
   Excel 2013 with the add-in's ribbon group, the sheet with the inserted barcode and the TBarCode Office task pane,
   laid out like the real add-in. Builds on app-window.css (frame, typing, keyframes); loaded only by the partial.
   No Tailwind, no site tokens. */

.tec-appwin--office {
  --xl-green: #217346;
  --xl-line: #d4d4d4;
  --xl-grid: #e2e2e2;
  --xl-text: #444;
  --xl-blue: #2b7bd1;
  --xl-label: #6f8db3;
  --xl-rh: 30px;                 /* row header width */
  --xl-cw: 58px;                 /* narrow columns */
  --xl-dw: 168px;                /* wide columns (D and F, as in the original sheet) */
  --xl-row: 20px;
  --xl-tall: 84px;               /* row 5, which holds the barcode */

  background: #fff;
  color: var(--xl-text);
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* ---- title bar ---- */
.tec-appwin__xl-title { position: relative; flex: none; height: 28px; display: flex; align-items: center; padding: 0 8px; font-size: 11.5px; color: #555; }
.tec-appwin__xl-qat { display: flex; align-items: center; gap: 9px; }
.tec-appwin__xl-qat svg { width: 15px; height: 15px; }
.tec-appwin__xl-doc { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.tec-appwin__xl-controls { margin-left: auto; display: flex; align-items: center; gap: 16px; color: #666; }
.tec-appwin__xl-controls svg { width: 11px; height: 11px; }

/* ---- ribbon tabs ---- */
.tec-appwin__xl-tabs { flex: none; display: flex; align-items: flex-end; height: 24px; border-bottom: 1px solid var(--xl-line); white-space: nowrap; }
.tec-appwin__xl-tab { position: relative; flex: none; padding: 4px 8px 5px; font-size: 10.5px; color: var(--xl-text); }
.tec-appwin__xl-tab.is-minor { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tec-appwin__xl-tab.is-file { padding-inline: 14px; background: var(--xl-green); color: #fff; }
.tec-appwin__xl-tab.is-active { margin-bottom: -1px; border: 1px solid var(--xl-line); border-bottom-color: #fff; background: #fff; color: var(--xl-green); }
.tec-appwin__xl-tab.is-ctx { margin-left: 14px; }

/* ---- ribbon: the add-in's group ---- */
.tec-appwin__xl-ribbon { flex: none; height: 86px; display: flex; padding: 4px 6px 0; border-bottom: 1px solid var(--xl-line); }
.tec-appwin__xl-group { display: flex; flex-direction: column; padding-right: 12px; border-right: 1px solid var(--xl-grid); }
.tec-appwin__xl-items { flex: 1; display: flex; gap: 6px; }
.tec-appwin__xl-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  padding: 3px 2px;
  border: 1px solid #a9d3b4;
  background: #d3eadb;          /* pressed: the task pane is open */
  font-size: 10.5px;
  line-height: 1.15;
  text-align: center;
}
.tec-appwin__xl-big svg { width: 30px; height: 30px; margin-bottom: 2px; }
.tec-appwin__xl-small li { display: flex; align-items: center; gap: 5px; padding: 2px 3px; font-size: 10.5px; white-space: nowrap; }
.tec-appwin__xl-small svg { width: 12px; height: 12px; flex: none; }
.tec-appwin__xl-group-name { padding: 2px 0 3px; font-size: 10px; text-align: center; color: #666; }

/* ---- formula bar ---- */
.tec-appwin__xl-formula { flex: none; height: 28px; display: flex; align-items: center; gap: 10px; padding: 0 6px; border-bottom: 1px solid var(--xl-line); font-size: 11px; }
.tec-appwin__xl-namebox { position: relative; flex: none; width: 96px; padding: 2px 16px 2px 5px; border: 1px solid #c6c6c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tec-appwin__xl-namebox::after { content: ""; position: absolute; right: 5px; top: 50%; border: 3px solid transparent; border-top: 4px solid #666; transform: translateY(-25%); }
.tec-appwin__xl-fx { flex: none; display: flex; align-items: center; gap: 12px; color: #a0a0a0; }
.tec-appwin__xl-fx svg { width: 11px; height: 11px; }
.tec-appwin__xl-fx i { font: italic 13px Georgia, serif; color: #777; }
.tec-appwin__xl-formula-text { flex: 1; min-width: 0; padding-left: 8px; border-left: 1px solid var(--xl-grid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- body: sheet and task pane ---- */
.tec-appwin__xl-body { flex: 1; min-height: 0; display: flex; }
.tec-appwin__xl-sheet { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.tec-appwin__xl-grid {
  display: grid;
  grid-template-columns: var(--xl-rh) repeat(3, var(--xl-cw)) var(--xl-dw) var(--xl-cw) var(--xl-dw) repeat(2, var(--xl-cw));
  grid-template-rows: 22px repeat(4, var(--xl-row)) var(--xl-tall);
  grid-auto-rows: var(--xl-row);
}
.tec-appwin__xl-hd { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--xl-line); border-bottom: 1px solid var(--xl-line); font-size: 12px; color: #555; }
.tec-appwin__xl-corner { background: linear-gradient(135deg, transparent 55%, #dcdcdc 55%) right 3px bottom 3px / 9px 9px no-repeat; }
.tec-appwin__xl-rowhd { justify-content: flex-start; padding-left: 5px; align-items: flex-end; padding-bottom: 2px; }
.tec-appwin__xl-cell { border-right: 1px solid var(--xl-grid); border-bottom: 1px solid var(--xl-grid); }
/* The barcode sits in cell D5: a box exactly over the cell, the image centered and scaled to fit inside it. */
.tec-appwin__xl-cellbox {
  position: absolute;
  left: calc(var(--xl-rh) + 3 * var(--xl-cw));
  top: calc(22px + 4 * var(--xl-row));
  width: var(--xl-dw);
  height: var(--xl-tall);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.tec-appwin__xl-barcode { display: block; max-width: 100%; max-height: 100%; }

/* Barcode pictures float above the worksheet, as in the current Office add-in (not ActiveX controls). */
[data-excel-window] .tec-appwin__xl-cellbox {
  position: absolute;
  left: 24px;
  top: 28px;
  width: calc(100% - 48px);
  height: calc(100% - 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
[data-excel-window] .tec-appwin__xl-barcode { display: block; width: 100%; height: 100%; object-fit: contain; }

.tec-appwin__xl-pane { flex: none; width: 34%; min-width: 200px; max-width: 262px; padding: 6px 12px; border-left: 1px solid var(--xl-line); font-size: 11px; }
.tec-appwin__xl-pane-title { display: flex; align-items: baseline; margin-bottom: 4px; font-size: 16px; font-weight: 300; color: #4f6c8c; white-space: nowrap; }
.tec-appwin__xl-pane-title span { margin-left: auto; font-size: 10px; color: #777; }
.tec-appwin__xl-label { margin: 6px 0 2px; font-size: 12.5px; font-weight: 300; color: var(--xl-label); }
.tec-appwin__xl-symbology { display: flex; gap: 3px; }
.tec-appwin__xl-select { position: relative; display: block; flex: 1; min-width: 0; padding: 2px 16px 2px 5px; border: 1px solid #ababab; font-size: 12px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tec-appwin__xl-select::after { content: ""; position: absolute; right: 5px; top: 50%; border: 3px solid transparent; border-top: 4px solid #333; transform: translateY(-25%); }
.tec-appwin__xl-select--small { padding-block: 1px; font-size: 10px; }
.tec-appwin__xl-drop { position: relative; flex: none; width: 23px; background: var(--xl-blue); }
.tec-appwin__xl-drop::after { content: ""; position: absolute; left: 50%; top: 45%; width: 6px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: translate(-50%, -50%) rotate(45deg); }
.tec-appwin__xl-data { height: 34px; padding: 3px 5px; border: 1px solid #d6d6d6; font-size: 10.5px; color: #222; white-space: nowrap; overflow: hidden; }
.tec-appwin__xl-link { display: inline-block; margin-top: 4px; font-size: 9.5px; color: var(--xl-blue); }
.tec-appwin__xl-size { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; margin-top: 5px; align-items: center; }
.tec-appwin__xl-size dt { padding-left: 3px; font-size: 10px; color: #333; }
.tec-appwin__xl-size dd { padding: 1px 4px; border-bottom: 1px solid #d0d0d0; font-size: 10px; color: #222; }
.tec-appwin__xl-size dd.is-off { border: 1px solid #dadada; color: #a8a8a8; }
.tec-appwin__xl-size dd.tec-appwin__xl-select { border: 1px solid #ababab; }
.tec-appwin__xl-check { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 9.5px; color: #555; white-space: nowrap; }
.tec-appwin__xl-check i { flex: none; width: 10px; height: 10px; border: 1px solid #a0a0a0; }
.tec-appwin__xl-update { display: block; margin-top: 7px; padding: 5px 0; background: var(--xl-blue); font-size: 13px; text-align: center; color: #fff; }
.tec-appwin__xl-links { margin-top: 10px; }
.tec-appwin__xl-links li { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; color: var(--xl-blue); white-space: nowrap; }
.tec-appwin__xl-links li + li { margin-top: 4px; }

/* ---- medium windows: fewer tabs, narrower columns ----
   (The column sizes are set on the body: a container query cannot style the container, .tec-appwin, itself.) */
@container (max-width: 700px) {
  .tec-appwin__xl-tab:nth-child(4), .tec-appwin__xl-tab:nth-child(5),
  .tec-appwin__xl-tab:nth-child(7), .tec-appwin__xl-tab:nth-child(8) { display: none; }
  .tec-appwin__xl-body { --xl-cw: 42px; --xl-dw: 150px; }
  .tec-appwin__xl-pane { width: 40%; min-width: 190px; }
}

/* ---- phones: ribbon, sheet and barcode; no task pane ---- */
@container (max-width: 520px) {
  .tec-appwin__xl-body { --xl-rh: 24px; --xl-cw: 34px; --xl-dw: 140px; }
  .tec-appwin__xl-doc, .tec-appwin__xl-tab.is-minor, .tec-appwin__xl-pane, .tec-appwin__xl-fx { display: none; }
  .tec-appwin__xl-controls { gap: 12px; }
}

/* ---- animation: type the data in the pane, press Update, the barcode appears in the sheet ---- */
.tec-appwin__xl-update {
  animation: tec-appwin-press .35s ease-out calc(var(--aw-start) + var(--aw-chars) * var(--aw-rate) + .15s) both;
}
.tec-appwin__xl-barcode {
  animation: tec-appwin-draw .7s steps(var(--aw-steps), end) calc(var(--aw-start) + var(--aw-chars) * var(--aw-rate) + .5s) both;
}
@keyframes tec-appwin-press { 40% { background: #1d5ea8; transform: scale(.98); } }