/* Glass workspace components: one geometry and material in both color themes.
   Loaded after legacy task layouts and workspace-ux.css. */

/* Local request filters keep working-folder settings and other roles untouched. */
body.anteks-app .overview-table th:nth-child(1) { width: 26%; }
body.anteks-app .overview-table th:nth-child(2) { width: 17%; }
body.anteks-app .overview-table th:nth-child(3) { width: 17%; }
body.anteks-app .overview-table th:nth-child(4) { width: 15%; }
body.anteks-app .overview-table th:nth-child(5) { width: 12%; }
body.anteks-app .overview-table th:nth-child(6) { width: 13%; }
body.anteks-app .overview-manager-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  body.anteks-app .overview-table th:nth-child(n) { width: auto; }
  body.anteks-app .overview-table td:nth-child(2)::before { content: "Менеджер"; }
  body.anteks-app .overview-table td:nth-child(2) { padding-inline-end: 8px; }
  body.anteks-app .overview-table td:nth-child(3)::before { content: "Технолог"; }
  body.anteks-app .overview-table td:nth-child(4)::before { content: "Статус"; }
  body.anteks-app .overview-table td:nth-child(5)::before { content: "Срок"; }
  body.anteks-app .overview-table td:nth-child(6)::before { content: "Прогресс"; }
}
body.anteks-app .overview-table-card > header { flex-wrap: wrap; gap: 16px; }
body.anteks-app .overview-table-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; max-width: 100%; }
body.anteks-app .overview-search-field { position: relative; display: flex; align-items: center; width: 300px; max-width: 100%; min-width: 0; }
body.anteks-app .overview-search-field > .ui-icon { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--ux-muted, var(--muted)); pointer-events: none; }
body.anteks-app .overview-search-field > input { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 32px 10px 38px; border: 1px solid var(--ux-field-border, var(--border)); border-radius: 10px; color: var(--ux-text, var(--text)); background: var(--ux-field-bg, var(--panel)); font-size: 14px; }
body.anteks-app .task-year-filter { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; color: var(--ux-muted, var(--muted)); }
body.anteks-app .task-year-filter > select { width: auto; min-width: 92px; min-height: 44px; margin: 0; padding: 10px 28px 10px 12px; border: 1px solid var(--ux-field-border, var(--border)); border-radius: 10px; color: var(--ux-text, var(--text)); background-color: var(--ux-field-bg, var(--panel)); font-size: 14px; font-weight: 650; }
body.anteks-app :is(.overview-search-field > input, .task-year-filter > select):focus-visible { outline: 2px solid var(--ux-accent, var(--brand-blue)); outline-offset: 2px; }
@media (max-width: 700px) {
  body.anteks-app .overview-table-tools { width: 100%; justify-content: flex-start; gap: 10px; }
  body.anteks-app .overview-search-field { order: -1; width: 100%; }
  body.anteks-app .overview-table-tools .overview-table-count { margin-left: auto; }
}

body.anteks-app :is(.modal-panel, .attachment-preview-panel) {
  border: 1px solid var(--ux-glass-border, var(--ux-border, var(--border)));
  border-radius: var(--ux-radius, 16px);
  color: var(--ux-text, var(--text));
  background: var(--ux-surface, var(--panel));
  box-shadow: var(--ux-glass-shadow, var(--ux-shadow, 0 4px 12px rgb(0 0 0 / 8%)));
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

body.anteks-app :is(.modal-header, .attachment-preview-header, .task-status-editor-head) {
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.anteks-app .modal-heading {
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  gap: 8px;
}

body.anteks-app :is(.modal-heading, .attachment-preview-header) h2 {
  margin: 0;
  min-width: 0;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

body.anteks-app :is(.modal-close, .role-task-add, .role-task-step-remove,
  .quantity-remove-button, .quantity-image-remove, .role-task-step-image-remove,
  .role-task-step-image-download) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: var(--ux-radius-sm, 10px);
  color: var(--ux-muted, var(--muted));
  background: var(--ux-subtle, var(--panel-soft));
  box-shadow: none;
  line-height: 1;
  text-decoration: none;
  transform: none;
}

body.anteks-app :is(.modal-close, .role-task-add, .role-task-step-remove,
  .quantity-remove-button, .quantity-image-remove, .role-task-step-image-remove,
  .role-task-step-image-download) > .ui-icon {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}

body.anteks-app :is(.modal-close, .role-task-add, .role-task-step-image-download):hover:not(:disabled) {
  color: var(--ux-accent, var(--brand-blue));
  background: var(--ux-accent-soft, var(--panel-soft));
  border-color: var(--ux-field-border, var(--border));
  box-shadow: none;
  transform: none;
}

body.anteks-app :is(.role-task-step-remove, .quantity-remove-button,
  .quantity-image-remove, .role-task-step-image-remove):hover:not(:disabled) {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, var(--ux-surface, var(--panel)));
  border-color: color-mix(in srgb, var(--red) 45%, var(--ux-border, var(--border)));
  transform: none;
}

/* Refresh and close share a header cell; they never float into task content. */
body.anteks-app #taskModal .modal-panel {
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 22px;
  gap: 18px;
  border-color: var(--ux-glass-border, var(--ux-border, var(--border)));
  background: var(--ux-surface, var(--panel));
}

