/* ============================================================
   DTM Back Office — SaaS admin demo
   The page restaurant/hotel owners will use to run their site,
   bio page, integrations, and bookings — all from one tool.
   ============================================================ */

:root {
  --ad-bg:      #F7F5F0;
  --ad-bg-alt:  #FFFFFF;
  --ad-line:    #E5DDCD;
  --ad-line-soft: #EFE9DC;
  --ad-ink:     #1A1614;
  --ad-soft:    #5A5048;
  --ad-muted:   #8A7F75;
  --ad-brand:   #2E4F3E;
  --ad-accent:  #C1684E;
  --ad-good:    #2F9E44;
  --ad-warn:    #D97706;
  --ad-danger:  #C0392B;
}

body.admin {
  background: var(--ad-bg);
  font-family: var(--font-sans);
  color: var(--ad-ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  margin: 0; padding: 0;
}

/* ─── Layout: top bar + sidebar + main ────────────── */
.ad-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas: "topbar topbar" "side main";
}
@media (max-width: 880px) {
  .ad-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .ad-side { display: none; }
}

/* ─── Top bar ─────────────────────────────────────── */
.ad-top {
  grid-area: topbar;
  background: var(--ad-bg-alt);
  border-bottom: 1px solid var(--ad-line);
  padding: 0 22px;
  display: flex; align-items: center; gap: 18px;
}
.ad-top__logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif); font-size: 1.05rem;
}
.ad-top__logo .brand__mark {
  width: 26px; height: 26px; font-size: 0.8rem;
  background: var(--ad-ink); color: var(--ad-bg-alt);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-style: italic;
}
.ad-top__logo small {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--ad-muted); text-transform: uppercase; margin-left: 6px;
}
.ad-top__establishment {
  margin-left: 26px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: var(--ad-bg);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--ad-soft);
}
.ad-top__establishment::after {
  content: '▾'; margin-left: 4px; opacity: 0.5;
}
.ad-top__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ad-top__btn {
  padding: 7px 14px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  background: var(--ad-bg); color: var(--ad-soft); transition: all var(--t-fast);
  cursor: pointer; border: 1px solid var(--ad-line-soft);
}
.ad-top__btn:hover { background: var(--ad-line-soft); color: var(--ad-ink); }
.ad-top__btn--primary { background: var(--ad-ink); color: var(--ad-bg-alt); border-color: var(--ad-ink); }
.ad-top__btn--primary:hover { background: var(--ad-brand); border-color: var(--ad-brand); color: #fff; }
.ad-top__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ad-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 600;
}

/* ─── Sidebar nav ─────────────────────────────────── */
.ad-side {
  grid-area: side;
  background: var(--ad-bg-alt);
  border-right: 1px solid var(--ad-line);
  padding: 18px 12px;
  overflow-y: auto;
}
.ad-side__group { margin-bottom: 22px; }
.ad-side__group-label {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ad-muted);
  padding: 0 12px; margin-bottom: 6px;
}
.ad-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 0.88rem; color: var(--ad-soft);
  transition: all var(--t-fast); cursor: pointer; width: 100%; text-align: left;
}
.ad-nav-link:hover { background: var(--ad-bg); color: var(--ad-ink); }
.ad-nav-link.is-active { background: var(--ad-ink); color: var(--ad-bg-alt); font-weight: 500; }
.ad-nav-link__icon { width: 20px; text-align: center; flex-shrink: 0; opacity: 0.78; }
.ad-nav-link.is-active .ad-nav-link__icon { opacity: 1; }
.ad-nav-link__count {
  margin-left: auto; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--ad-bg); color: var(--ad-soft);
  font-family: var(--font-mono); font-size: 0.7rem;
}
.ad-nav-link.is-active .ad-nav-link__count { background: rgba(255,255,255,0.18); color: var(--ad-bg-alt); }

/* ─── Main content area ───────────────────────────── */
.ad-main { grid-area: main; padding: 24px 28px 60px; overflow-y: auto; max-width: 100%; }
.ad-page { display: none; }
.ad-page.is-active { display: block; }

.ad-page__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  margin-bottom: 26px; flex-wrap: wrap;
}
.ad-page__title {
  font-family: var(--font-serif); font-size: 1.8rem; line-height: 1.15;
  margin: 0;
}
.ad-page__sub {
  margin-top: 4px;
  color: var(--ad-soft); font-size: 0.92rem;
}
.ad-page__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ad-btn {
  padding: 9px 16px; border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600;
  cursor: pointer; transition: all var(--t-fast); border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.ad-btn--primary { background: var(--ad-ink); color: var(--ad-bg-alt); }
.ad-btn--primary:hover { background: var(--ad-brand); }
.ad-btn--ghost { background: transparent; color: var(--ad-soft); border-color: var(--ad-line); }
.ad-btn--ghost:hover { color: var(--ad-ink); border-color: var(--ad-ink); }
.ad-btn--accent { background: var(--ad-accent); color: #fff; }
.ad-btn--accent:hover { filter: brightness(1.06); }
.ad-btn--sm { padding: 6px 12px; font-size: 0.78rem; }

/* ─── KPI cards (Dashboard) ──────────────────────── */
.ad-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 26px;
}
@media (max-width: 880px) { .ad-kpi-row { grid-template-columns: 1fr 1fr; } }
.ad-kpi {
  background: var(--ad-bg-alt); border: 1px solid var(--ad-line-soft);
  border-radius: var(--r-md); padding: 18px;
}
.ad-kpi__label {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--ad-muted); text-transform: uppercase;
}
.ad-kpi__value {
  font-family: var(--font-serif); font-size: 2rem; line-height: 1;
  margin-top: 8px; font-variation-settings: "opsz" 96;
}
.ad-kpi__delta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
}
.ad-kpi__delta--up   { background: rgba(47, 158, 68, 0.12); color: var(--ad-good); }
.ad-kpi__delta--down { background: rgba(192, 57, 43, 0.12); color: var(--ad-danger); }

