/* Gestão de Utilizadores — direção "liquid glass" estilo Apple, mesma
   linguagem já aplicada em tarefas.css/dashboard.css/equipamentos.css/
   definicoes.css/etc. Este ficheiro só é carregado por
   gestao-utilizadores.html, por isso reescrever aqui classes
   partilhadas (.op/.topbar/.panel/.table/.modal__.../...) não afeta as
   outras páginas que também carregam manu-operacional.css (esse
   ficheiro em si não é tocado). */

:root {
  --gu-ink: #1d1d1f;
  --gu-ink-soft: #3a3a3c;
  --gu-secondary: #6e6e73;
  --gu-tertiary: #8e8e93;
  --gu-accent: #0a84ff;
  --gu-accent-soft: rgba(10, 132, 255, 0.12);
  --gu-danger: #ff3b30;
  --gu-danger-soft: rgba(255, 59, 48, 0.12);
  --gu-success: #248a3d;
  --gu-glass-bg: rgba(255, 255, 255, 0.58);
  --gu-glass-bg-strong: rgba(255, 255, 255, 0.8);
  --gu-glass-border: rgba(255, 255, 255, 0.85);
  --gu-hairline: rgba(60, 60, 67, 0.1);
}

body {
  background: #eef0f4;
  position: relative;
}
body::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;
}

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

/* ---------- shell (sem sidebar) ---------- */
.op {
  position: relative;
  z-index: 1;
  background: transparent;
}

@media (min-width: 641px) {
  .op { padding: var(--sp-4) var(--sp-4) 0; }
}

.op .topbar {
  background: var(--gu-glass-bg-strong);
  border: 1px solid var(--gu-glass-border);
  border-bottom: 1px solid var(--gu-glass-border);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}

@media (min-width: 641px) {
  .op .topbar { border-radius: 24px; }
}
.op .topbar__toggle {
  color: var(--gu-secondary);
}
.op .topbar__toggle:hover {
  background: rgba(120, 120, 128, 0.12);
  color: var(--gu-ink);
}
.op__brand-mini {
  background: var(--surface-alt);
}
.op .topbar__title {
  color: var(--gu-ink);
  letter-spacing: -0.02em;
  text-transform: none;
}

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

/* ---------- painéis / tabela ---------- */
.panel {
  background: var(--gu-glass-bg-strong);
  border: 1px solid var(--gu-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);
}
.panel__header { background: transparent; border-bottom: 1px solid var(--gu-hairline); }
.panel__header .icon { color: var(--gu-accent); }
.panel__title { color: var(--gu-ink); font-weight: 700; letter-spacing: -0.01em; }
.panel__meta { color: var(--gu-secondary); }

.table thead th {
  background: transparent;
  border-bottom: 1px solid var(--gu-hairline);
  color: var(--gu-tertiary);
}
.table tbody td { border-bottom: 1px solid var(--gu-hairline); color: var(--gu-ink-soft); }
.table tbody tr:hover { background: rgba(120, 120, 128, 0.06); }

/* ---------- botões / campos ---------- */
.btn-icon { border-radius: var(--r-full); color: var(--gu-secondary); }
.btn-icon:hover { background: rgba(120, 120, 128, 0.12); color: var(--gu-ink); }
.field__label { color: var(--gu-tertiary); font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); }
.input, .select {
  border-color: var(--gu-hairline);
  border-radius: var(--r-full);
  background: rgba(120, 120, 128, 0.08);
  color: var(--gu-ink);
}
.input:focus, .select:focus {
  border-color: var(--gu-accent);
  box-shadow: 0 0 0 3px var(--gu-accent-soft);
}