/* Rounded reveal/collapse uses the clicked Overview link, without scaling text. */
body.anteks-app #taskModal.is-overview-opening .modal-panel,
body.anteks-app #taskModal.is-overview-closing .modal-panel {
  will-change: clip-path;
  animation: none !important;
}

body.anteks-app #taskModal .modal-header,
body.anteks-app #taskModal.is-docked .modal-header {
  position: relative;
  display: grid;
  grid-template-areas: "heading controls" "toolbar toolbar";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(44px, auto) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 14px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--ux-border, var(--border));
  border-radius: 0;
  background: transparent;
}

body.anteks-app #taskModal .modal-heading {
  grid-area: heading;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

body.anteks-app #taskModal .task-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.anteks-app #taskModal .task-title-line h2 {
  max-width: 100%;
}

body.anteks-app #taskModal .task-title-save-state {
  grid-column: 1 / -1;
}

body.anteks-app #taskModal #modalCopyPathButton {
  align-self: start;
}

body.anteks-app #taskModal .task-title-file-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-self: start;
  gap: 8px;
  min-width: 0;
}

body.anteks-app #taskModal .task-title-file-actions > button {
  flex: 0 0 auto;
  margin: 0;
}

/* Keep the manager's Word slot when switching tabs, without exposing the action.
   Accounts without the manager tab still use the original, absent button. */
body.anteks-app #taskModal:has(#managerTaskTab:not(.is-hidden)) #managerWordExportButton.is-hidden {
  display: inline-flex !important;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 641px) {
  body.anteks-app #taskModal:not(.is-docked) .task-title-file-actions > button,
  body.anteks-app #taskModal:not(.is-docked) .task-header-controls > .task-title-refresh {
    width: auto;
    min-width: 44px;
    padding: 10px 12px;
  }
}

/* Keep section selection first; reclaim desktop header space for taller tasks. */
@media (min-width: 1181px) {
  body.anteks-app #taskModal:not(.is-docked) .technologist-left-column {
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.anteks-app #taskModal:not(.is-docked) #technologistTaskPanel.is-supply-assignment-mode .technologist-left-column {
    grid-template-rows: minmax(0, 1fr);
  }

  body.anteks-app #taskModal:not(.is-docked) .modal-panel {
    padding-block: 16px;
    gap: 12px;
  }

  /* Every tab uses the technologist's desktop action order. */
  body.anteks-app #taskModal:not(.is-docked) .modal-header {
    grid-template-areas: "heading toolbar controls";
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    padding-bottom: 12px;
  }

  /* The save/date line can make the heading taller than its action buttons. */
  body.anteks-app #taskModal:not(.is-docked) .task-header-toolbar {
    align-self: start;
  }
}

body.anteks-app #taskModal .task-header-controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  align-self: start;
  justify-self: end;
  gap: 8px;
  min-width: 0;
}

body.anteks-app #taskModal .task-header-controls > button {
  flex-shrink: 0;
  margin: 0;
  height: 44px;
}

body.anteks-app #taskModal #modalCloseButton {
  position: static;
  inset: auto;
  align-self: start;
  justify-self: end;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  transform: none;
}

body.anteks-app #taskModal .task-header-toolbar {
  grid-area: toolbar;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding: 0;
}

body.anteks-app #taskModal :is(.task-title-action, .manager-word-export-button,
  .task-ready-button, .task-complete-button, .task-status-summary, .quantity-add-button, .quantity-fullscreen-button,
  .warehouse-transfer-button, .warehouse-approve-all-button) {
  min-height: 44px;
  border-radius: var(--ux-radius-sm, 10px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: none;
}

body.anteks-app #taskModal .task-status-summary {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  margin: 0 0 0 auto;
  padding: 10px 12px;
}

body.anteks-app #taskModal .task-complete-button {
  flex: 0 0 auto;
  padding: 10px 12px;
  white-space: nowrap;
}

body.anteks-app #taskModal :is(.task-status-summary-label, .task-status-summary-stage) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.anteks-app #taskModal .task-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: 12px;
  background: var(--ux-subtle, var(--panel-soft));
  box-shadow: none;
}

body.anteks-app #taskModal .task-tab-button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ux-muted, var(--muted));
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

body.anteks-app #taskModal .task-tab-button.is-active {
  border-color: var(--ux-border, var(--border));
  color: var(--ux-accent, var(--brand-blue));
  background: var(--ux-surface, var(--panel));
  box-shadow: var(--ux-shadow, 0 2px 6px rgb(0 0 0 / 5%));
}

