/* Zanzibar Travel Buddies — operations dashboard.

   The palette is the website's, read off the live site rather than invented:
   sand, ink, and flame as the single accent. Sand is the default because that
   is what the business looks like; dark is there because this is also read at
   six in the morning and last thing at night.

   Archivo is served from this machine rather than from Google, so the page
   works with no outside call and nobody is told when it is opened. The
   latin-ext file is not optional - half the customers write in French, German
   or Italian and their names have accents in them. */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* The brand, exactly as the site paints it. */
  --sand: #f2f0ea;
  --warm: #e2ded4;
  --ink-brand: #15120e;
  --deep: #0d0b08;
  --flame: #e5451b;

  /* Roles. Flame is the accent everywhere, as it is on the site: the thing
     meant to be clicked. Teal comes from the sail in the logo and is the only
     other colour, used for "this is fine"; amber for "look at this". */
  --accent: var(--flame);
  --accent-dim: #c33a15;
  --accent-ink: #fff5f2;
  --ok: #0f7d6e;
  --warn: #b4690e;
  --bad: var(--flame);

  --bg: var(--sand);
  --panel: #ffffff;
  --panel-2: #eae7de;
  --line: #dcd7ca;
  --ink: var(--ink-brand);
  --ink-2: #5d564b;
  --ink-3: #8b8377;

  --r: 14px;
  --shadow: 0 6px 20px rgba(21, 18, 14, 0.07);
  --sans: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Dark is the same brand after sundown: ink for the ground, sand for the
   type, and flame lifted just enough to stay legible on it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #ff6a41;
    --accent-dim: #c93d17;
    --accent-ink: #1a0d07;
    --ok: #2ea08d;
    --warn: #d99125;
    --bad: #ff6a41;

    --bg: var(--deep);
    --panel: #191510;
    --panel-2: #221d16;
    --line: #362f25;
    --ink: var(--sand);
    --ink-2: #b6ada0;
    --ink-3: #857c6f;
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --accent: #ff6a41;
  --accent-dim: #c93d17;
  --accent-ink: #1a0d07;
  --ok: #2ea08d;
  --warn: #d99125;
  --bad: #ff6a41;

  --bg: var(--deep);
  --panel: #191510;
  --panel-2: #221d16;
  --line: #362f25;
  --ink: var(--sand);
  --ink-2: #b6ada0;
  --ink-3: #857c6f;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* room for the mobile tab bar */
}

a { color: var(--accent); }
button { font: inherit; cursor: pointer; }

/* ------------------------------------------------------------------ login */

.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(13, 11, 8, 0.72), rgba(13, 11, 8, 0.95)),
    var(--hero, radial-gradient(circle at 30% 20%, #3a2418, #0d0b08)) center/cover;
}
.login form {
  width: min(380px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.login h1 { margin: 0 0 4px; font-size: 20px; }
.login p { margin: 0 0 20px; color: var(--ink-2); font-size: 13px; }

input[type="password"], input[type="search"], input[type="text"], input[type="number"] {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
}
input:focus-visible, button:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn {
  border: 0;
  border-radius: 10px;
  padding: 11px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}
.btn:hover { background: var(--accent-dim); }
.btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 500;
}
.btn.ghost:hover { color: var(--ink); border-color: var(--accent); }
.btn.full { width: 100%; margin-top: 14px; }

.error { color: var(--bad); font-size: 13px; min-height: 18px; margin-top: 10px; }

/* ------------------------------------------------------------------ shell */

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

.hero {
  position: relative;
  padding: 26px 0 22px;
  margin-bottom: 18px;
  background: var(--hero, linear-gradient(135deg, #4a2a17, #0d0b08)) center/cover;
  border-bottom: 1px solid var(--line);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 11, 8, 0.5), rgba(13, 11, 8, 0.88));
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { margin: 0; font-size: clamp(20px, 4vw, 27px); letter-spacing: -0.02em; color: #fff; }
.hero .sub { color: rgba(255, 255, 255, 0.72); font-size: 13px; margin-top: 3px; }
.hero .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
.live .dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ------------------------------------------------------------------- nav */

nav.tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  gap: 2px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  overflow-x: auto;
}
.tab {
  flex: 1 0 auto;
  border: 0;
  background: none;
  color: var(--ink-3);
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 62px;
}
.tab .ic { font-size: 17px; line-height: 1; }
.tab[aria-selected="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  nav.tabs {
    position: sticky;
    top: 0;
    bottom: auto;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    padding: 6px 16px;
    justify-content: center;
  }
  .tab { flex: 0 0 auto; grid-auto-flow: column; align-items: center; font-size: 13px; padding: 8px 14px; }
  .tab .ic { font-size: 15px; }
}

/* ----------------------------------------------------------------- cards */

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: var(--shadow);
  animation: rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.card h2 {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@keyframes rise { from { opacity: 0; transform: translateY(9px); } }
.card:nth-child(2) { animation-delay: 0.04s; }
.card:nth-child(3) { animation-delay: 0.08s; }
.card:nth-child(4) { animation-delay: 0.12s; }
.card:nth-child(5) { animation-delay: 0.16s; }
.card:nth-child(6) { animation-delay: 0.2s; }

.stat .n {
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat .n.ok { color: var(--ok); }
.stat .n.warn { color: var(--warn); }
.stat .n.bad { color: var(--bad); }
.stat .sub { color: var(--ink-3); font-size: 12px; margin-top: 5px; }

.section { margin-bottom: 20px; }
.section > h3 {
  margin: 22px 0 10px;
  font-size: 15px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.count {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}

/* ----------------------------------------------------------------- lists */

.list { display: grid; gap: 8px; }
.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-2);
  transition: border-color 0.15s, transform 0.15s;
}
.item:hover { border-color: var(--accent-dim); transform: translateX(2px); }
.item .who { font-weight: 620; }
.item .meta { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.item .preview {
  color: var(--ink-2);
  font-size: 12.5px;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item.clickable { cursor: pointer; }

.tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.tag.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.tag.new { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }

.empty { color: var(--ink-3); font-size: 13px; padding: 16px; text-align: center; }

/* ------------------------------------------------------------------ bars */

.bar { height: 7px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: 99px;
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tourrow { display: grid; gap: 5px; margin-bottom: 11px; }
.tourrow .lbl { display: flex; justify-content: space-between; font-size: 13px; }
.tourrow .lbl b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- charts */

.chartbox { position: relative; height: 190px; }

/* -------------------------------------------------------------- pipeline */

.columns { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.col h4 {
  margin: 0 0 9px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  display: flex;
  gap: 7px;
  align-items: center;
}

/* ---------------------------------------------------------------- drawer */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 8, 11, 0.6);
  display: none;
}
.drawer[open] { display: block; animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; } }
.drawer .panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--bg);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 18px;
  animation: slide 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes slide { from { transform: translateX(28px); opacity: 0; } }
.drawer header { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 14px; }

.msg { margin-bottom: 9px; display: flex; }
.msg .b {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 13px;
  font-size: 13.5px;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.them .b { background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.us { justify-content: flex-end; }
.msg.us .b { background: var(--accent-dim); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.msg .t { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }

.spinner {
  width: 17px; height: 17px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar input { flex: 1 1 220px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}