/* ==========================================================================
   熊讚寵物精緻旅館 — 內容管理工具 (admin-tool/public)

   Served by admin-tool/server.js from its own /public root, so it cannot link
   to the site's ../css/site.css. The :root block below is a VERBATIM copy of
   css/site.css's :root — same token names, same values — so the two stay in
   sync. If a token changes there, copy the line here.

   The xz-* components under "Copied from css/site.css" are 1:1 with the site's
   admin styles. A handful of COLOUR ASSIGNMENTS deliberately differ (each one
   flagged inline): the site uses its dimmest tokens for decorative "pending"
   text, but in this tool the same slots carry instructions the operator must
   actually read, so they were raised to clear WCAG AA. No new tokens, no
   hardcoded hexes.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --brand-900: #5C3D1A;  /* darkest ink, headings, admin header bg */
  --brand-800: #574018;  /* header bar, footer, buttons, step badges */
  --brand-700: #7A4E2D;  /* default link */
  --brand-600: #8B5E3C;  /* secondary buttons, eyebrow, labels */
  --brand-500: #C4884B;  /* link hover, accent rules, button hover */
  --brand-400: #E9B978;  /* active-nav underline, amber accent */
  --brand-300: #FFFFFF;  /* header sub-wordmark on dark */

  /* --- lines ------------------------------------------------------------ */
  --line: #DFCCB2;       /* card + table borders */
  --line-soft: #EBDFCC;  /* inner dividers */
  --band-line: #E0D2BE;  /* section band top/bottom */
  --dash: #CBB499;       /* placeholder dashed borders */

  /* --- surfaces --------------------------------------------------------- */
  --page: #F7F1E8;
  --card: #FCF8F1;
  --band: #EFE4D4;
  --band-2: #F2E9DC;     /* admin page bg */
  --chip: #EFE0CA;

  /* --- text ------------------------------------------------------------- */
  --text-body: #6B5240;
  --text-muted: #8B6B48;
  --text-ph: #B7A28A;    /* empty values */
  --text-hint: #9C8770;  /* hint text */
  --text-serif: #7A6653; /* serif placeholder lines */
  --eyebrow: #A07A54;

  /* --- on dark ---------------------------------------------------------- */
  --on-dark: #F7F1E8;
  --on-dark-2: #FBF4E8;
  --on-dark-nav: #F0E4D2;
  --on-dark-label: #C9AE8E;
  --on-dark-empty: #93887B;
  --on-dark-copy: #ECE3DA;
  --on-dark-body: #EADCC7;     /* footer base text */
  --on-dark-eyebrow: #D8AA74;  /* CONTENT ADMIN eyebrow on the admin bar */

  /* --- input surface ----------------------------------------------------- */
  --surface-input: #FFFFFF;    /* form fields + admin list rows */

  /* --- type ------------------------------------------------------------- */
  --serif: 'Noto Serif TC', serif;
  --sans: 'Noto Sans TC', Arial, sans-serif;
  --latin: 'Cormorant Garamond', serif;

  /* --- radius ----------------------------------------------------------- */
  --r-card: 14px;
  --r-panel: 16px;
  --r-ph: 18px;
  --r-input: 8px;
  --r-row: 10px;
  --r-pill: 999px;

  /* --- placeholder stripes ---------------------------------------------- */
  --stripe-a: #EFE4D4;
  --stripe-b: #E7D8C3;
  --stripe-lg: repeating-linear-gradient(135deg, var(--stripe-a) 0 14px, var(--stripe-b) 14px 28px);
  --stripe-sm: repeating-linear-gradient(135deg, var(--stripe-a) 0 12px, var(--stripe-b) 12px 24px);
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--band-2);
  color: var(--brand-900);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body[aria-busy="true"] { cursor: progress; }

img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; }

/* Every interactive control gets a visible focus ring — this tool is operated
   by keyboard on a laptop and by thumb on a phone. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
.xz-filebtn:focus-within {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
}

/* ==========================================================================
   Copied from css/site.css — 後台 shell
   ========================================================================== */