body.anteks-app #taskModal :is(.manager-top-dates, .quantity-field, .importance-field,
  .manager-comment-field, .assignment-field, .technologist-comment-field, .progress-field,
  .manager-images-field, .role-tasks-field, .task-month-field, .tz-file-field) {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: 12px;
  background: var(--ux-surface, var(--panel));
  box-shadow: none;
}

body.anteks-app #taskModal :is(.quantity-row, .role-task-item, .production-role-column) {
  min-width: 0;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: 12px;
  background: var(--ux-subtle, var(--panel-soft));
  box-shadow: none;
}

/* Only these two summary cards: progress must never consume a stretch row. */
body.anteks-app #taskModal :is(#managerTaskPanel, #technologistTaskPanel) .progress-field {
  display: grid;
  align-self: start;
  height: auto;
  min-height: 0;
  padding: 12px;
  gap: 8px;
}

body.anteks-app #taskModal :is(#managerTaskPanel, #technologistTaskPanel) .modal-progress-panel {
  margin-top: 0;
}

body.anteks-app #taskModal #managerTaskPanel .manager-comment-field {
  grid-template-rows: auto 120px auto;
  height: auto;
  align-self: start;
}

body.anteks-app #taskModal #managerTaskPanel .manager-comment-field textarea {
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  resize: none;
  overflow: auto;
}

body.anteks-app #managerCommentModal .manager-comment-panel {
  width: min(760px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(88vh, calc(100dvh - 24px));
  grid-template-rows: auto minmax(0, auto);
  overflow: auto;
}

body.anteks-app #managerCommentEditorSlot {
  min-height: 0;
}

body.anteks-app #managerCommentModal textarea {
  width: 100%;
  height: min(480px, 55vh);
  min-height: 0;
  max-height: 55dvh;
  overflow: auto;
  resize: none;
}

@media (min-width: 1181px) {
  body.anteks-app #taskModal:not(.is-docked) .technologist-right-column {
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  body.anteks-app #taskModal:not(.is-docked) .manager-right-column {
    grid-template-rows: auto minmax(150px, auto) auto;
    height: auto;
    align-self: start;
    overflow: visible;
  }
}

body.anteks-app #taskModal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea),
body.anteks-app #managerCommentModal textarea {
  min-height: 44px;
  border: 1px solid var(--ux-field-border, var(--border));
  border-radius: var(--ux-radius-sm, 10px);
  color: var(--ux-text, var(--text));
  background: var(--ux-field-bg, var(--ux-surface, var(--panel)));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 3%);
}

/* Role title, progress and add control form one aligned, readable group. */
body.anteks-app #taskModal .role-task-item {
  container-name: task-role;
  container-type: inline-size;
  padding: 14px;
}

body.anteks-app #taskModal .role-task-header {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 44px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ux-border, var(--border));
}

body.anteks-app #taskModal .role-task-name {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

body.anteks-app #taskModal .role-task-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: auto;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
  margin-left: auto;
}

/* Header actions use content width, not the old full-row approval layout. */
body.anteks-app #taskModal .role-task-header-actions > :is(.warehouse-approve-all-button, .warehouse-transfer-button) {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

body.anteks-app #taskModal .role-task-summary {
  min-height: 44px;
  min-width: 54px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: var(--ux-radius-sm, 10px);
  color: var(--ux-muted, var(--muted));
  background: var(--ux-surface, var(--panel));
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.anteks-app #taskModal .role-task-steps { gap: 14px; padding-top: 12px; }
body.anteks-app #taskModal .role-task-step { grid-template-columns: minmax(0, 1fr) 78px 92px minmax(150px, 180px) 44px; }
body.anteks-app #taskModal .role-task-step.is-supply-step { grid-template-columns: minmax(0, 1fr) 92px 92px minmax(190px, 230px) 44px; }
/* No reserved approval/badge columns: every warehouse row fills the card. */
body.anteks-app #taskModal .role-task-step.is-warehouse-step {
  grid-template-columns: minmax(0, 1fr) 78px 92px minmax(170px, 220px) 44px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: 10px;
  background: var(--ux-subtle, var(--panel-soft));
  --warehouse-transfer-bg: #edf9f1;
  --warehouse-transfer-field: #f5fcf7;
  --warehouse-transfer-box: #d9f3e3;
  --warehouse-transfer-border: #8bc8a2;
  --warehouse-transfer-text: #166534;
}

body.anteks-app[data-theme="dark"] #taskModal .role-task-step.is-warehouse-step {
  --warehouse-transfer-bg: #17382c;
  --warehouse-transfer-field: #1b4132;
  --warehouse-transfer-box: #23523e;
  --warehouse-transfer-border: #4e9470;
  --warehouse-transfer-text: #b9f6d1;
}

/* Unsent shortages are red; an approval or a neighbouring transfer is not a transfer. */
body.anteks-app #taskModal .role-task-step.is-warehouse-pending {
  --warehouse-transfer-bg: #fff1f2;
  --warehouse-transfer-field: #fff8f8;
  --warehouse-transfer-box: #ffe1e5;
  --warehouse-transfer-border: #e4a1aa;
  --warehouse-transfer-text: #9f1239;
}

