/* File field — the panel-wide file-upload control.
 *
 * One cohesive control (a button segment + a filename segment) instead of the
 * browser's stuck-in native file button. Reads tokens.css, so it themes with
 * the app and works in every wing. Enhanced by shared/js initializeFileFields
 * (filename display, has-file state, drag-and-drop); the native input still
 * carries the value, so forms submit unchanged.
 *
 * Markup:
 *   <label class="filefield">
 *     <input type="file" id="…" name="…" accept="…">
 *     <span class="filefield__btn">…icon… Выбрать файл</span>
 *     <span class="filefield__name" data-placeholder="Файл не выбран">Файл не выбран</span>
 *   </label>
 */
.filefield {
  display: flex; align-items: stretch; width: 100%; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.filefield:hover { border-color: var(--border-strong); }
.filefield:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.filefield.is-dragover { border-color: var(--accent); background: var(--accent-weak); }
.filefield.has-file { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* visually hidden but still focusable / form-submitting */
.filefield > input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.filefield__btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 0 var(--sp-4); min-height: 40px; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font-size: var(--fs-sm); font-weight: 600;
  border-right: 1px solid var(--border);
}
.filefield__btn svg { width: 15px; height: 15px; }
.filefield__name {
  display: flex; align-items: center; flex: 1; min-width: 0;
  padding: 0 var(--sp-3); min-height: 40px; color: var(--text-faint);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filefield.has-file .filefield__name { color: var(--text); }

/* Compact variant — inline controls / table cells (e.g. Asana per-domain
   image overrides), built by the page's own script. */
.filefield--sm { max-width: 240px; }
.filefield--sm .filefield__btn { min-height: 30px; padding: 0 var(--sp-3);
  font-size: var(--fs-xs); gap: 6px; }
.filefield--sm .filefield__btn svg { width: 13px; height: 13px; }
.filefield--sm .filefield__name { min-height: 30px; padding: 0 var(--sp-2);
  font-size: var(--fs-xs); }