/* ── Overrides on top of water.css ─────────────────────────────── */

body {
  padding: 2rem 2.5rem;
  max-width: 860px;
}

/* ── Header h1 ─────────────────────────────────────────────────── */
h1 {
  margin-bottom: 0.5rem;
}

/* ── Nav ───────────────────────────────────────────────────────── */
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-bottom: 0.25rem;
}

nav a,
.nav-logout {
  color: var(--links);
  margin-right: 1.5rem;
  font-size: 1rem;
  text-decoration: none;
}

nav a:hover,
.nav-logout:hover {
  text-decoration: underline;
}

/* Logout as plain link */
.nav-logout {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  display: inline;
}
.nav-logout:hover { background: none; }

/* ── Flash messages ─────────────────────────────────────────────── */
.flash-error {
  background: #f8d7da;
  color: #721c24;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: 1px solid #f5c6cb;
  margin-bottom: 1rem;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-danger { background: #dc3545; border-color: #dc3545; color: #fff; }
.btn-danger:hover { background: #c82333; border-color: #c82333; }
.btn-sm { padding: 0.2rem 0.6rem; font-size: 0.8rem; }

.btn-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1.25rem 0;
}

/* ── Big borderless title input (post/page editor) ──────────────── */
.title-input {
  margin-top: 2rem;
  font-size: 1.6rem;
  font-weight: bold;
  border: none;
  border-bottom: 2px dashed var(--border);
  border-radius: 0;
  padding: 0.2rem 0;
  background: transparent;
  width: 100%;
  outline: none;
  box-shadow: none;
  margin-bottom: 1.25rem;
}
.title-input:focus {
  border-bottom-color: var(--links);
  box-shadow: none;
}

/* ── Menu editor rows ───────────────────────────────────────────── */
.menu-item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.menu-item input { margin: 0; flex: 1; }
.drag-handle { cursor: grab; color: var(--text-muted); user-select: none; font-size: 1.1rem; }

/* ── Details/summary (Options panel) ───────────────────────────── */
details summary {
  background: var(--background-alt);
  color: var(--text-muted);
  border: none;
}
details summary:hover { background: var(--background-alt); }

/* ── EasyMDE ────────────────────────────────────────────────────── */
.EasyMDEContainer { width: 100%; }
.CodeMirror { border-radius: 4px; }

/* ── Tables ─────────────────────────────────────────────────────── */
table { width: 100%; }
td form { margin: 0; }

/* ── Full-width form fields ─────────────────────────────────────── */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([style]),
select:not([style]),
textarea {
  width: 100%;
  box-sizing: border-box;
}

/* ── Label / hint spacing ───────────────────────────────────────── */
small {
  display: block;
  margin-bottom: 0.5rem;
}

label {
  margin-top: 1rem;
}

small {
  color: var(--text-muted);
}

/* ── Toast notifications ─────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  padding: 0.9rem 1.4rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  cursor: pointer;
  max-width: 380px;
  animation: toast-in 0.25s ease;
}
.toast-success { background: #2d8a4e; }
.toast-error   { background: #c0392b; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast.toast-out {
  animation: toast-out 0.35s ease forwards;
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-12px); }
}

/* ── Theme picker ───────────────────────────────────────────────── */
.theme-picker {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.theme-option {
  display: flex;
  cursor: pointer;
}
.theme-option input[type="radio"] {
  display: none;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--border);
  border-radius: 6px;
  min-width: 140px;
}
.theme-card small {
  display: block;
  margin: 0;
  color: var(--text-muted);
}
.theme-option input[type="radio"]:checked + .theme-card {
  border-color: var(--links);
  background: color-mix(in srgb, var(--links) 8%, transparent);
}