.xz-adminbar {
  background: var(--brand-900);
  color: var(--on-dark-nav);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 2px 12px rgba(51, 34, 15, .18);
}
.xz-adminbar__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* The site's admin bar uses assets/logo-badge.png. This tool is served from
   its own root and owns no image files, so the badge is drawn from tokens. */
.xz-adminbar__badge {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--page);
  color: var(--brand-900);
  font-family: var(--serif);
  font-weight: 900;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.xz-adminbar__lockup { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xz-adminbar__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .12em;
  color: var(--on-dark-2);
  line-height: 1.5;
}
.xz-adminbar__en {
  font-family: var(--latin);
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--on-dark-eyebrow);
  line-height: 1.5;
}

.xz-adminmain {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 20px 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.xz-notice {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-serif);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
}

.xz-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 24px;
}
@media (max-width: 560px) { .xz-panel { padding: 18px 14px; } }

.xz-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.xz-panel__head--tight { margin-bottom: 8px; }
.xz-panel__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--brand-900);
  line-height: 1.5;
}
/* DIVERGES from site.css (--eyebrow, 3.67:1 on --card). The count is real
   information here, so it uses --text-muted (4.65:1). */
.xz-panel__count { font-size: 13px; color: var(--text-muted); }
/* DIVERGES from site.css (--text-hint, 3.24:1). These hints are operating
   instructions, not decoration — --text-body is 6.77:1. */
.xz-panel__hint { margin: 0 0 16px; font-size: 13.5px; line-height: 1.85; color: var(--text-body); }

.xz-input,
.xz-textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface-input);
  font-size: 15px;              /* 15px, not the site's 14px: stops iOS Safari zooming on focus */
  color: var(--brand-900);
  font-family: var(--sans);
  min-width: 0;
  width: 100%;
  min-height: 46px;             /* touch target */
  line-height: 1.5;
}
.xz-textarea { line-height: 1.7; resize: vertical; min-height: 84px; }

.xz-admin-btn {
  padding: 12px 22px;
  border: none;
  border-radius: var(--r-input);
  background: var(--brand-800);
  color: var(--on-dark);
  font-size: 15px;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--sans);
  min-height: 46px;
  transition: background-color .3s ease, color .3s ease;
}
.xz-admin-btn:hover { background: var(--brand-500); color: var(--brand-900); }
.xz-admin-btn--start { align-self: flex-start; }
.xz-admin-btn[disabled] { opacity: .42; cursor: not-allowed; }
.xz-admin-btn[disabled]:hover { background: var(--brand-800); color: var(--on-dark); }

.xz-form-row { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 10px; align-items: end; }
.xz-form-row--two { grid-template-columns: 1fr auto; }
.xz-form-col { display: flex; flex-direction: column; gap: 10px; }
.xz-form-col--spaced { margin-top: 14px; }
@media (max-width: 720px) {
  .xz-form-row,
  .xz-form-row--two { grid-template-columns: 1fr; }
}

.xz-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

.xz-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-row);
  background: var(--surface-input);
}
/* DIVERGES from site.css (--brand-500, 3.00:1 at 18px on white). --brand-600
   keeps the same warm numeral at 5.58:1. */
.xz-row__no { font-family: var(--latin); font-size: 18px; color: var(--brand-600); min-width: 22px; text-align: center; }
.xz-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xz-row__title { font-size: 15px; font-weight: 500; color: var(--brand-800); line-height: 1.55; overflow-wrap: anywhere; }
/* DIVERGES from site.css (--eyebrow at 12px, 3.88:1). This line shows the
   video URL, which the operator has to be able to check — 13px --text-muted
   is 4.93:1. */
.xz-row__sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* .xz-row__del is the site's class name; .xz-rowbtn is the same shape for the
   neutral row actions (管理照片) so a non-destructive button is not wearing a
   class called "del". */