body.anteks-app[data-theme="dark"] #taskModal .role-task-step.is-warehouse-pending {
  --warehouse-transfer-bg: #3f202a;
  --warehouse-transfer-field: #462530;
  --warehouse-transfer-box: #5b2939;
  --warehouse-transfer-border: #ac657a;
  --warehouse-transfer-text: #ffd1dc;
}

/* The persisted transfer flag, not completion/approval, controls the green state. */
body.anteks-app #taskModal .role-task-step:is(.is-warehouse-transferred, .is-warehouse-pending) {
  --ux-field-bg: var(--warehouse-transfer-field);
  --ux-field-border: var(--warehouse-transfer-border);
  border-color: var(--warehouse-transfer-border);
  background: var(--warehouse-transfer-bg);
}

body.anteks-app #taskModal :is(.is-warehouse-transferred, .is-warehouse-pending) .warehouse-step-box {
  border-color: var(--warehouse-transfer-border);
  background: var(--warehouse-transfer-box);
}

body.anteks-app #taskModal .is-warehouse-step .warehouse-step-box {
  grid-template-columns: 80px minmax(0, 1fr);
}

body.anteks-app #taskModal .is-warehouse-step .warehouse-available-input { width: 100%; }

body.anteks-app #taskModal :is(.is-warehouse-transferred, .is-warehouse-pending) :is(.warehouse-missing, .warehouse-missing-value) {
  color: var(--warehouse-transfer-text);
}

body.anteks-app #taskModal .warehouse-transfer-badge {
  grid-column: 1 / -1;
  justify-content: flex-start;
  min-height: 0;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--warehouse-transfer-text);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}

/* Attachment controls use theme colors; no white or dashed upload islands. */
body.anteks-app :is(.role-task-step-image-add, .quantity-image-add, .manager-image-actions .button-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ux-field-border, var(--border));
  border-radius: var(--ux-radius-sm, 10px);
  color: var(--ux-accent, var(--brand-blue));
  background: var(--ux-accent-soft, var(--panel-soft));
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: none;
  white-space: nowrap;
}

body.anteks-app :is(.role-task-step-image-add, .quantity-image-add, .manager-image-actions .button-secondary):hover:not(:disabled) {
  border-color: var(--ux-accent, var(--brand-blue));
  background: color-mix(in srgb, var(--ux-accent, var(--brand-blue)) 14%, var(--ux-surface, var(--panel)));
  transform: none;
}

body.anteks-app :is(.role-task-step-image-add, .quantity-image-add) > .ui-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

body.anteks-app #taskModal .quantity-field {
  container-name: task-quantity;
  container-type: inline-size;
}

body.anteks-app #taskModal .quantity-row .quantity-image-box {
  grid-template-columns: max-content max-content;
  grid-template-rows: 44px auto;
  gap: 8px;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  flex-basis: auto;
  justify-self: start;
}

body.anteks-app #taskModal .quantity-row,
body.anteks-app #taskModal .quantity-row.is-long-label {
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr) 72px 44px;
  grid-template-areas: "label label value remove" "urgency files files files";
  grid-template-rows: auto auto;
  gap: 10px;
  align-items: start;
}

body.anteks-app #taskModal .quantity-row .quantity-label-input {
  grid-area: label;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  line-height: 22px;
}
body.anteks-app #taskModal .quantity-row .quantity-value-input { grid-area: value; width: 100%; margin: 0; }
body.anteks-app #taskModal .quantity-row .quantity-remove-button { grid-area: remove; width: 44px; height: 44px; min-height: 44px; margin: 0; }
body.anteks-app #taskModal .quantity-row .quantity-urgency-control {
  grid-area: urgency;
  width: 180px;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  flex-basis: auto;
  justify-self: start;
  margin: 0;
}
body.anteks-app #taskModal .quantity-row .quantity-image-box { grid-area: files; margin: 0; }

body.anteks-app #taskModal .quantity-row :is(.quantity-image-add, .quantity-image-count) {
  min-height: 44px;
  min-width: 0;
  margin: 0;
}

body.anteks-app #taskModal .quantity-row .quantity-image-add {
  width: auto;
  justify-self: start;
}

body.anteks-app #taskModal .quantity-row .quantity-image-count {
  justify-content: flex-start;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  color: var(--ux-muted, var(--muted));
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

body.anteks-app #taskModal .quantity-row .quantity-image-list {
  /* Thumbnails wrap to the header width without widening its intrinsic column. */
  contain: inline-size;
  gap: 4px 8px;
  width: 100%;
  min-width: 0;
  max-height: 104px;
  padding: 2px;
  box-sizing: border-box;
  overflow: auto;
  flex-wrap: wrap;
}

body.anteks-app #taskModal .quantity-row .quantity-image-list:has(> .quantity-image-empty) { display: none; }

