@charset "UTF-8";
/*
 * Admin stylesheet — deliberately plain. The people using this edit text a few
 * times a month; clarity and large touch targets matter more than styling.
 */

:root {
  --admin-red: #ce202f;
  --admin-red-dark: #a5121f;
  --admin-text: #222;
  --admin-muted: #6b7280;
  --admin-border: #d8dade;
  --admin-bg: #f4f5f7;
  --admin-panel: #fff;
  --admin-ok: #1f7a3d;
  --admin-warn: #8a6100;
  --admin-err: #b3261e;
}

*, *::before, *::after { box-sizing: border-box; }

body.admin {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--admin-text);
  background: var(--admin-bg);
  /* Column layout so the footer sits at the bottom on short pages instead of
     floating up under the content. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--admin-red); }

:focus-visible { outline: 2px solid var(--admin-red); outline-offset: 2px; }

/* ---------- Header ---------- */

.admin-header { background: #1f2430; color: #fff; }

.admin-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
}

.admin-brand { color: #fff; font-weight: 700; font-size: 18px; text-decoration: none; }
.admin-brand span { color: var(--admin-red); }

.admin-header-right { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.admin-view-site, .admin-user { color: #c8cbd4; text-decoration: none; }

/* ---------- Nav ---------- */

.admin-nav { background: #2b3140; }

.admin-nav ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 8px;
  list-style: none;
}

.admin-nav a {
  display: block;
  padding: 12px;
  color: #dfe1e6;
  font-size: 14px;
  text-decoration: none;
}
.admin-nav a:hover { background: #3a4152; color: #fff; }
.admin-nav .nav-right { margin-left: auto; }

/* ---------- Layout ---------- */

.admin-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 16px 60px; flex: 1 0 auto; }
.admin-footer { max-width: 1200px; margin: 0 auto; padding: 0 16px 40px; color: var(--admin-muted); font-size: 13px; }

h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 19px; margin: 28px 0 12px; }
h3 { font-size: 16px; margin: 0 0 10px; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.page-head h1 { margin: 0; }

.muted { color: var(--admin-muted); }
.help { margin: 4px 0 0; font-size: 13px; color: var(--admin-muted); }
.empty { padding: 24px; background: var(--admin-panel); border: 1px dashed var(--admin-border); color: var(--admin-muted); }
.nowrap { white-space: nowrap; }

/* ---------- Alerts ---------- */

.alert { padding: 12px 16px; margin-bottom: 16px; border-left: 4px solid; border-radius: 3px; }
.alert-success { background: #e8f5ec; border-color: var(--admin-ok); color: #14532d; }
.alert-error   { background: #fdecea; border-color: var(--admin-err); color: #7f1d1d; }
.alert-warning { background: #fff6e5; border-color: var(--admin-warn); color: #713f12; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 9px 16px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  color: var(--admin-text);
  font-size: 14px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #eef0f3; }

.btn-primary { background: var(--admin-red); border-color: var(--admin-red); color: #fff; }
.btn-primary:hover { background: var(--admin-red-dark); }

.btn-danger { background: var(--admin-err); border-color: var(--admin-err); color: #fff; }
.btn-danger:hover { background: #8c1c16; }

.btn-small { padding: 5px 10px; font-size: 13px; }
.btn-block { display: block; width: 100%; }
.btn-link { background: none; border: 0; color: #c8cbd4; text-decoration: underline; padding: 0; }

/* ---------- Forms ---------- */

.form { background: var(--admin-panel); padding: 20px; border: 1px solid var(--admin-border); border-radius: 4px; }

fieldset { margin: 0 0 24px; padding: 16px; border: 1px solid var(--admin-border); border-radius: 4px; }
legend { padding: 0 8px; font-weight: 600; color: var(--admin-muted); font-size: 14px; text-transform: uppercase; }

.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 14px; }

input[type='text'], input[type='email'], input[type='password'],
input[type='number'], input[type='file'], select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--admin-text);
}

input:disabled { background: #f0f1f3; color: var(--admin-muted); }
textarea { resize: vertical; }

.field-check { display: flex; align-items: center; gap: 8px; }
.field-check input { width: auto; }
.field-check label { margin: 0; font-weight: normal; }

.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 20px; }

.lang-block { padding: 12px 0; border-top: 1px solid var(--admin-border); }
.lang-block:first-of-type { border-top: 0; }
.lang-block h3 { color: var(--admin-red); font-size: 14px; letter-spacing: 0.05em; }

.lang-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.lang-tag {
  flex: 0 0 34px;
  padding: 9px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--admin-muted);
}

.slug-input { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.slug-prefix, .slug-suffix { font-size: 13px; color: var(--admin-muted); }
.slug-input input { flex: 1 1 200px; width: auto; }

.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 4px 0 0; }
.inline-form input[type='text'] { width: auto; flex: 1 1 auto; font-size: 13px; padding: 5px 8px; }

.inline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: end; }

.danger-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--admin-border); }

.seo-details { margin-top: 12px; }
.seo-details summary { cursor: pointer; font-size: 14px; color: var(--admin-muted); padding: 6px 0; }

/* ---------- Editor ---------- */

/*
 * Quill needs an explicit height or it collapses to a single line.
 *
 * `overflow: auto` matters even though Quill scrolls its own .ql-editor: if the
 * editor script ever fails to load, this element still holds the raw HTML, and
 * without it that content escapes the 320px box and lands on top of the fields
 * below instead of scrolling inside it.
 */
.editor {
  height: 420px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--admin-border);
  border-radius: 0 0 4px 4px;
}

/*
 * Two classes, deliberately. quill.snow.css loads after this file and sets
 * `.ql-container { height: 100% }`, which at equal specificity wins and makes
 * the editor auto-height — so a long page pushes the rest of the form far down
 * the screen. `.editor.ql-container` outranks it and restores the fixed,
 * internally scrolling box.
 */
.editor.ql-container {
  height: 420px;
  border-radius: 0 0 4px 4px;
}

.ql-toolbar { border-radius: 4px 4px 0 0; }
.ql-container { font-family: inherit; font-size: 15px; }

/* ---------- Tables ---------- */

/* Wide tables scroll inside their own box rather than widening the page. */
.table-scroll { overflow-x: auto; background: var(--admin-panel); border: 1px solid var(--admin-border); border-radius: 4px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--admin-border); vertical-align: middle; }
.data-table th { background: #eef0f3; font-size: 13px; text-transform: uppercase; color: var(--admin-muted); }
.data-table tr:last-child td { border-bottom: 0; }

.col-actions { text-align: right; white-space: nowrap; }
.col-thumb { width: 64px; }
.col-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.col-sort { width: 70px; }

.truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.badge-on { background: #e8f5ec; color: var(--admin-ok); }
.badge-off { background: #f0f1f3; color: var(--admin-muted); }

/* ---------- Dashboard ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 28px; }

.stat {
  display: block;
  padding: 20px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--admin-text);
}
.stat:hover { border-color: var(--admin-red); }
.stat-value { display: block; font-size: 30px; font-weight: 700; color: var(--admin-red); }
.stat-label { display: block; font-size: 13px; color: var(--admin-muted); }

/* ---------- Media ---------- */

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.tabs a {
  padding: 8px 14px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--admin-text);
  font-size: 14px;
}
.tabs a.active { background: var(--admin-red); border-color: var(--admin-red); color: #fff; }

.upload-form { margin-bottom: 24px; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }

.media-item {
  padding: 12px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  font-size: 13px;
}
.media-item img { width: 100%; height: 120px; object-fit: contain; background: #fafafa; }
.media-file {
  display: flex; align-items: center; justify-content: center;
  height: 120px; background: #fafafa; color: var(--admin-muted); font-weight: 700;
}
.media-name { margin: 8px 0 2px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-url { margin: 6px 0; }

/* ---------- Login ---------- */

/* The login screen has no navigation, so the card is centred in the space
   between header and footer rather than pinned to the top of a mostly empty
   page. */
.login-page .admin-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 24px;
}

.login-box {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 28px;
  background: var(--admin-panel);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
}

.login-box h1 { font-size: 20px; text-align: center; margin-bottom: 20px; }
.login-box label { display: block; margin: 16px 0 6px; font-weight: 600; font-size: 14px; }
.login-box input { margin-bottom: 2px; }

/* Without this the submit button sits flush against the password field. */
.login-box .btn { margin-top: 24px; }

.login-box .help { margin-bottom: 4px; }
.login-box .alert { margin-bottom: 18px; }

/* ---------- Misc ---------- */

.steps { padding-left: 20px; }
.steps li { margin-bottom: 10px; }

.secret, .secret-uri {
  display: inline-block;
  padding: 8px 12px;
  background: #eef0f3;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.1em;
  word-break: break-all;
}
.secret-uri { font-size: 12px; letter-spacing: 0; }

.json {
  max-width: 460px;
  max-height: 240px;
  overflow: auto;
  padding: 8px;
  background: #f7f7f8;
  border-radius: 4px;
  font-size: 12px;
}

.pagination { display: flex; align-items: center; gap: 16px; margin-top: 16px; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

@media (max-width: 640px) {
  .admin-nav a { padding: 10px 8px; font-size: 13px; }
  .admin-nav .nav-right { margin-left: 0; }
  .form { padding: 14px; }
  fieldset { padding: 12px 10px; }
}