/* Perfil da Entidade — direção "liquid glass" estilo Apple, mesma
   linguagem já aplicada nas outras páginas (ver equipamentos.css/
   definicoes.css/gestao-utilizadores.css/etc.). Este ficheiro CSS é
   partilhado com kitchen-ficha-detalhe.html/kitchen-ingredientes.html/
   kitchen-ingrediente-detalhe.html/perfil-utilizador.html — por isso
   todas as regras abaixo estão prefixadas com `.pe-entity` (classe só
   presente no <body> de perfil-entidade.html e de perfil-utilizador.html)
   para não vazar para as outras páginas. */

.pe-entity {
  /* Valores de glass.css quando a página o carrega (perfil-utilizador);
     perfil-entidade.html fica com os valores de reserva. */
  --pe-ink: var(--g-ink, #1d1d1f);
  --pe-ink-soft: var(--g-ink-soft, #3a3a3c);
  --pe-secondary: var(--g-secondary, #6e6e73);
  --pe-tertiary: var(--g-tertiary, #6c6c72);
  --pe-accent: var(--g-accent, #0a84ff);
  --pe-accent-soft: var(--g-accent-soft, rgba(10, 132, 255, 0.12));
  --pe-danger: var(--g-danger, #ff3b30);
  --pe-glass-bg: var(--g-surface, rgba(255, 255, 255, 0.58));
  --pe-glass-bg-strong: var(--g-surface-strong, rgba(255, 255, 255, 0.8));
  --pe-glass-border: var(--g-edge, rgba(255, 255, 255, 0.85));
  --pe-hairline: var(--g-hairline, rgba(60, 60, 67, 0.1));
  background: #eef0f4;
  position: relative;
}
.pe-entity::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(10, 132, 255, 0.22), transparent 70%),
    radial-gradient(34% 30% at 88% 14%, rgba(255, 149, 0, 0.14), transparent 70%),
    radial-gradient(46% 40% at 30% 92%, rgba(48, 209, 88, 0.14), transparent 70%),
    radial-gradient(40% 36% at 92% 88%, rgba(191, 90, 242, 0.14), transparent 70%),
    linear-gradient(180deg, #f7f8fb 0%, #eef0f4 60%, #e7e9ef 100%);
  filter: blur(60px);
  pointer-events: none;
}

.pe-entity, .pe-entity .topbar__title, .pe-entity .panel__title, .pe-entity .field__label {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", var(--font-sans);
}

.pe-entity .op {
  position: relative;
  z-index: 1;
  background: transparent;
}

@media (min-width: 641px) {
  .pe-entity .op { padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4) env(safe-area-inset-bottom, 0px); }
}
@media (max-width: 640px) {
  .pe-entity .op { padding: calc(var(--sp-3) + env(safe-area-inset-top, 0px)) var(--sp-3) env(safe-area-inset-bottom, 0px); }
  .pe-entity .op .topbar { border-radius: var(--g-r-bar, 20px); }
  .pe-entity .op__content { padding-left: 0; padding-right: 0; }
}

.pe-entity .op .topbar {
  background: var(--pe-glass-bg-strong);
  border: 1px solid var(--pe-glass-border);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}
@media (min-width: 641px) {
  .pe-entity .op .topbar { border-radius: 24px; }
}
.pe-entity .op .topbar__toggle { color: var(--pe-secondary); }
.pe-entity .op .topbar__toggle:hover { background: rgba(120, 120, 128, 0.12); color: var(--pe-ink); }
.pe-entity .op__brand-mini { background: var(--surface-alt); }
.pe-entity .op .topbar__title { color: var(--pe-ink); letter-spacing: -0.02em; text-transform: none; }
.pe-entity .op .topbar__subtitle { color: var(--pe-secondary); }

@media (min-width: 900px) {
  .pe-entity .op__content { max-width: 96%; }
}

.pe-entity .panel {
  background: var(--pe-glass-bg-strong);
  border: 1px solid var(--pe-glass-border);
  border-radius: 24px;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 20px 46px -28px rgba(20, 30, 60, 0.24);
}
.pe-entity .panel__header { background: transparent; border-bottom: 1px solid var(--pe-hairline); }
.pe-entity .panel__header .icon { color: var(--pe-accent); }
.pe-entity .panel__title { color: var(--pe-ink); font-weight: 700; letter-spacing: -0.01em; }
.pe-entity .panel__meta { color: var(--pe-secondary); }

.pe-entity .field__label { color: var(--pe-tertiary); font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); }
.pe-entity .input, .pe-entity .select {
  border-color: var(--pe-hairline);
  border-radius: var(--r-full);
  background: rgba(120, 120, 128, 0.08);
  color: var(--pe-ink);
}
.pe-entity .input:focus, .pe-entity .select:focus {
  border-color: var(--pe-accent);
  box-shadow: 0 0 0 3px var(--pe-accent-soft);
}

.pe-entity .perfil-tabs { background: rgba(120, 120, 128, 0.1); }
.pe-entity .perfil-tabs__item {
  background: transparent;
  border: none;
  border-radius: var(--r-full);
  color: var(--pe-secondary);
}
.pe-entity .perfil-tabs__item:hover { color: var(--pe-ink); }
.pe-entity .perfil-tabs__item.is-active {
  background: var(--pe-glass-bg-strong);
  color: var(--pe-ink);
  box-shadow: var(--sh-xs);
}

.pe-entity .perfil-logo-preview {
  background: rgba(120, 120, 128, 0.08);
  border: 1px solid var(--pe-hairline);
  color: var(--pe-tertiary);
}

[data-perfil-loading] {
  text-align: center;
  color: var(--text-muted);
  padding: var(--sp-6) 0;
}

/* Estes três containers são mostrados via flex quando os dados carregam,
   mas usavam um style="display:flex" inline no HTML — que tem mais
   especificidade do que a regra [hidden] do browser e por isso o
   atributo hidden nunca conseguia escondê-los de facto. */
[data-perfil-view],
[data-dish-view],
[data-ingredient-view] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

[data-perfil-view][hidden],
[data-dish-view][hidden],
[data-ingredient-view][hidden] {
  display: none;
}

[data-perfil-form] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

[data-tab-panel] .panel__body,
[data-perfil-view] .panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.perfil-logo-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.perfil-logo-preview {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  background: var(--grey-050);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--grey-400);
  overflow: hidden;
  flex-shrink: 0;
}

.perfil-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.perfil-logo-row .upload-slot {
  flex: 1;
}

.perfil-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

@media (max-width: 640px) {
  .perfil-field-row {
    grid-template-columns: 1fr;
  }
}

.perfil-fiscal-year {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.perfil-fiscal-year__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.perfil-fiscal-year__caption {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pe-tertiary, var(--text-muted));
}

.perfil-fiscal-year__inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--sp-2);
}

@media (max-width: 640px) {
  .perfil-fiscal-year {
    grid-template-columns: 1fr;
  }
}

.perfil-actions {
  display: flex;
  justify-content: flex-end;
}

.perfil-success {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--state-done-bg);
  color: var(--state-done);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.perfil-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-full);
  background: var(--grey-100);
}

.perfil-tabs__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 16px;
  border-radius: var(--r-full);
  color: var(--text-muted);
  font-weight: 650;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.perfil-tabs__item.is-active {
  background: var(--surface);
  color: var(--navy-800);
  box-shadow: var(--sh-xs);
}