/* ─── Card / panel container ─────────────────────── */
.ad-card {
  background: var(--ad-bg-alt); border: 1px solid var(--ad-line-soft);
  border-radius: var(--r-md); padding: 22px; margin-bottom: 18px;
}
.ad-card__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ad-line-soft);
}
.ad-card__title { font-family: var(--font-serif); font-size: 1.18rem; font-weight: 400; margin: 0; }
.ad-card__sub { color: var(--ad-soft); font-size: 0.84rem; margin-top: 2px; }

/* ─── Table ──────────────────────────────────────── */
.ad-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ad-table th, .ad-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ad-line-soft); }
.ad-table th {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ad-muted);
  background: var(--ad-bg);
}
.ad-table tr:last-child td { border-bottom: 0; }
.ad-table tr:hover td { background: var(--ad-bg); }

.ad-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
}
.ad-pill--good   { background: rgba(47, 158, 68, 0.12); color: var(--ad-good); }
.ad-pill--warn   { background: rgba(217, 119, 6, 0.12); color: var(--ad-warn); }
.ad-pill--neutral { background: var(--ad-bg); color: var(--ad-soft); }
.ad-pill--ink    { background: var(--ad-ink); color: var(--ad-bg-alt); }
.ad-pill::before { content: '●'; font-size: 0.6em; }

/* ─── Editable list (menu / rooms) ───────────────── */
.ad-edit-list { display: flex; flex-direction: column; gap: 8px; }
.ad-edit-row {
  display: grid; grid-template-columns: 50px 1fr 100px 100px auto;
  gap: 12px; align-items: center;
  background: var(--ad-bg-alt); border: 1px solid var(--ad-line-soft);
  border-radius: var(--r-sm); padding: 10px 14px;
  transition: all var(--t-fast);
}
.ad-edit-row:hover { border-color: var(--ad-ink); }
.ad-edit-row.is-changed { border-color: var(--ad-warn); background: rgba(217,119,6,0.04); }
.ad-edit-row__handle { color: var(--ad-muted); cursor: grab; font-family: var(--font-mono); font-size: 0.86rem; }
.ad-edit-row__name { font-weight: 500; }
.ad-edit-row__name input {
  width: 100%; background: transparent; border: 0; padding: 4px;
  font-size: 0.92rem; color: var(--ad-ink); outline: none;
  border-bottom: 1px solid transparent;
}
.ad-edit-row__name input:focus { border-bottom-color: var(--ad-line); }
.ad-edit-row__price input {
  width: 80px; padding: 4px 8px; background: var(--ad-bg);
  border: 1px solid var(--ad-line-soft); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 0.84rem; color: var(--ad-ink); outline: none;
}
.ad-edit-row__price input:focus { border-color: var(--ad-ink); }
.ad-edit-row__status { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--ad-soft); }
.ad-edit-row__delete {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ad-muted); transition: all var(--t-fast); cursor: pointer;
}
.ad-edit-row__delete:hover { background: rgba(192,57,43,0.1); color: var(--ad-danger); }

/* ─── Sync banner (publish + animation) ──────────── */
.ad-sync {
  position: sticky; bottom: 16px; left: 0; right: 0;
  margin: 18px auto 0; max-width: 540px;
  background: var(--ad-ink); color: var(--ad-bg-alt);
  border-radius: var(--r-md); padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: var(--shadow-pop);
  transform: translateY(80px); opacity: 0; transition: all var(--t-med);
  pointer-events: none;
}
.ad-sync.is-on { transform: none; opacity: 1; pointer-events: auto; }
.ad-sync__msg { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; }
.ad-sync__msg-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ad-warn);
}
.ad-sync__msg-dot.is-publishing { background: #F59E0B; animation: ad-sync-pulse 0.8s infinite; }
.ad-sync__msg-dot.is-done { background: #34D399; animation: none; }
@keyframes ad-sync-pulse { 50% { opacity: 0.4; } }

/* ─── Sync log (after publish) ───────────────────── */
.ad-sync-log {
  position: fixed; bottom: 16px; right: 16px; z-index: 60;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--ad-bg-alt); border: 1px solid var(--ad-line);
  border-radius: var(--r-md); padding: 14px;
  box-shadow: var(--shadow-pop);
  transform: translateX(400px); opacity: 0; transition: all var(--t-med);
  pointer-events: none;
}
.ad-sync-log.is-on { transform: none; opacity: 1; pointer-events: auto; }
.ad-sync-log__head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--ad-muted); text-transform: uppercase;
  margin-bottom: 10px;
}
.ad-sync-log__close { cursor: pointer; opacity: 0.6; }
.ad-sync-log__close:hover { opacity: 1; }
.ad-sync-log__line {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 0.84rem;
}
.ad-sync-log__check { color: var(--ad-good); font-weight: 600; }

