/* static/style.css - adaptado de sty.css para Secret Santa app
   (APENAS paleta de cores alterada para versão fundo claro usando as cores fornecidas)
*/

/* Font-face: se tiveres os ficheiros locais podes apontar para eles; caso contrário, o browser usará fallback */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: local('Ubuntu Light'), local('Ubuntu-Light');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu Regular'), local('Ubuntu-Regular');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold');
}

/* Paleta principal (usando os HEX/HSL fornecidos) */
:root{
  /* base palette (HEX) */
  --eerie-black: #191919ff;
  --blue-munsell: #2495A5ff;
  --white: #FFFFFFff;
  --oxford-blue: #131835ff;
  --moonstone: #38BACCff;

  /* alternativa HSL (comentada para referência)
     --eerie-black: hsla(0, 0%, 10%, 1);
     --blue-munsell: hsla(187, 64%, 39%, 1);
     --white: hsla(0, 0%, 100%, 1);
     --oxford-blue: hsla(231, 47%, 14%, 1);
     --moonstone: hsla(187, 59%, 51%, 1);
  */

  /* derived tokens for light background theme */
  --bg: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(247,250,251,1) 100%);
  --card: linear-gradient(180deg, rgba(255,255,255,1), rgba(249,252,253,0.98));
  --muted: rgba(19,24,53,0.55);
  --text: var(--eerie-black);
  --accent: var(--blue-munsell);
  --gold: #ffd166; /* destaque */
  --danger: #f4555d;

  --glass: rgba(19,24,53,0.04);
  --glass-2: rgba(19,24,53,0.02);

  /* soft shadow tuned for light background */
  --shadow: 0 10px 30px rgba(19,24,53,0.06);
  --radius: 12px;
}

/* Reset mínimo */
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{height:100%;margin:0;font-family:Ubuntu, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
}
a{color:var(--accent);text-decoration:none}

/* Page layout */
.page{min-height:100vh;display:flex;flex-direction:column;padding:24px;gap:24px;align-items:center}
.topbar{width:100%;max-width:1200px;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:transparent}
.brand{display:flex;gap:12px;align-items:center}
.brand h1{font-size:20px;margin:0;color:var(--text);font-weight:700}
.brand .subtitle{font-size:12px;color:var(--muted);margin-top:2px}

/* Top actions */
.top-actions{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:10px;border:0;cursor:pointer;font-weight:700;font-size:13px;text-transform:none}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(19,24,53,0.06)}
.btn.primary{background:linear-gradient(180deg,var(--accent), var(--blue-munsell));color:#052028;border:0;box-shadow:0 6px 18px rgba(36,149,165,0.12)}
.btn.danger{background:var(--danger);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Hero */
.hero{width:100%;max-width:1200px;display:flex;gap:24px;align-items:stretch}
.hero-left{flex:1;min-width:280px}
.hero-right{width:320px;display:flex;align-items:center;justify-content:center}
.illustration{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow);
  /* usa dourado suave para ilustração — mantive como destaque separado da paleta principal */
  background: linear-gradient(180deg, rgba(255,242,204,0.95), rgba(255,209,168,0.95));
}

/* Card */
.card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);color:var(--text)}
.status{max-width:760px}
.status-loading{color:var(--muted);padding:20px 0;font-size:15px}
.register-area .form{display:flex;flex-direction:column;gap:10px}
.register-area label{font-size:13px;color:var(--muted)}
.register-area input[type="text"], .register-area input[type="password"], .register-area input[type="email"]{
  background:transparent;border:1px solid rgba(19,24,53,0.06);padding:12px;border-radius:8px;color:var(--text);font-size:15px}
.register-area input::placeholder{color:rgba(25,25,25,0.35)}
.hint{font-size:13px;color:var(--muted);margin-top:8px}