.xz-rowbtn,
.xz-row__del {
  padding: 10px 14px;
  min-height: 44px;
  min-width: 62px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: transparent;
  color: var(--brand-600);
  font-size: 14px;
  cursor: pointer;
  font-family: var(--sans);
  white-space: nowrap;
  transition: background-color .3s ease;
}
.xz-rowbtn:hover,
.xz-row__del:hover { background: var(--chip); }
/* --brand-800 on --chip is 7.52:1; --brand-600 would be 4.30:1. */
.xz-rowbtn--go { background: var(--chip); border-color: var(--dash); color: var(--brand-800); }
.xz-rowbtn--go:hover { background: var(--brand-800); color: var(--on-dark); }

/* DIVERGES from site.css (--text-ph, 2.32:1). The empty state tells the
   operator what to do next, so it must be readable: --text-muted, 4.65:1. */
.xz-empty {
  margin: 0;
  padding: 20px 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-muted);
  border: 1px dashed var(--line);
  border-radius: var(--r-row);
}

.xz-hidden { display: none !important; }

.xz-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Tool-only components
   ========================================================================== */

/* Skip link — hidden until focused. */
.xz-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 60;
  padding: 12px 18px;
  background: var(--page);
  color: var(--brand-900);
  border-radius: var(--r-input);
  text-decoration: none;
  transition: top .2s ease;
}
.xz-skip:focus { top: 12px; }

/* --- save state in the bar -------------------------------------------- */

.xz-adminbar__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.xz-savestate { font-size: 13px; color: var(--on-dark-label); white-space: nowrap; }

.xz-savebtn {
  min-height: 46px;
  padding: 11px 22px;
  border-radius: var(--r-input);
  border: 1px solid var(--on-dark-label);
  background: transparent;
  color: var(--on-dark-label);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.xz-savebtn.is-dirty {
  background: var(--brand-400);
  border-color: var(--brand-400);
  color: var(--brand-900);
  font-weight: 700;
}
.xz-savebtn[disabled] { cursor: not-allowed; }
.xz-savebtn:not(.is-dirty)[disabled] { opacity: .55; }

@media (max-width: 560px) {
  .xz-adminbar__inner { padding: 12px 14px; gap: 10px; }
  .xz-adminbar__name { font-size: 15px; letter-spacing: .06em; }
  .xz-adminbar__actions { width: 100%; margin-left: 0; justify-content: flex-end; }
}

/* --- tabs -------------------------------------------------------------- */

.xz-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.xz-tabs::-webkit-scrollbar { display: none; }

.xz-tab {
  flex-shrink: 0;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--brand-700);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.xz-tab:hover { border-color: var(--brand-500); }
.xz-tab.is-active {
  background: var(--brand-800);
  border-color: var(--brand-800);
  color: var(--on-dark);
  font-weight: 700;
}

/* --- fields ------------------------------------------------------------ */

.xz-field { display: flex; flex-direction: column; gap: 6px; }
.xz-label { font-size: 13.5px; color: var(--brand-600); letter-spacing: .04em; line-height: 1.6; }
.xz-help { font-size: 13px; color: var(--text-body); line-height: 1.75; margin: 0; }

.xz-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.xz-sechead {
  margin: 26px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-800);
  line-height: 1.6;
}

/* --- row buttons (reorder / delete) ------------------------------------ */

.xz-rowbtns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.xz-iconbtn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface-input);
  color: var(--brand-600);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--sans);
  transition: background-color .3s ease;
}
.xz-iconbtn:hover { background: var(--chip); }
.xz-iconbtn[disabled] { opacity: .34; cursor: not-allowed; }
.xz-iconbtn[disabled]:hover { background: var(--surface-input); }

/* --- thumbnails in list rows ------------------------------------------- */

.xz-thumb {
  width: 76px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--stripe-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.xz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xz-thumb img.is-broken { display: none; }
.xz-thumb__none { font-size: 12px; color: var(--text-muted); }

@media (max-width: 560px) {
  .xz-row { flex-wrap: wrap; }
  .xz-row__main { flex-basis: 100%; order: 3; }
  .xz-rowbtns { order: 4; margin-left: auto; }
}

/* --- album detail ------------------------------------------------------ */

.xz-back {
  align-self: flex-start;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--surface-input);
  color: var(--brand-700);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  transition: background-color .3s ease;
}
.xz-back:hover { background: var(--chip); }