/* ---------- modais ---------- */
.modal__dialog {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-radius: 24px;
  border: 1px solid var(--gu-glass-border);
}
.modal__header,
.modal__header--brand,
.modal__header--danger,
.modal__header--success {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--gu-hairline);
}
.modal__header .modal__title,
.modal__header--brand .modal__title,
.modal__header--danger .modal__title,
.modal__header--success .modal__title {
  color: var(--gu-ink);
}
.modal__header--brand .icon { color: var(--gu-accent); }
.modal__header--danger .icon { color: var(--gu-danger); }
.modal__header--success .icon { color: var(--gu-success); }
.modal__header .modal__close,
.modal__header--brand .modal__close,
.modal__header--danger .modal__close,
.modal__header--success .modal__close {
  color: var(--gu-secondary);
}
.modal__header .modal__close:hover,
.modal__header--brand .modal__close:hover,
.modal__header--danger .modal__close:hover,
.modal__header--success .modal__close:hover {
  background: rgba(120, 120, 128, 0.12);
  color: var(--gu-ink);
}

/* ---------- específico da página ---------- */
.gu-loading {
  text-align: center;
  color: var(--gu-secondary);
  padding: var(--sp-6) 0;
}

.gu-panel + .gu-panel { margin-top: var(--sp-4); }

.gu-role-select {
  width: 100%;
  min-width: 140px;
}

::selection { background: var(--gu-accent-soft); }

/* ---------- pesquisa e filtros por solução ---------- */
.gu-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.gu-search { position: relative; display: block; flex: 1 1 260px; max-width: 360px; }
.gu-search .icon {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gu-secondary);
  pointer-events: none;
}
.gu-search .input { width: 100%; padding-left: calc(var(--sp-4) + 26px); background: var(--gu-glass-bg-strong); }
.gu-search .input::placeholder { color: var(--gu-secondary); }

/* Seletor de solução: o mesmo seletor em pílula do People (.escalas-mode-toggle),
   uma pista cinzenta com um botão branco no item ativo. */
.gu-seg {
  display: flex;
  max-width: 100%;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-full);
  background: rgba(120, 120, 128, 0.12);
  overflow-x: auto;
  scrollbar-width: none;
}
.gu-seg::-webkit-scrollbar { display: none; }
.gu-seg__btn {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--gu-ink-soft);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.gu-seg__btn .icon { width: 15px; height: 15px; }
.gu-seg__btn:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, 0.55); }
.gu-seg__btn:focus-visible { outline: 2px solid var(--gu-accent); outline-offset: 2px; }
.gu-seg__btn[aria-pressed="true"] { background: #fff; color: var(--gu-ink); box-shadow: 0 1px 3px rgba(20, 30, 60, 0.15); }
.gu-seg__count { font-variant-numeric: tabular-nums; color: #5c5c61; font-weight: 600; }

/* ---------- lista de utilizadores ---------- */
.gu-panel__body { padding: 0; }
.gu-list { list-style: none; margin: 0; padding: 0; }

.gu-list__head,
.gu-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(240px, 2fr) 92px 176px;
  column-gap: var(--sp-4);
  align-items: center;
}
.gu-list__head {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--gu-hairline);
  color: var(--gu-secondary);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gu-row {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--gu-hairline);
  transition: background 150ms ease;
}
.gu-row:last-child { border-bottom: none; }
.gu-row:hover { background: rgba(120, 120, 128, 0.05); }

.gu-row__main { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.gu-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gu-accent-soft);
  color: #0a5cc0;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.gu-row__who { display: grid; min-width: 0; }