/* Registered card */
.registered{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
/* registado: use um tom derivado da paleta (moonstone → blue-munsell) para ícone */
.registered-icon{width:56px;height:56px;border-radius:50%;background: linear-gradient(135deg, var(--moonstone), var(--blue-munsell));display:flex;align-items:center;justify-content:center}
.registered strong{color:var(--text);font-size:18px}
.registered .muted{color:var(--muted)}

/* Footer */
.footer{width:100%;max-width:1200px;padding:18px;border-radius:12px;background:linear-gradient(180deg,transparent, rgba(19,24,53,0.02));text-align:center;color:var(--muted);margin-top:12px}

/* Dashboard table */
.registrants-table{width:100%;border-collapse:collapse;background:transparent;margin-top:8px}
.registrants-table thead th{font-size:13px;text-align:left;padding:12px 10px;color:var(--muted);border-bottom:1px solid rgba(19,24,53,0.04)}
.registrants-table tbody tr{border-bottom:1px solid rgba(19,24,53,0.03)}
/* hover usa uma leve tonalidade do accent */
.registrants-table tbody tr:hover{background:rgba(36,149,165,0.03)}
.registrants-table td{padding:12px 10px;vertical-align:top;color:var(--text);font-size:14px}
.registrants-table td .muted{color:var(--muted);font-size:13px}

/* monospaced chip for ids */
.chip{
  display:inline-block;padding:6px 10px;border-radius:8px;background:var(--glass);color:var(--muted);font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;font-size:13px;
  max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

/* mask small */
.mask-small{font-family:ui-monospace, Menlo, Monaco, monospace;color:var(--muted)}

/* Form actions area */
.actions{display:flex;gap:10px;align-items:center}

/* utility muted */
.muted{color:var(--muted);font-size:13px}

/* small responsive helpers */
@media (max-width: 900px){
  .hero{flex-direction:column}
  .hero-right{width:100%}
  .topbar{padding:8px}
  .btn{height:42px;padding:0 12px}
  .registrants-table td{font-size:13px;padding:10px 8px}
  .chip{max-width:160px}
}

/* Admin controls top */
.card > .controls{display:flex;gap:8px;justify-content:flex-end;margin-bottom:8px}
.btn.primary.red{background:linear-gradient(180deg,#ff6b64,#f4555d);color:#fff;box-shadow:0 8px 20px rgba(244,85,93,0.14)}

/* small messages and errors */
.alert{padding:12px;border-radius:8px;margin:8px 0}
.alert.info{background:rgba(36,149,165,0.06);color:var(--accent)}
.alert.warn{background:rgba(255,209,102,0.06);color:var(--gold)}
.alert.error{background:rgba(244,85,93,0.06);color:var(--danger)}

/* inputs focus states */
input:focus, textarea:focus, select:focus{outline:0;border-color:rgba(19,24,53,0.12);box-shadow:0 6px 18px rgba(19,24,53,0.06)}

/* minimal table responsiveness for tiny screens */
@media (max-width:520px){
  .registrants-table thead{display:none}
  .registrants-table tbody tr{display:block;padding:10px 0;border-bottom:1px solid rgba(19,24,53,0.03)}
  .registrants-table tbody td{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
  .registrants-table tbody td:first-child{font-weight:700}
}

/* small helper classes used in templates */
.center{text-align:center}
.flex{display:flex}
.space-between{justify-content:space-between}
.gap-small{gap:8px}

/* mask for long strings when showing in list (client side) */
.masked {
  letter-spacing: 0.6px;
  -webkit-letter-spacing: 0.6px;
  opacity: 0.95;
}

/* subtle glass card for main content */
.card-glass{
  background: linear-gradient(180deg, rgba(19,24,53,0.02), rgba(19,24,53,0.01));
  border-radius:14px;
  padding:18px;
  box-shadow: 0 10px 30px rgba(19,24,53,0.05);
  border:1px solid rgba(19,24,53,0.03);
}

/* small accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* Header centralizado e botão Admin/Logout adaptativo */
.topbar-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand-logo {
  height: 64px;
  max-width: 90%;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  background: transparent;
}

.topbar-centered .brand-text { text-align: center; }

.topbar-centered .top-actions { margin-top: 4px; display:flex; justify-content:center; width:100%; }

.admin-btn {
  min-width: 120px;
  max-width: 320px;
  width: auto;
}

/* full-width on small screens */
@media (max-width: 520px) {
  .admin-btn { width: 100%; padding: 12px 16px; box-sizing: border-box; }
  .brand-logo { height: 52px; }
}

/* Canvas de fundo (atrás de todo o conteúdo) */
#bg-canvas {
  position: fixed;
  inset: 0;               /* top/right/bottom/left = 0 */
  width: 100vw;
  height: 100vh;
  z-index: 0;             /* abaixo do conteúdo; ajuste se necessário */
  pointer-events: none;   /* não interfere com cliques */
  opacity: 0.95;
  mix-blend-mode: normal; /* podes experimentar "screen" ou "soft-light" */
}

/* Certifica-te que o conteúdo tem z-index maior (ex.: .page) */
.page { position: relative; z-index: 1; }