body.anteks-app #taskModal .quantity-row .quantity-image-box:has(.quantity-image-empty) { grid-template-rows: 44px; }

body.anteks-app .quantity-image-thumb,
body.anteks-app #taskModal .quantity-row .quantity-image-thumb {
  display: grid;
  grid-template-columns: minmax(44px, 64px) 44px;
  flex: 0 0 102px;
  width: 102px;
  min-width: 100px;
  height: 48px;
  min-height: 48px;
  padding: 1px;
  gap: 4px;
  border-radius: 10px;
  border-color: var(--ux-border, var(--border));
  background: var(--ux-surface, var(--panel));
  box-sizing: border-box;
}

body.anteks-app .quantity-image-thumb img { min-width: 0; height: 42px; border-radius: 7px; }
body.anteks-app .quantity-image-remove { position: static; inset: auto; border-width: 1px; }

@container task-quantity (min-width: 900px) {
  body.anteks-app #taskModal .quantity-row,
  body.anteks-app #taskModal .quantity-row.is-long-label {
    grid-template-columns: minmax(220px, 1fr) 72px 180px max-content 44px;
    grid-template-areas: "label value urgency files remove";
    grid-template-rows: auto;
  }
}

@container task-quantity (max-width: 480px) {
  body.anteks-app #taskModal .quantity-row,
  body.anteks-app #taskModal .quantity-row.is-long-label {
    grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 44px;
    grid-template-areas: "label label label remove" "value urgency urgency urgency" "files files files files";
    grid-template-rows: auto auto auto;
  }
}

body.anteks-app .role-task-step-images { gap: 8px; padding: 2px; }
body.anteks-app .role-task-step-image {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  flex: 1 1 280px;
  width: min(100%, 360px);
  max-width: 360px;
  min-height: 56px;
  padding: 5px;
  gap: 8px;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: 12px;
  color: var(--ux-text, var(--text));
  background: var(--ux-surface, var(--panel));
}

body.anteks-app .role-task-step-image:has(.role-task-step-image-remove) { grid-template-columns: 44px minmax(0, 1fr) 44px 44px; }
body.anteks-app .role-task-step-image-remove { position: static; inset: auto; border-width: 1px; }
body.anteks-app .role-task-step-image-preview,
body.anteks-app .role-task-step-image-preview.is-file {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: 8px;
  color: var(--ux-accent, var(--brand-blue));
  background: var(--ux-accent-soft, var(--panel-soft));
}

body.anteks-app .role-task-step-image-name { font-size: 12px; line-height: 1.4; font-weight: 500; }
body.anteks-app :is(.quantity-image-empty, .role-task-step-image-count, .manager-images-summary, .manager-image-meta) { color: var(--ux-muted, var(--muted)); font-weight: 500; }
body.anteks-app .manager-image-actions { align-items: center; flex-wrap: wrap; gap: 8px; }
body.anteks-app .manager-image-card { border-color: var(--ux-border, var(--border)); background: var(--ux-subtle, var(--panel-soft)); border-radius: 12px; }
body.anteks-app .manager-image-remove { min-height: 44px; border-radius: 8px; }

body.anteks-app .chat-message-file {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  max-width: 360px;
  padding: 12px;
  gap: 5px;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: 12px;
  color: var(--ux-text, var(--text));
  background: var(--ux-surface, var(--panel));
  box-shadow: none;
}

body.anteks-app .chat-message-file:hover:not(:disabled) { border-color: var(--ux-accent, var(--brand-blue)); background: var(--ux-accent-soft, var(--panel-soft)); transform: none; }
body.anteks-app .chat-message-file strong { color: var(--ux-text, var(--text)); font-size: 13px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
body.anteks-app .chat-message-file span { color: var(--ux-muted, var(--muted)); font-size: 12px; }
body.anteks-app .chat-message-file-preview { border-color: var(--ux-border, var(--border)); background: var(--ux-subtle, var(--panel-soft)); border-radius: 8px; }
body.anteks-app .chat-task-option { min-height: 52px; border-color: var(--ux-border, var(--border)); border-radius: 10px; color: var(--ux-text, var(--text)); background: var(--ux-surface, var(--panel)); }
body.anteks-app .chat-task-option:is(.is-active, :hover) { color: var(--ux-accent, var(--brand-blue)); border-color: var(--ux-accent, var(--brand-blue)); background: var(--ux-accent-soft, var(--panel-soft)); }
body.anteks-app .chat-task-option span { color: var(--ux-muted, var(--muted)); }

/* This menu is portaled to body: its fixed offsets use viewport coordinates,
   unaffected by the chat shell's glass/transform and clipping boundaries. */
body.anteks-app > .chat-message-context-menu {
  position: fixed;
  box-sizing: border-box;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  transform: none;
}

body.anteks-app .chat-message:focus-visible,
body.anteks-app > .chat-message-context-menu button:focus-visible {
  outline: 2px solid var(--ux-accent, var(--brand-blue));
  outline-offset: 2px;
}

/* Frost only the outer dialog. Fields and file controls retain a stable
   reading surface, without a separate blur pass for each attachment or row. */
body.anteks-app #taskModal :is(.manager-top-dates, .quantity-field, .importance-field,
  .manager-comment-field, .assignment-field, .technologist-comment-field, .progress-field,
  .manager-images-field, .role-tasks-field, .task-month-field, .tz-file-field,
  .task-tab-button.is-active, .role-task-summary),