/* ─── Integrations grid ───────────────────────────── */
.ad-int-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 720px) { .ad-int-grid { grid-template-columns: 1fr; } }
.ad-int {
  background: var(--ad-bg-alt); border: 1px solid var(--ad-line-soft);
  border-radius: var(--r-md); padding: 18px;
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
}
.ad-int__icon {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--ad-bg); color: var(--ad-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; font-weight: 500;
}
.ad-int__icon[data-color="cb"] { background: #1F4D8F; color: #fff; }
.ad-int__icon[data-color="mw"] { background: #FF5722; color: #fff; }
.ad-int__icon[data-color="oc"] { background: #1A8FE3; color: #fff; }
.ad-int__icon[data-color="sm"] { background: #E91E63; color: #fff; }
.ad-int__icon[data-color="tf"] { background: #00524A; color: #fff; }
.ad-int__icon[data-color="sr"] { background: #1A1A1A; color: #fff; }
.ad-int__icon[data-color="su"] { background: #FFD600; color: #000; }
.ad-int__icon[data-color="ad"] { background: #C8102E; color: #fff; }
.ad-int__icon[data-color="ls"] { background: #7C3AED; color: #fff; }
.ad-int__icon[data-color="bk"] { background: #003580; color: #fff; }
.ad-int__icon[data-color="ex"] { background: #FFCC00; color: #00355F; }
.ad-int__icon[data-color="gg"] { background: #fff; color: #4285F4; border: 1px solid var(--ad-line); }
.ad-int__icon[data-color="mc"] { background: #FFE01B; color: #1A1A1A; }
.ad-int__icon[data-color="bv"] { background: #4F46E5; color: #fff; }

.ad-int__name { font-weight: 500; font-size: 0.94rem; }
.ad-int__sub {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--ad-muted); margin-top: 2px;
}

/* ─── Bio builder preview (Page Bio tab) ─────────── */
.ad-bio-builder {
  display: grid; grid-template-columns: 1fr 360px; gap: 20px;
}
@media (max-width: 980px) { .ad-bio-builder { grid-template-columns: 1fr; } }
.ad-bio-builder__col-left {
  background: var(--ad-bg-alt); border: 1px solid var(--ad-line-soft);
  border-radius: var(--r-md); padding: 22px;
}
.ad-bio-builder__col-right {
  background: #1A1614; border-radius: var(--r-lg); padding: 12px;
  position: sticky; top: 80px; height: 600px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
}
.ad-bio-preview-bar {
  background: var(--ad-bg); padding: 6px 12px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  color: var(--ad-muted); border-radius: var(--r-sm); margin-bottom: 8px;
  text-align: center;
}
.ad-bio-preview-frame {
  flex: 1; background: #FBF6EB; border-radius: var(--r-md); overflow: hidden;
}
.ad-bio-preview-frame iframe { width: 100%; height: 100%; border: 0; }

/* ─── Bio link blocks (sortable list in builder) ──── */
.ad-bio-blocks { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ad-bio-block {
  display: grid; grid-template-columns: 24px 36px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 10px 14px; background: var(--ad-bg);
  border: 1px solid var(--ad-line-soft); border-radius: var(--r-sm);
  font-size: 0.88rem;
}
.ad-bio-block__handle { cursor: grab; color: var(--ad-muted); }
.ad-bio-block__icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--ad-bg-alt); display: inline-flex; align-items: center; justify-content: center;
}
.ad-bio-block__name { font-weight: 500; }
.ad-bio-block__sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ad-muted); display: block; margin-top: 2px; letter-spacing: 0.04em; }
.ad-bio-block__toggle {
  width: 32px; height: 18px; border-radius: 9px; background: var(--ad-line);
  position: relative; cursor: pointer; transition: background var(--t-fast);
}
.ad-bio-block__toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform var(--t-fast);
}
.ad-bio-block__toggle.is-on { background: var(--ad-brand); }
.ad-bio-block__toggle.is-on::after { transform: translateX(14px); }

/* ─── Empty state ─────────────────────────────────── */
.ad-empty {
  padding: 40px; text-align: center; color: var(--ad-muted); font-size: 0.92rem;
  background: var(--ad-bg-alt); border: 1px dashed var(--ad-line); border-radius: var(--r-md);
}
.ad-empty__title { font-family: var(--font-serif); font-size: 1.2rem; color: var(--ad-soft); margin-bottom: 4px; }

/* ─── Inline pill badges (used everywhere) ─────── */
.ad-tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em;
  background: var(--ad-bg); color: var(--ad-soft); margin-left: 6px;
}