/* Admin UI — the site's palettes (light and dark, see theme.js), phone-first, nothing fancy. */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; src: url('/fonts/cormorant-garamond-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; src: url('/fonts/montserrat-400.woff2') format('woff2'); }

:root {
  --bg: #f7f3ec;
  --surface: #fffdf8;
  --gold: #7a6130;
  --gold-soft: #c9a96e;
  --text: #2b231d;
  --text-soft: #6a5f54;
  --hair: rgba(156, 124, 62, 0.32);
  --line: rgba(43, 35, 29, 0.08);
  --btn-bg: #2b231d;
  --btn-text: #f7f3ec;
  --bar: rgba(247, 243, 236, 0.94);
  --ok: #2e6b34;
  --err: #8c2f2f;
  color-scheme: light;
}

/* The site's dark palette (src/styles/styles.css). */
:root[data-theme="dark"] {
  --bg: #0b0a08;
  --surface: #16130f;
  --gold: #c9a96e;
  --gold-soft: #e0c694;
  --text: #ece5d6;
  --text-soft: #a09686;
  --hair: rgba(201, 169, 110, 0.30);
  --line: rgba(236, 229, 214, 0.10);
  --btn-bg: #c9a96e;
  --btn-text: #120f0a;
  --bar: rgba(11, 10, 8, 0.94);
  --ok: #8fcf98;
  --err: #ef9a9a;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  padding-bottom: 150px; /* room for the publish bar, also with a message on its own line */
}

.top { position: relative; text-align: center; padding: 26px 16px 8px; }
.theme {
  position: absolute; top: 14px; right: 16px; width: 44px; height: 44px;
  border: 1px solid var(--hair); border-radius: 50%; background: transparent;
  color: var(--gold); font-size: 18px; cursor: pointer;
}
.top .spark { color: var(--gold-soft); font-size: 18px; }
.top h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: 30px; color: var(--gold); margin: 6px 0 0;
}
.top p {
  margin: 2px 0 0; font-size: 11px; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--text-soft);
}

.tabs { display: flex; gap: 8px; justify-content: center; padding: 18px 16px 6px; }
.tab {
  padding: 12px 26px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--hair); border-radius: 2px;
  color: var(--text-soft); cursor: pointer;
}
.tab.is-active { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }

main { max-width: 760px; margin: 0 auto; padding: 10px 16px; }
.hint { font-size: 14px; color: var(--text-soft); margin: 10px 2px 18px; }

/* Gallery */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.slot { background: var(--surface); border: 1px solid var(--hair); border-radius: 2px; padding: 8px; }
.slot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 2px; }
/* Two arrows side by side, "Ersetzen" full width under them: fits a 360 px phone. */
.slot .row { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; gap: 6px; }
.slot button {
  border: 1px solid var(--hair); background: transparent; border-radius: 2px;
  padding: 10px 12px; font-size: 14px; color: var(--text); cursor: pointer; min-width: 44px;
}
.slot .replace { grid-column: 1 / -1; grid-row: 2; font-size: 13px; letter-spacing: 0.06em; }
.slot .remove { grid-column: 1 / -1; grid-row: 3; font-size: 13px; color: var(--err); }
.slot button:disabled { opacity: 0.3; }
.slot { position: relative; }
.slot .num {
  position: absolute; top: 14px; left: 14px; min-width: 26px; padding: 3px 7px; border-radius: 13px;
  background: var(--bg); color: var(--text); font-size: 12px; text-align: center;
}
.divider {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 20px;
  margin: 26px 2px 12px; padding-bottom: 6px; border-bottom: 1px solid var(--hair);
}
.divider:first-child { margin-top: 6px; }
.add {
  min-height: 160px; border: 1px dashed var(--hair); border-radius: 2px; background: transparent;
  color: var(--gold); font: inherit; font-size: 15px; cursor: pointer;
}
.slot button:active { opacity: 0.6; }

/* Prices */
.pgroup { background: var(--surface); border: 1px solid var(--hair); border-radius: 2px; padding: 16px; margin-bottom: 18px; }
.pgroup h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: 22px; margin: 0 0 6px; color: var(--text);
}
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: none; }
/* On a phone the name takes its own line and the controls sit under it, right-aligned. */
.prow { flex-wrap: wrap; row-gap: 6px; }
.prow label { flex: 1 1 160px; font-size: 15px; }
.pctl { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.step {
  width: 44px; height: 44px; font-size: 20px; line-height: 1;
  border: 1px solid var(--hair); border-radius: 2px; background: transparent; color: var(--text); cursor: pointer;
}
.step:disabled { opacity: 0.35; cursor: default; }
.step:active { opacity: 0.6; }
.prow input {
  width: 84px; padding: 12px 10px; font-size: 17px; text-align: right;
  border: 1px solid var(--hair); border-radius: 2px; background: var(--bg); color: var(--text);
}
.prow .chf { font-size: 13px; color: var(--text-soft); width: 34px; }

/* Publish bar */
.bar {
  position: fixed; inset: auto 0 0 0; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--bar); border-top: 1px solid var(--hair);
  backdrop-filter: blur(10px);
  flex-wrap: wrap; /* a long message takes its own line above the button */
}
.status { flex: 1 1 220px; font-size: 14px; color: var(--text-soft); }
.status:empty { display: none; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }
.publish {
  margin-left: auto;
  padding: 16px 28px; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--btn-bg); color: var(--btn-text); border: none; border-radius: 2px; cursor: pointer;
}
.publish:disabled { opacity: 0.55; }
.publish:active { opacity: 0.75; }

/* Undo, logout and the publish details */
.tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; max-width: 760px; margin: 0 auto; padding: 4px 16px; }
.link {
  background: none; border: none; padding: 10px 0; font: inherit; font-size: 13px;
  color: var(--gold); text-decoration: underline; cursor: pointer;
}
.link:disabled { color: var(--text-soft); text-decoration: none; cursor: default; }
.last { flex: 1 1 100%; font-size: 13px; color: var(--text-soft); text-align: center; }
.last:empty { display: none; }
.log { max-width: 760px; margin: 0 auto 12px; padding: 0 16px; font-size: 12px; color: var(--text-soft); }
.log pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--hair); padding: 10px; }

/* Login */
.login { max-width: 360px; margin: 30px auto; padding: 0 16px; display: grid; gap: 14px; }
.login label { font-size: 14px; color: var(--text-soft); }
.login input {
  width: 100%; padding: 14px 12px; font-size: 17px;
  border: 1px solid var(--hair); border-radius: 2px; background: var(--surface); color: var(--text);
}
.login .publish { width: 100%; }