body.anteks-app :is(.role-task-step-image, .quantity-image-thumb, .chat-message-file, .chat-task-option) {
  background: var(--ux-field-bg, var(--ux-surface, var(--panel)));
}

body.anteks-app :is(.role-task-step-image, .quantity-image-thumb, .chat-message-file,
  .role-task-step-image-add, .quantity-image-add, .role-task-step-image-preview,
  .role-task-step-image-download, .role-task-step-image-remove) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.anteks-app .chat-message-file:hover:not(:disabled),
body.anteks-app .chat-task-option:is(.is-active, :hover) {
  background: var(--ux-accent-soft, var(--ux-field-bg, var(--panel-soft)));
}

body.anteks-app :is(.modal-panel, .attachment-preview-panel, .chat-message-files) :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ux-accent, var(--brand-blue));
  outline-offset: 3px;
}

body.anteks-app :is(.role-task-step-image-add, .quantity-image-add, .role-task-add, .role-task-step-remove):disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Each role follows its own available width, including a narrow dock. */
@container task-role (max-width: 760px) {
  body.anteks-app #taskModal .role-task-step,
  body.anteks-app #taskModal .role-task-step.is-warehouse-step,
  body.anteks-app #taskModal .role-task-step.is-supply-step,
  body.anteks-app #taskModal .role-task-step.is-warehouse-step.is-warehouse-transferred {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  body.anteks-app #taskModal :is(.role-task-step-text, .role-task-step-progress-box, .warehouse-step-box, .supply-step-box, .role-task-step-images) { grid-column: 1 / -1; width: 100%; }
  body.anteks-app #taskModal .role-task-step-remove { grid-column: -2; justify-self: end; }
}

body.anteks-app #taskModal.is-docked { min-width: 0; }
body.anteks-app #taskModal.is-docked .modal-panel { padding: 14px; gap: 12px; overflow: hidden; }
body.anteks-app #taskModal.is-docked .modal-header { grid-template-areas: "heading toolbar controls"; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto; align-items: start; gap: 10px; padding-bottom: 12px; }
body.anteks-app #taskModal.is-docked .modal-heading { grid-template-columns: minmax(0, 1fr) auto; align-self: start; column-gap: 8px; row-gap: 0; }
body.anteks-app #taskModal.is-docked .task-title-line { min-height: 44px; flex-wrap: nowrap; }
body.anteks-app #taskModal.is-docked .task-title-line h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; }
body.anteks-app #taskModal.is-docked .task-title-save-state { font-size: 11px; }
body.anteks-app #taskModal.is-docked .task-header-toolbar { flex-wrap: nowrap; align-self: start; }
body.anteks-app #taskModal.is-docked .task-status-summary { max-width: 230px; height: 44px; }
body.anteks-app #taskModal.is-docked .task-header-toolbar:has(.task-complete-button:not(.is-hidden)) .task-status-summary { max-width: clamp(160px, calc(30vw - 194px), 230px); }
body.anteks-app #taskModal.is-docked :is(.task-status-summary-label, .task-status-summary-stage) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.anteks-app #taskModal.is-docked :is(.task-title-action, .manager-word-export-button, .task-ready-button) { width: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 0; }
body.anteks-app #taskModal.is-docked .modal-fields { padding: 3px; scroll-padding-block: 12px; }

/* Notes share the same inner scroll container as every other narrow tab.
   An outer notes-only scrollbar changed the header width and wrapped the title. */
@media (max-width: 720px) {
  body.anteks-app #taskModal.is-notes-tab-active .modal-panel {
    overflow: hidden;
    scrollbar-gutter: auto;
  }

  body.anteks-app #taskModal.is-notes-tab-active .modal-fields {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@media (max-width: 640px) {
  body.anteks-app #taskModal { padding: 8px; }
  body.anteks-app #taskModal .modal-panel { width: 100%; max-width: 100%; max-height: calc(100dvh - 16px); padding: 14px; gap: 14px; }
  body.anteks-app #taskModal .modal-header { column-gap: 10px; row-gap: 12px; padding-bottom: 14px; }
  body.anteks-app #taskModal .modal-heading h2 { font-size: 20px; }
  body.anteks-app #taskModal .modal-heading { grid-template-columns: minmax(0, 1fr); }
  body.anteks-app #taskModal :is(.task-title-action, .manager-word-export-button, .task-ready-button) { width: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 0; }
  body.anteks-app #taskModal .task-status-summary { flex: 1 1 170px; margin-left: 0; }
  body.anteks-app #taskModal .task-header-toolbar:has(.task-complete-button:not(.is-hidden)) .task-status-summary { flex: 1 1 0; min-width: 0; }
  body.anteks-app #taskModal .task-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.anteks-app #taskModal .task-tab-button { white-space: normal; text-overflow: clip; }
  body.anteks-app #taskModal .role-task-header-actions { width: auto; }
  body.anteks-app #taskModal .role-task-item { padding: 12px; }
  body.anteks-app .role-task-step-image { flex-basis: 100%; width: 100%; max-width: 100%; }
  body.anteks-app .manager-images-panel { max-height: calc(100dvh - 16px); }
}

