/* Backoffice — usa os mesmos tokens de marca do site público (definidos em
   /css/style.css, já importado antes deste ficheiro), com uma composição
   utilitária de painel de administração. */

body{ margin:0; font-family: var(--font-body); background: var(--paper); color: var(--text); }

/* ---------- login ---------- */
/* Correção crítica: o atributo HTML `hidden` só funciona se nada mais no CSS
   redefinir `display` no mesmo elemento. Sem esta regra, `.login-screen`,
   `.app-shell` e `.modal-backdrop` (que definem display:flex/grid) ganhavam
   sempre a um `[hidden]` do browser com a mesma especificidade, e por isso
   o ecrã de login, a app e os modais apareciam todos ao mesmo tempo — dando
   a impressão de que o botão "Área reservada" ia direto para o formulário
   de nova oferta de emprego (o modal, por ser o último no HTML, ficava por
   cima de tudo). Esta regra garante que `hidden` esconde sempre o elemento. */
[hidden]{ display:none !important; }

.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background: radial-gradient(circle at 20% 20%, rgba(227,169,59,.18), transparent 45%), linear-gradient(160deg, var(--ink), var(--red-deep)); }
.login-card{ background: var(--white); border-radius: 18px; padding: 40px; width:100%; max-width:400px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.login-badge{ margin-bottom: 14px; }
.login-lede{ color: var(--text-soft); font-size:.95rem; }
.login-form{ display:flex; flex-direction:column; gap:16px; margin-top: 20px; }
.login-form label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:600; color: var(--ink-soft); }
.login-form input{ font: inherit; padding: .7em .9em; border:1.5px solid var(--line); border-radius: 8px; background:var(--paper); color:var(--text); }
.login-form input:focus-visible{ outline:2px solid var(--gold); border-color: var(--gold); }
.form-error{ color: var(--red-dark); font-size:.85rem; background: rgba(195,30,58,.08); padding:.6em .8em; border-radius:8px; margin:0; }
.login-hint{ font-size:.78rem; color: var(--text-soft); text-align:center; margin: 0; }
.back-link{ display:block; margin-top: 22px; text-align:center; font-size:.85rem; color: var(--text-soft); text-decoration:none; }
.back-link:hover{ color: var(--red); }