.gu-user-row__name { font-weight: 700; color: var(--gu-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gu-row__email { color: var(--gu-secondary); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gu-user-row__self { font-size: var(--fs-xs); color: var(--gu-secondary); }

.gu-row__access { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.gu-row__none { color: var(--gu-secondary); font-size: var(--fs-sm); }
.gu-row__since { color: var(--gu-secondary); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.gu-row__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }

.gu-manage .icon { transition: transform 150ms ease; }
.gu-manage[aria-expanded="true"] .icon { transform: rotate(90deg); }

/* Chip de uma solução: ícone, nome e cargo, na cor da solução. */
.gu-sol-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-full);
  background: rgba(var(--sol-rgb), 0.1);
  color: rgb(var(--sol-ink));
  font-size: var(--fs-sm);
  line-height: 1.25;
}
.gu-sol-chip .icon { width: 14px; height: 14px; flex: none; }
.gu-sol-chip strong { font-weight: 700; }
.gu-sol-chip span { font-weight: 500; }
.gu-sol-chip--all { padding-left: 10px; background: rgba(29, 29, 31, 0.08); color: var(--gu-ink); }

/* ---------- gestão de acessos (abre na própria linha) ---------- */
.gu-editor {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-5) var(--sp-3);
  border-radius: 18px;
  background: rgba(120, 120, 128, 0.06);
  border: 1px solid var(--gu-hairline);
}
.gu-editor__note { margin: var(--sp-3) 0 var(--sp-1); color: var(--gu-secondary); font-size: var(--fs-sm); }
.gu-access__row {
  display: grid;
  grid-template-columns: 190px minmax(220px, 300px) minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--gu-hairline);
}
.gu-access__row:last-child { border-bottom: none; }
.gu-access__label { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 650; color: var(--gu-ink); }
.gu-sol-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(var(--sol-rgb), 0.12);
  color: rgb(var(--sol-ink));
}
.gu-sol-icon .icon { width: 16px; height: 16px; }
.gu-access__static { font-weight: 600; color: var(--gu-ink-soft); }
.gu-access__static--none { color: var(--gu-secondary); font-weight: 500; }
.gu-access__hint { margin: 0; color: var(--gu-secondary); font-size: var(--fs-sm); }
.gu-editor__status { min-height: 1.3em; margin: var(--sp-1) 0 0; color: var(--gu-success); font-size: var(--fs-sm); font-weight: 600; }
.gu-editor__status.is-error { color: #c42b21; }

/* ---------- carregamento e lista vazia ---------- */
.gu-skeleton { display: grid; gap: var(--sp-3); }
.gu-skeleton__row {
  height: 76px;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
  background-size: 200% 100%;
  animation: gu-shimmer 1.4s ease-in-out infinite;
}
@keyframes gu-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gu-skeleton__row { animation: none; }
  .gu-manage .icon, .gu-seg__btn, .gu-row { transition: none; }
}
.gu-empty { padding: var(--sp-6) var(--sp-4); }

/* Tabela dos convites pendentes: respiro à volta, em vez de encostar às bordas da caixa. */
.gu-panel .table-wrap { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.gu-panel .table--compact td { vertical-align: middle; }

/* ---------- ecrãs estreitos ---------- */
@media (max-width: 960px) {
  .gu-list__head { display: none; }
  .gu-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-3); padding: var(--sp-4); }
  .gu-row__access { grid-column: 1 / -1; order: 3; }
  .gu-row__since { grid-column: 1 / -1; order: 4; }
  .gu-row__since::before { content: "Desde "; }
  .gu-editor { order: 5; padding-inline: var(--sp-4); }
  .gu-access__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); }
  .gu-access__control .gu-role-select { max-width: none; }
}
@media (max-width: 640px) {
  .gu-search { max-width: none; flex-basis: 100%; }
}

/* Em telemóvel o ecrã da app é fixo (.op) e a página rola dentro de .op__content:
   os blocos não podem encolher, senão a lista fica cortada. */
.op__content > * { flex-shrink: 0; }
@media (max-width: 640px) {
  .op__content { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
}

.gu-link-box {
  display: flex;
  gap: var(--sp-2);
}

.gu-link-box .input { flex: 1; min-width: 0; font-size: var(--fs-sm); }

/* ---------- popup de convidar utilizador ---------- */
.modal__body.gu-invite { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.gu-invite__lead { margin: 0; color: var(--gu-secondary); }
.gu-invite__group { display: grid; gap: var(--sp-3); }
.gu-invite__title { margin: 0; color: var(--gu-ink); font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; }
.gu-invite__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.gu-invite__error { margin: 0; color: #c42b21; font-size: var(--fs-sm); font-weight: 600; }
.input[aria-invalid="true"] { border-color: var(--gu-danger); box-shadow: 0 0 0 3px var(--gu-danger-soft); }
.gu-access--invite { border-top: 1px solid var(--gu-hairline); }
.gu-invite__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  background: rgba(120, 120, 128, 0.07);
}
.gu-invite__summary-label { color: var(--gu-secondary); font-size: var(--fs-sm); font-weight: 600; }
@media (max-width: 640px) {
  .gu-invite__fields { grid-template-columns: minmax(0, 1fr); }
}