/* Painel de administração — mesmo tema do site */

:root {
  --bg: #070b09;
  --bg-2: #0b110e;
  --bg-3: #101713;
  --panel: #0d1410;
  --border: rgba(0, 255, 157, 0.14);
  --border-strong: rgba(0, 255, 157, 0.35);
  --text: #d7e2dc;
  --text-dim: #8fa39a;
  --accent: #00ff9d;
  --violet: #7b6cff;
  --amber: #ffc857;
  --red: #ff5c5c;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  min-height: 100vh;
}

.mono { font-family: var(--mono); }
.accent { color: var(--accent); }
.hidden { display: none !important; }
::selection { background: rgba(0, 255, 157, 0.25); }

/* ---------- botões / inputs base ---------- */

.btn {
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 600;
  color: #04140c;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all .2s;
}
.btn:hover { box-shadow: 0 0 16px rgba(0, 255, 157, 0.4); }
.btn-sm { padding: 6px 14px; font-size: .76rem; }

input, textarea, select {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  transition: border-color .2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--border-strong); }
textarea { resize: vertical; }
input[type="file"] { padding: 6px; font-size: .78rem; color: var(--text-dim); }

label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-dim);
}

code { font-family: var(--mono); color: var(--accent); font-size: .9em; }

.hint { color: var(--text-dim); font-size: .85rem; margin-bottom: 1.2rem; }

.form-error { color: var(--red); font-size: .8rem; min-height: 1.2em; margin-top: .6rem; }
.save-status { font-size: .8rem; }
.save-status.ok { color: var(--accent); }
.save-status.err { color: var(--red); }

/* ---------- auth ---------- */

.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-image: radial-gradient(ellipse 70% 45% at 50% -5%, rgba(0, 255, 157, 0.07), transparent);
}

.auth-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.2rem;
  box-shadow: 0 0 50px rgba(0, 255, 157, 0.06);
}

.auth-logo { font-size: .85rem; color: var(--text-dim); margin-bottom: 1.6rem; }

.auth-card h1 { font-size: 1.25rem; margin-bottom: .6rem; }
.auth-card .hint { font-size: .8rem; }
.auth-card form { display: flex; flex-direction: column; gap: 1rem; }
.auth-card .btn { margin-top: .4rem; }

.back-link {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: .78rem;
  color: var(--text-dim);
  text-decoration: none;
}
.back-link:hover { color: var(--accent); }

/* ---------- dashboard ---------- */

.dash { display: flex; min-height: 100vh; }

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: sticky;
  top: 0;
  height: 100vh;
}

.side-logo { font-size: .82rem; color: var(--text-dim); padding: 0 .6rem; }

.sidebar nav { display: flex; flex-direction: column; gap: .25rem; }

.side-btn {
  font-family: var(--mono);
  font-size: .84rem;
  text-align: left;
  color: var(--text-dim);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all .15s;
}
.side-btn:hover { color: var(--text); background: var(--bg-3); }
.side-btn.active { color: var(--accent); background: rgba(0, 255, 157, 0.07); }

.msg-badge {
  display: inline-block;
  background: var(--accent);
  color: #04140c;
  font-size: .66rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
}

.side-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 0 .6rem;
}

.side-link {
  font-size: .78rem;
  color: var(--text-dim);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.side-link:hover { color: var(--accent); }
.side-link.danger:hover { color: var(--red); }

.content { flex-grow: 1; padding: 2.2rem clamp(1.2rem, 4vw, 3rem); max-width: 980px; }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

.panel-head h1 { font-size: 1.45rem; }

/* ---------- listas de itens ---------- */

.item-list { display: flex; flex-direction: column; gap: .8rem; }

.item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.item-info { flex-grow: 1; min-width: 200px; }
.item-info h3 { font-size: .98rem; font-weight: 600; }
.item-info p { font-size: .8rem; color: var(--text-dim); }

.badge {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
}
.badge.completed { color: var(--accent); background: rgba(0,255,157,.1); border: 1px solid rgba(0,255,157,.35); }
.badge.in-progress { color: var(--amber); background: rgba(255,200,87,.08); border: 1px solid rgba(255,200,87,.35); }
.badge.planned { color: var(--violet); background: rgba(123,108,255,.1); border: 1px solid rgba(123,108,255,.4); }

.item-actions { display: flex; gap: .4rem; }

.icon-btn {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--text-dim);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all .15s;
}
.icon-btn:hover { color: var(--accent); border-color: var(--border-strong); }
.icon-btn.danger:hover { color: var(--red); border-color: var(--red); }

/* mensagens */

.msg-item { flex-direction: column; align-items: stretch; gap: .5rem; }
.msg-item.unread { border-color: var(--border-strong); }
.msg-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.msg-head .who { font-weight: 600; font-size: .92rem; }
.msg-head .who span { color: var(--text-dim); font-weight: 400; font-size: .8rem; }
.msg-date { font-family: var(--mono); font-size: .72rem; color: var(--text-dim); }
.msg-body { font-size: .9rem; color: var(--text-dim); white-space: pre-wrap; }
.msg-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- formulários ---------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.6rem;
}

.form-grid.narrow { max-width: 460px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 1rem; }

fieldset {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
legend { font-size: .78rem; color: var(--text-dim); padding: 0 .5rem; }

.upload-row { display: flex; align-items: center; gap: .8rem; margin-top: .4rem; flex-wrap: wrap; }
.upload-row input[type="file"] { width: auto; flex-grow: 1; }
.upload-status { font-size: .74rem; color: var(--accent); }

/* galeria de imagens no editor de projeto */
.gallery-list { display: flex; flex-wrap: wrap; gap: .6rem; }

.gallery-thumb { position: relative; }

.gallery-thumb img {
  width: 96px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: block;
}

.gallery-thumb button {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  font-size: .6rem;
  line-height: 1;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}
.gallery-thumb button:hover { color: var(--red); border-color: var(--red); }

.link-rows { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }

.link-row { display: flex; gap: .6rem; align-items: center; }
.link-row input { flex: 1; }
.link-row input.link-label { flex: 0 0 160px; }

/* ---------- editor modal ---------- */

.editor {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 7, 5, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 1rem;
  overflow-y: auto;
}

.editor-box {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  width: min(760px, 100%);
  padding: 1.8rem;
  margin-bottom: 3vh;
}

.editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.4rem;
}
.editor-head h2 { font-size: 1.2rem; }

.editor .form-grid { border: none; padding: 0; background: none; }

/* ---------- responsivo ---------- */

@media (max-width: 760px) {
  .dash { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: column;
  }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .side-footer { flex-direction: row; margin-top: .6rem; }
  .form-grid { grid-template-columns: 1fr; }
  .link-row { flex-wrap: wrap; }
  .link-row input.link-label { flex: 1 1 100%; }
}