@media (max-width: 480px) {
  body.anteks-app #taskModal .quantity-row,
  body.anteks-app #taskModal .quantity-row.is-long-label {
    grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 44px;
    grid-template-areas: "label label label remove" "value urgency urgency urgency" "files files files files";
  }
}

@media (prefers-reduced-motion: reduce) {
  body.anteks-app :is(.modal-panel, .attachment-preview-panel, .role-task-step-image, .chat-message-file) { animation: none; transition: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.anteks-app :is(.modal-panel, .attachment-preview-panel),
  body.anteks-app #taskModal .modal-panel {
    background: var(--ux-solid, var(--panel));
    border-color: var(--ux-border, var(--border));
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.anteks-app :is(.modal-panel, .attachment-preview-panel),
  body.anteks-app #taskModal .modal-panel {
    background: var(--ux-solid, var(--panel));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Direct status menu sits outside the clipped, translucent task panel. */
body.anteks-app #taskModal > .task-status-editor-backdrop {
  position: fixed;
  z-index: 70;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  pointer-events: auto;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.anteks-app #taskModal > .task-status-editor {
  position: fixed;
  z-index: 71;
  inset: auto;
  top: 12px;
  left: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  margin: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: 14px;
  color: var(--ux-text, var(--text));
  background: var(--ux-solid, var(--panel));
  box-shadow: 0 14px 40px rgb(10 22 38 / 24%);
  pointer-events: auto;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.anteks-app #taskModal .task-status-editor-head {
  gap: 8px;
}

body.anteks-app #taskModal .task-status-editor-head strong {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.35;
}

body.anteks-app #taskModal .task-status-options {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 0;
  padding: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.anteks-app #taskModal .task-status-option {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--status-accent, var(--ux-text, var(--text)));
  background: var(--ux-solid, var(--panel));
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  transform: none;
}

body.anteks-app #taskModal .task-status-option:is(:hover, :focus-visible, [aria-checked="true"]) {
  color: var(--status-accent, var(--ux-text, var(--text)));
  border-color: var(--status-border, var(--ux-border, var(--border)));
  background: var(--status-background, var(--ux-solid, var(--panel)));
  box-shadow: none;
  transform: none;
}

body.anteks-app #taskModal .task-status-option-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-accent, var(--ux-accent, var(--brand-blue)));
}

body.anteks-app #taskModal .task-status-option-label {
  min-width: 0;
}

body.anteks-app #taskModal .task-status-option-check {
  visibility: hidden;
  font-size: 17px;
  line-height: 1;
  text-align: center;
}

body.anteks-app #taskModal .task-status-option[aria-checked="true"] .task-status-option-check {
  visibility: visible;
}

body.anteks-app #taskModal .task-status-editor :is(button, [role="menuitemradio"]):focus-visible {
  outline: 2px solid var(--ux-accent, var(--brand-blue));
  outline-offset: 1px;
}

body.anteks-app #taskModal .task-status-editor-hint {
  padding: 2px 3px 0;
  color: var(--ux-muted, var(--muted));
  font-size: 11px;
  line-height: 1.4;
}

/* Readiness and quality confirmation share a solid, scroll-safe dialog. */
body.anteks-app #qualityControlModal {
  padding: 16px;
}

body.anteks-app #qualityControlForm {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  width: min(520px, calc(100vw - 32px));
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--ux-solid, var(--panel));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.anteks-app #qualityControlForm .modal-header {
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ux-border, var(--border));
  background: transparent;
}

body.anteks-app #qualityControlForm .quality-control-icon {
  flex: 0 0 38px;
}

body.anteks-app #qualityControlForm .quality-control-body {
  min-height: 0;
  padding: 18px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.anteks-app #qualityControlForm .quality-control-done-stage-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.anteks-app #qualityControlForm .quality-control-done-stage-field > legend {
  margin-bottom: 12px;
  padding: 0;
  color: var(--ux-text, var(--text));
  font-size: 14px;
  font-weight: 600;
}

body.anteks-app #qualityControlForm .quality-control-done-stage-options,
body.anteks-app #qualityControlForm .quality-control-check-section {
  display: grid;
  gap: 10px;
}