/* ---------- app shell ---------- */
.app-shell{ display:grid; grid-template-columns: 250px 1fr; min-height:100vh; }
.sidebar{ background: var(--ink); color:#E9D6D0; display:flex; flex-direction:column; padding: 24px 20px; }
.sidebar-brand{ display:flex; align-items:center; gap:10px; margin-bottom: 30px; }
.sidebar-brand strong{ display:block; color:#fff; font-family: var(--font-display); }
.sidebar-brand small{ color:#C79AA3; font-size:.72rem; }
.sidebar-nav{ display:flex; flex-direction:column; gap:6px; flex:1; }
.nav-item{ text-align:left; background:transparent; border:none; color:#E9D6D0; font: inherit; font-weight:600; font-size:.92rem; padding:.75em 1em; border-radius:8px; cursor:pointer; }
.nav-item:hover{ background: rgba(255,255,255,.08); }
.nav-item.is-active{ background: var(--red); color:#fff; }
.sidebar-footer{ border-top:1px solid rgba(255,255,255,.15); padding-top:16px; display:flex; flex-direction:column; gap:10px; }
.session-user{ font-size:.8rem; color:#C79AA3; margin:0; word-break:break-all; }
.sidebar-link{ font-size:.85rem; color:#E9D6D0; text-decoration:none; }
.sidebar-link:hover{ color: var(--gold); }
.sidebar .btn-ghost{ color:#fff; border-color: rgba(255,255,255,.3); }
.sidebar .btn-ghost:hover{ border-color:#fff; color:var(--gold); }

.content{ padding: 36px 40px; max-width: 1100px; width:100%; }
.content-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 24px; gap: 16px; flex-wrap:wrap; }

.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

.admin-msg{ font-family: var(--font-mono); font-size:.85rem; padding: 10px 14px; border-radius:8px; background: var(--paper-alt); color: var(--text-soft); margin-bottom: 16px; }
.admin-msg.is-error{ background: rgba(195,30,58,.08); color: var(--red-dark); }
.admin-msg.is-success{ background: rgba(227,169,59,.18); color: var(--gold-dark); }
.admin-msg.is-warning{ background: rgba(224,140,0,.12); color: #8a5600; border:1px solid rgba(224,140,0,.35); }

.table-wrap{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:640px; }
.admin-table th{ text-align:left; background: var(--paper-alt); font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color: var(--text-soft); padding: 12px 16px; }
.admin-table td{ padding: 14px 16px; border-top:1px solid var(--line); vertical-align:middle; }
.admin-table tr:hover td{ background: var(--paper); }
.tag-mini{ display:inline-block; font-size:.7rem; font-weight:600; padding:2px 8px; border-radius:999px; background: var(--paper-alt); border:1px solid var(--line); color: var(--text-soft); margin-left:4px; }
.row-actions{ display:flex; gap:8px; justify-content:flex-end; }

.status-pill{ display:inline-block; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:999px; font-family: var(--font-mono); }
.status-pill.published{ background: rgba(24,140,84,.12); color:#1C7A4C; }
.status-pill.draft{ background: rgba(107,74,80,.14); color: var(--text-soft); }

/* ---------- modal ---------- */
.modal-backdrop{ position:fixed; inset:0; background: rgba(26,14,18,.6); display:flex; align-items:center; justify-content:center; padding: 20px; z-index:100; }
.modal{ background:#fff; border-radius:16px; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding: 20px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; }
.modal-close{ background:none; border:none; font-size:1.1rem; cursor:pointer; color: var(--text-soft); }
.modal-form{ padding: 22px 24px; display:flex; flex-direction:column; gap:14px; }
.modal-form label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:600; color: var(--ink-soft); }
.modal-form input, .modal-form select, .modal-form textarea{ font: inherit; padding:.6em .8em; border:1.5px solid var(--line); border-radius:8px; }
.modal-form input:focus-visible, .modal-form select:focus-visible, .modal-form textarea:focus-visible{ outline:2px solid var(--gold); border-color: var(--gold); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row.checks{ grid-template-columns: 1fr 1fr; align-items:center; }

.image-preview-wrap{ display:flex; align-items:center; gap:14px; }
.image-preview-wrap img{ width:96px; height:64px; object-fit:cover; border-radius:8px; border:1.5px solid var(--line); }
.form-note{ font-size:.78rem; color:var(--text-soft); margin:-8px 0 0; }
.checkbox{ flex-direction:row !important; align-items:center; gap:8px !important; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 6px; }

@media (max-width: 860px){
  .app-shell{ grid-template-columns: 1fr; }
  .sidebar{ flex-direction:row; align-items:center; flex-wrap:wrap; position:sticky; top:0; z-index:20; }
  .sidebar-brand{ margin-bottom:0; }
  .sidebar-nav{ flex-direction:row; flex-wrap:wrap; }
  .sidebar-footer{ border-top:none; flex-direction:row; margin-left:auto; }
  .content{ padding: 22px 16px; }
  .form-row{ grid-template-columns: 1fr; }
  .content-head h1{ font-size:1.5rem; }
}
@media (max-width: 480px){
  .login-card{ padding: 28px 22px; }
  .sidebar-link{ display:none; }
}

/* ---------- Galeria (backoffice) ---------- */
.content-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.back-link-inline{
  display:inline-block; background:none; border:none; padding:0; margin-bottom:6px; cursor:pointer;
  font: inherit; font-size:.82rem; font-weight:600; color: var(--text-soft);
}
.back-link-inline:hover{ color: var(--red); }

.gallery-admin-groups{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:18px; }
.gallery-admin-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:20px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:10px;
}
.gallery-admin-card.is-inactive{ opacity:.55; }
.gallery-admin-card-title{ font-family: var(--font-display); font-weight:700; font-size:1.1rem; margin:0; }
.gallery-admin-card-meta{ font-size:.82rem; color: var(--text-soft); margin:0; }
.gallery-admin-card-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:8px; }

.gallery-admin-subgroups{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:18px; }
.gallery-admin-sub-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.gallery-admin-sub-card.is-inactive{ opacity:.55; }
.gallery-admin-sub-cover{ aspect-ratio:4/3; background: var(--paper-alt); overflow:hidden; }
.gallery-admin-sub-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-admin-sub-cover.is-empty{ display:flex; align-items:center; justify-content:center; color: var(--text-soft); font-size:.78rem; }
.gallery-admin-sub-body{ padding:14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.gallery-admin-sub-date{ font-family: var(--font-mono); font-size:.7rem; font-weight:700; color: var(--gold-dark); }
.gallery-admin-sub-title{ font-family: var(--font-display); font-weight:700; font-size:1rem; margin:0; }
.gallery-admin-sub-count{ font-size:.8rem; color: var(--text-soft); }
.gallery-admin-sub-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:8px; }

.gallery-admin-photos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:16px; }
.gallery-admin-photo{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius: var(--radius-sm); overflow:hidden;
  cursor: grab; user-select:none;
}
.gallery-admin-photo[draggable="true"]:active{ cursor: grabbing; }
.gallery-admin-photo.is-dragging{ opacity:.4; }
.gallery-admin-photo.is-drop-target{ border-color: var(--red); box-shadow: 0 0 0 2px var(--red) inset; }
.gallery-admin-photo-img{ aspect-ratio:1/1; background: var(--paper-alt); }
.gallery-admin-photo-img img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.gallery-admin-photo-bar{ display:flex; align-items:center; justify-content:space-between; padding:6px 8px; background: var(--paper-alt); }
.gallery-admin-photo-order{ font-family: var(--font-mono); font-size:.68rem; color: var(--text-soft); }
.gallery-admin-photo-actions{ display:flex; gap:4px; }
.gallery-admin-photo-btn{
  border:none; background:none; cursor:pointer; font-size:.95rem; padding:2px 4px; border-radius:6px; line-height:1;
}
.gallery-admin-photo-btn:hover{ background: rgba(0,0,0,.06); }
.gallery-admin-photo-btn.is-cover{ color: var(--gold-dark); }
.gallery-admin-photo-btn.is-delete{ color: var(--red); }
.gallery-admin-photo.is-cover-photo{ border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.gallery-admin-photo-cover-badge{
  position:absolute; top:6px; left:6px; background: var(--gold); color:#fff; font-size:.65rem; font-weight:700;
  padding:2px 8px; border-radius:999px; font-family: var(--font-mono); z-index:1;
}
.gallery-admin-empty{ padding:40px 20px; text-align:center; color: var(--text-soft); font-size:.92rem; background:#fff; border:1px dashed var(--line); border-radius: var(--radius); }