.xz-detail { display: flex; flex-direction: column; gap: 16px; }

.xz-uploader {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 2px dashed var(--dash);
  border-radius: var(--r-card);
  background: var(--page);
}

/* The file input lives inside the label, so the label text is its accessible
   name and a tap anywhere on the button opens the picker. */
.xz-filebtn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--r-input);
  background: var(--brand-800);
  color: var(--on-dark);
  font-size: 15px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.xz-filebtn:hover { background: var(--brand-500); color: var(--brand-900); }
.xz-filebtn.is-off { opacity: .42; cursor: not-allowed; }
.xz-filebtn.is-off:hover { background: var(--brand-800); color: var(--on-dark); }

.xz-progress { display: flex; flex-direction: column; gap: 8px; }
.xz-progress__track {
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--chip);
  overflow: hidden;
}
.xz-progress__bar {
  height: 100%;
  width: 0;
  background: var(--brand-500);
  transition: width .2s ease;
}
.xz-progress__text { font-size: 14px; color: var(--text-body); line-height: 1.7; }

/* --- photo grid -------------------------------------------------------- */

.xz-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.xz-photos:empty { display: none; }

.xz-photo {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
}
.xz-photo.is-cover { border-color: var(--brand-500); }

.xz-photo__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--stripe-sm);
}
.xz-photo__img.is-broken { object-fit: contain; }

.xz-photo__badge,
.xz-photo__flag {
  position: absolute;
  top: 8px;
  font-size: 12px;
  line-height: 1.6;
  padding: 1px 9px;
  border-radius: var(--r-pill);
}
.xz-photo__badge { left: 8px; background: var(--brand-900); color: var(--on-dark); font-family: var(--latin); font-size: 14px; }
.xz-photo__flag { right: 8px; background: var(--brand-400); color: var(--brand-900); font-weight: 700; }

.xz-photo__bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-input);
}
.xz-photo__bar button {
  min-height: 44px;
  border: none;
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
  background: var(--surface-input);
  color: var(--brand-600);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s ease;
}
.xz-photo__bar button:nth-child(1),
.xz-photo__bar button:nth-child(2) { border-top: none; }
.xz-photo__bar button:nth-child(odd) { border-left: none; }
.xz-photo__bar button:hover { background: var(--chip); }
.xz-photo__bar button[disabled] { opacity: .34; cursor: not-allowed; }
.xz-photo__bar button[disabled]:hover { background: var(--surface-input); }

/* --- FAQ editor -------------------------------------------------------- */

.xz-fcard {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--surface-input);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.xz-fcard__head { display: flex; align-items: center; gap: 12px; }
.xz-fcard__no {
  font-family: var(--latin);
  font-size: 18px;
  color: var(--brand-600);
  min-width: 22px;
}
.xz-fcard__head .xz-rowbtns { margin-left: auto; }

/* --- toast ------------------------------------------------------------- */

.xz-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 16px);
  z-index: 50;
  max-width: min(560px, calc(100vw - 32px));
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--brand-800);
  color: var(--on-dark);
  font-size: 14.5px;
  line-height: 1.7;
  box-shadow: 0 8px 24px rgba(51, 34, 15, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  white-space: pre-line;
}
.xz-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.xz-toast--err {
  background: var(--brand-900);
  border-left: 5px solid var(--brand-400);
}

/* --- boot / auth overlays --------------------------------------------- */

.xz-cover {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--brand-900);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.xz-cover__msg { color: var(--on-dark); font-family: var(--serif); font-size: 18px; letter-spacing: .08em; }

.xz-authbox {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.xz-authbox__title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--brand-900);
  line-height: 1.5;
}
.xz-authbox__msg { font-size: 14px; line-height: 1.85; color: var(--text-body); margin: 0; }
.xz-authbox__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.xz-authbox__actions .xz-admin-btn { flex: 1; }