body.anteks-app #qualityControlForm .quality-control-stage-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 50px;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid var(--ux-border, var(--border));
  border-radius: 10px;
  color: var(--ux-text, var(--text));
  background: var(--ux-solid, var(--panel));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: pointer;
}

body.anteks-app #qualityControlForm .quality-control-stage-option input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--green);
}

body.anteks-app #qualityControlForm .quality-control-stage-option:is(:hover, :has(input:checked)) {
  border-color: color-mix(in srgb, var(--green) 65%, var(--ux-border, var(--border)));
  background: color-mix(in srgb, var(--green) 8%, var(--ux-solid, var(--panel)));
}

body.anteks-app #qualityControlForm .quality-control-stage-option:has(input:focus-visible) {
  outline: 2px solid var(--ux-accent, var(--brand-blue));
  outline-offset: 2px;
}

body.anteks-app #qualityControlForm .quality-control-check-section > p {
  margin: 0;
  color: var(--ux-muted, var(--muted));
  font-size: 13px;
  line-height: 1.5;
}

body.anteks-app #qualityControlForm .quality-control-actions {
  flex-wrap: wrap;
  padding: 14px 20px 18px;
  border-top-color: var(--ux-border, var(--border));
}

body.anteks-app #qualityControlForm .quality-control-actions > button {
  min-height: 44px;
  white-space: normal;
}

@media (max-width: 480px) {
  body.anteks-app #qualityControlForm .modal-header,
  body.anteks-app #qualityControlForm .quality-control-body,
  body.anteks-app #qualityControlForm .quality-control-actions { padding: 14px; }
  body.anteks-app #qualityControlForm .modal-heading h2 { font-size: 20px; }
  body.anteks-app #qualityControlForm .quality-control-actions > button { flex: 1 1 140px; }
  body.anteks-app #qualityControlForm .quality-control-actor { grid-template-columns: minmax(0, 1fr); }
  body.anteks-app #qualityControlForm .quality-control-actor > small { grid-column: 1; grid-row: auto; }
}

/* Company membership actions stay visible across tabs; destructive writes wait. */
body.anteks-app #adminModal .admin-panel {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  min-width: 0;
}

body.anteks-app #adminModal .admin-section {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  max-width: 100%;
}

body.anteks-app #adminModal .admin-tabs {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  align-items: center;
  height: auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

body.anteks-app #adminModal .admin-tabs > .admin-tab {
  flex: 1 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

body.anteks-app #adminModal .admin-tabs > .admin-tab:focus-visible {
  outline-offset: -3px;
}

body.anteks-app #adminModal .company-member-actions {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 8px;
  min-width: 0;
  max-height: min(40vh, 280px);
  overflow-y: auto;
  background: var(--panel);
}

body.anteks-app #adminModal .company-member-pending-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-blue);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel-soft);
}

body.anteks-app #adminModal .company-member-pending-action > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

body.anteks-app #adminModal .company-member-action-countdown {
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

body.anteks-app #adminModal .company-member-action-cancel {
  flex: 0 0 auto;
  min-height: 44px;
}

body.anteks-app #adminModal .company-member-action-feedback,
body.anteks-app #adminModal .dismissed-members-help {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

body.anteks-app #adminModal .company-member-action-feedback.is-error {
  padding: 10px;
  border: 1px solid var(--red);
  border-radius: 8px;
}

body.anteks-app #adminModal .dismissed-members-table {
  min-width: 540px;
}

body.anteks-app #adminModal #dismissedAdminSection .admin-users-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.anteks-app #adminModal .dismissed-members-table button,
body.anteks-app #adminModal .company-member-status-control :is(button, select),
body.anteks-app #adminModal #dismissedMemberSearch,
body.anteks-app #adminModal #refreshDismissedMembers {
  min-height: 44px;
}

@media (max-width: 480px) {
  body.anteks-app #adminModal .company-member-pending-action { flex-wrap: wrap; gap: 8px; }
  body.anteks-app #adminModal .company-member-action-cancel { margin-left: auto; }
}

@media (max-width: 560px) {
  body.anteks-app #adminModal .company-member-actions { top: calc(58px + env(safe-area-inset-top)); z-index: 13; }
  body.anteks-app #adminModal .dismissed-members-table { min-width: 0; }
  body.anteks-app #adminModal #dismissedAdminSection .admin-users-toolbar { grid-template-columns: minmax(0, 1fr); }
  body.anteks-app #adminModal :is(.company-members-table, .dismissed-members-table) td { order: initial; overflow-wrap: anywhere; }
  body.anteks-app #adminModal :is(.company-members-table, .dismissed-members-table) td::before { content: attr(data-label); }
  body.anteks-app #adminModal :is(.company-members-table, .dismissed-members-table) td.empty-state::before { display: none; }
  body.anteks-app #adminModal :is(.company-members-table, .dismissed-members-table) .company-member-account-identity { min-width: 0; }
  body.anteks-app #adminModal .dismissed-members-table button { white-space: normal; max-width: 100%; }
}