/* ═══════════════════════════════════════
   Company Header — logo + name in settings
   ═══════════════════════════════════════ */

.company-header {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  padding: var(--space-2xl);
  background: var(--surface);
  background-image: var(--gradient-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-lg);
}

.company-header__logo {
  flex-shrink: 0;
}

.company-header__info {
  min-width: 0;
}

.company-header__name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text);
  margin-bottom: var(--space-2xs);
}

.company-header__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .company-header {
    flex-direction: column;
    text-align: center;
  }
}

/* ═══════════════════════════════════════
   Logo Upload — drag & drop zone
   ═══════════════════════════════════════ */

.logo-upload__zone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  overflow: hidden;
  position: relative;
}

.logo-upload__zone:hover,
.logo-upload--dragover .logo-upload__zone {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.logo-upload__zone:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.logo-upload__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-faint);
}

/* Ensure hidden attribute wins over display: flex */
.logo-upload__preview[hidden],
.logo-upload__placeholder[hidden] {
  display: none;
}

.logo-upload__icon {
  opacity: 0.5;
}

.logo-upload__text {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.logo-upload__preview {
  width: 100%;
  height: 100%;
}

.logo-upload__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 2px);
}

.logo-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo-upload__error {
  color: var(--danger);
  font-size: var(--text-xs);
  margin-top: var(--space-xs);
}