/* ==========================================================================
   Hotelmente design tokens: ONE set for every page (public website, sign-up/log-in,
   home, the app, admin). Light values here; dark values in the media block below.
   Motif: the deep product colours of the sidebar bands (AI navy, PAY green,
   FACTURA red) on the brand grey. Product colours stay deep in both modes for bands
   and header bars (white text on them); in dark mode text/accents use the "-hi" step.
   ========================================================================== */
:root {
  color-scheme: light dark;
  /* Brand */
  --brand-grey: #d9dce1; --brand-ink: #1a1d23; --brand-dark: #11151c;
  /* The three products: deep (bands, header bars, solid chips; white text on top), tint (soft backgrounds),
     hi (readable on dark surfaces), text (accent text on panels: deep in light mode, hi in dark mode). */
  --ai: #0f2150; --pay: #14482a; --factura: #7f1d1d; --on-product: #ffffff;
  --ai-tint: #e8ecf6; --pay-tint: #e5f3ea; --factura-tint: #f9e8e8;
  --ai-hi: #9db4f0; --pay-hi: #86d9a5; --factura-hi: #fca5a5;
  --ai-text: var(--ai); --pay-text: var(--pay); --factura-text: var(--factura);
  --logo-ink: #5f5f5f; /* the grey of logo-grey.png */
  --ai-line: var(--ai); --pay-line: var(--pay); --factura-line: var(--factura); /* stripes, dots, outlines (lifted a step in dark mode) */
  /* Surfaces, text, lines */
  --bg: #f4f5f7; --panel: #ffffff; --panel-2: #f7f8fa; --neutral-bg: #eef0f3; --hover: rgb(15 23 42 / 0.05);
  --text: #1a1d23; --text-2: #3b414b; --muted: #5b6270; --faint: #8a919c;
  --border: #e1e4ea; --border-strong: #cfd3d9; --shadow: rgb(15 23 42 / 0.10); --backdrop: rgb(10 12 16 / 0.45);
  --ink-strong: #1a1d23; --on-ink-strong: #ffffff;       /* solid near-black buttons and chips */
  --band-neutral: #d9dce1; --on-band-neutral: #1a1d23;  /* brand-grey header band (pages that are not a product) */
  --accent: #1a1d23; --accent-text: #ffffff; --danger: #b42318; --link: #2c56a8;
  /* Status (reserved, never a product or series colour; always with an icon + label) */
  --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; --on-status: #ffffff; --on-warning: #1a1d23;
  --ok: #17753a; --ok-bg: #e5f5ea; --warn: #8a5a00; --warn-bg: #fff4dc; --bad: #a82424; --bad-bg: #fdeaea;
  --info: #2448a8; --info-bg: #eaf0fd; --neutral-ink: #5b6270;
  /* Sidebar (brand grey in light mode, near-black in dark mode; the product bands keep their deep colour) */
  --side: #e3e6ea; --side-text: #1a1d23; --side-muted: #5b616b; --side-hover: rgb(0 0 0 / 0.07); --side-active-bg: rgb(0 0 0 / 0.12);
  --side-line: #cfd3d9; --side-card: #ffffff;
  /* Charts: categorical hues in the same deep motif (validated: dataviz validate_palette.js, light on #ffffff) */
  --c-blue: #2c56a8; --c-red: #a1302b; --c-green: #459f5d; --c-ochre: #895700; --c-plum: #b46aae;
  --series-1: var(--c-blue); --series-2: var(--c-red); --series-3: var(--c-green); --series-4: var(--c-ochre); --series-5: var(--c-plum);
  --series-other: #8a919c; --grid: #e6e8ec; --axis: #c9ced6;
  /* Diverging (demand calendar, prices vs competitors): red <-> grey <-> navy, each step with its ink */
  --div-hot: #b5433c; --div-warm: #f5c3bd; --div-mid: #e6e8ec; --div-cool: #bfd2f3; --div-cold: #2b519c;
  --div-hot-ink: #ffffff; --div-warm-ink: #1a1d23; --div-mid-ink: #1a1d23; --div-cool-ink: #1a1d23; --div-cold-ink: #ffffff;
  --up-bg: #dfe7f9; --up-strong: #c9d7f5; --up-ink: #173a8a; --down-bg: #fbe1de; --down-strong: #f6c9c4; --down-ink: #9a1f14;
  --same-bg: #eef0f3; --sold-bg: #d9dce1; --sold-ink: #3b414b;
  /* Sequential (magnitude, heatmaps and money calendars) and ordinal (stacked shares) ramps per product */
  --ai-seq-1: #e2ecfd; --ai-seq-2: #bfd2f3; --ai-seq-3: #99b5e8; --ai-seq-4: #7095d9; --ai-seq-5: #4972c0; --ai-seq-6: #2b519c; --ai-seq-7: #153470;
  --pay-seq-1: #e1f0e3; --pay-seq-2: #bcdac1; --pay-seq-3: #92c29b; --pay-seq-4: #63a773; --pay-seq-5: #33884c; --pay-seq-6: #01672d; --pay-seq-7: #004617;
  --factura-seq-1: #fee4e1; --factura-seq-2: #f5c3bd; --factura-seq-3: #e99e95; --factura-seq-4: #d8746a; --factura-seq-5: #bc4a42; --factura-seq-6: #972622; --factura-seq-7: #6b0d0e;
  --ai-ord-1: #88abea; --ai-ord-2: #638bd5; --ai-ord-3: #436cb9; --ai-ord-4: #284e99; --ai-ord-5: #153470;
  --pay-ord-1: #7ebc8b; --pay-ord-2: #549f66; --pay-ord-3: #2c8246; --pay-ord-4: #00642a; --pay-ord-5: #004617;
  --factura-ord-1: #eb8e83; --factura-ord-2: #d3675d; --factura-ord-3: #b5433c; --factura-ord-4: #932220; --factura-ord-5: #6b0d0e;
  --ink-dark: #10131a; --ink-light: #ffffff;
  --seq-ink-1: var(--ink-dark); --seq-ink-2: var(--ink-dark); --seq-ink-3: var(--ink-dark); --seq-ink-4: var(--ink-dark); --seq-ink-5: var(--ink-light); --seq-ink-6: var(--ink-light); --seq-ink-7: var(--ink-light);
  --ord-ink-1: var(--ink-dark); --ord-ink-2: var(--ink-dark); --ord-ink-3: var(--ink-light); --ord-ink-4: var(--ink-light); --ord-ink-5: var(--ink-light);
  /* Social networks (identity of the network, not a series) */
  --net-facebook: #1d4ed8; --net-facebook-bg: #e7efff; --net-instagram: #c13584; --net-instagram-bg: #fbe8f3; --net-instagram-ink: #9d174d; --net-tiktok: #0f172a; --net-tiktok-bg: #e3f6f5; --net-tiktok-ink: #0f766e;
  /* Maps and fixed "paper" previews (Google result, logo backgrounds) */
  --map-water: #aad3df; --map-land: #e8ecef; --paper: #ffffff; --paper-2: #eef0f3; --paper-ink: #1a1d23; --serp-ink: #4d5156; --serp-link: #1a0dab;
  /* Overlays on photos and a dark solid that stays dark in both modes (Ask AI button) */
  --scrim: rgb(0 0 0 / 0.5); --on-scrim: #ffffff; --media-bg: #000000; --solid-dark: #1a1d23; --solid-dark-hover: #000000; --on-solid-dark: #ffffff;
  /* Text on a filled "-text" colour (accent buttons): white in light mode, near-black in dark mode */
  --on-product-text: #ffffff; --serious-bg: #fdf0ea; --serious-text: #b4542d;
  /* Third-party brand colours (initials badges until each official logo is uploaded) */
  --logo-pms-cloudbeds: #1d5cff; --logo-pms-guesty: #0e1f4f; --logo-pms-hostaway: #6b3cf6; --logo-pms-mews: #111111;
  --logo-bank-bac: #e30613; --logo-bank-promerica: #00843d; --logo-bank-bcr: #0033a0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ai-tint: #17203a; --pay-tint: #13271b; --factura-tint: #2d1717;
    --ai-text: var(--ai-hi); --pay-text: var(--pay-hi); --factura-text: var(--factura-hi);
    --logo-ink: #ffffff; /* logo-white.png */
    --ai-line: #4c73ba; --pay-line: #3b874f; --factura-line: #b74f46;
    --bg: #111318; --panel: #1a1d24; --panel-2: #20242c; --neutral-bg: #262a33; --hover: rgb(255 255 255 / 0.06);
    --text: #e7e9ee; --text-2: #c3c8d1; --muted: #9aa2b1; --faint: #6b7280;
    --border: #2c313b; --border-strong: #3a404b; --shadow: rgb(0 0 0 / 0.45); --backdrop: rgb(0 0 0 / 0.6);
    --ink-strong: #e6e8eb; --on-ink-strong: #1a1d23;
    --band-neutral: #2c3037; --on-band-neutral: #f1f2f4;
    --accent: #e6e8eb; --accent-text: #1a1d23; --danger: #ff6b6b; --link: #9db4f0;
    --ok: #6ee39a; --ok-bg: #143322; --warn: #f3c969; --warn-bg: #3a2d0e; --bad: #ff9a9a; --bad-bg: #3a1717;
    --info: #9db8ff; --info-bg: #17254a; --neutral-ink: #9aa2b1;
    /* Owner (2026-09-27): dark is dark, light is light — the sidebar follows the mode. */
    --side: #11151c; --side-text: #e7e9ee; --side-muted: #9aa2b1; --side-hover: rgb(255 255 255 / 0.06); --side-active-bg: rgb(255 255 255 / 0.12);
    --side-line: #262b34; --side-card: #1a1f28;
    /* dark steps of the same hues (validated on #1a1d24) */
    --c-blue: #5a84d4; --c-red: #c0453d; --c-green: #52ab69; --c-ochre: #a26e22; --c-plum: #bb76b5;
    --series-other: #7d838f; --grid: #2a2f38; --axis: #3a404b;
    --div-hot: #d3675d; --div-warm: #6f2722; --div-mid: #2c313b; --div-cool: #274172; --div-cold: #88abea;
    --div-hot-ink: #10131a; --div-warm-ink: #ffffff; --div-mid-ink: #e7e9ee; --div-cool-ink: #ffffff; --div-cold-ink: #10131a;
    --up-bg: #1c2a4a; --up-strong: #26396a; --up-ink: #b5cffc; --down-bg: #3a1c19; --down-strong: #522420; --down-ink: #febab2;
    --same-bg: #262a33; --sold-bg: #2c313b; --sold-ink: #c3c8d1;
    --ai-seq-1: #1c2f53; --ai-seq-2: #274172; --ai-seq-3: #355695; --ai-seq-4: #4a70b7; --ai-seq-5: #638bd5; --ai-seq-6: #88abea; --ai-seq-7: #b5cffc;
    --pay-seq-1: #12391d; --pay-seq-2: #194f29; --pay-seq-3: #226837; --pay-seq-4: #38844c; --pay-seq-5: #549f66; --pay-seq-6: #7ebc8b; --pay-seq-7: #b0dbb7;
    --factura-seq-1: #521d19; --factura-seq-2: #6f2722; --factura-seq-3: #92352f; --factura-seq-4: #b44b43; --factura-seq-5: #d3675d; --factura-seq-6: #eb8e83; --factura-seq-7: #febab2;
    --ai-ord-1: #375998; --ai-ord-2: #4c73ba; --ai-ord-3: #668ed8; --ai-ord-4: #88abea; --ai-ord-5: #abc8fc;
    --pay-ord-1: #266b3a; --pay-ord-2: #3b874f; --pay-ord-3: #57a369; --pay-ord-4: #7ebc8b; --pay-ord-5: #a4d6ae;
    --factura-ord-1: #953832; --factura-ord-2: #b74f46; --factura-ord-3: #d66a60; --factura-ord-4: #eb8e83; --factura-ord-5: #feb1a7;
    --seq-ink-1: var(--ink-light); --seq-ink-2: var(--ink-light); --seq-ink-3: var(--ink-light); --seq-ink-4: var(--ink-light); --seq-ink-5: var(--ink-dark); --seq-ink-6: var(--ink-dark); --seq-ink-7: var(--ink-dark);
    --ord-ink-1: var(--ink-light); --ord-ink-2: var(--ink-light); --ord-ink-3: var(--ink-dark); --ord-ink-4: var(--ink-dark); --ord-ink-5: var(--ink-dark);
    --net-facebook: #6b8ff0; --net-facebook-bg: #17254a; --net-instagram: #e25aa8; --net-instagram-bg: #3a1830; --net-instagram-ink: #f39ac8; --net-tiktok: #5eead4; --net-tiktok-bg: #0f2a2a; --net-tiktok-ink: #99f6e4;
    --map-land: #262a33;
    --solid-dark: #2c3037; --solid-dark-hover: #3a404b;
    --on-product-text: #10131a; --serious-bg: #3a2418; --serious-text: #ec835a;
  }
}
/* Product binding: anything inside .p-ai / .p-pay / .p-factura (cards, bands, chips) gets --pc (deep), --pc-tint and --pc-text. */
:root { --pc: var(--ink-strong); --pc-tint: var(--neutral-bg); --pc-text: var(--text); --pc-line: var(--ink-strong); --on-pc: var(--on-ink-strong); }
.p-ai { --pc: var(--ai); --pc-tint: var(--ai-tint); --pc-text: var(--ai-text); --pc-line: var(--ai-line); --on-pc: var(--on-product); }
.p-pay { --pc: var(--pay); --pc-tint: var(--pay-tint); --pc-text: var(--pay-text); --pc-line: var(--pay-line); --on-pc: var(--on-product); }
.p-factura { --pc: var(--factura); --pc-tint: var(--factura-tint); --pc-text: var(--factura-text); --pc-line: var(--factura-line); --on-pc: var(--on-product); }
/* Default sequential/ordinal ramp = Hotelmente AI (navy); product pages swap to their own hue. */
:root { --seq-1: var(--ai-seq-1); --seq-2: var(--ai-seq-2); --seq-3: var(--ai-seq-3); --seq-4: var(--ai-seq-4); --seq-5: var(--ai-seq-5); --seq-6: var(--ai-seq-6); --seq-7: var(--ai-seq-7);
  --ramp-1: var(--ai-ord-1); --ramp-2: var(--ai-ord-2); --ramp-3: var(--ai-ord-3); --ramp-4: var(--ai-ord-4); --ramp-5: var(--ai-ord-5); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1 { font-size: 1.35rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 24px 0 4px; }
code { font: 0.85em ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.eyebrow { margin: 0 0 2px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--panel); }
.layout { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 20px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }

label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 0.9rem; }
input, select { width: 100%; padding: 9px 11px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 7px; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.btn { display: inline-block; white-space: nowrap; padding: 9px 16px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 11px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.linkish { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-align: left; }
.downloads { display: flex; gap: 8px; flex-wrap: wrap; }

.msg { min-height: 1.2em; margin: 12px 0 0; }
.msg.error, .error { color: var(--bad); }
.msg.ok { color: var(--ok); }

.conn-status { padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; }
.conn-status.ok { background: var(--ok-bg); color: var(--ok); }
.conn-status.bad { background: var(--bad-bg); color: var(--bad); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.grid { width: 100%; border-collapse: collapse; margin: 8px 0; display: block; overflow-x: auto; }
.grid th, .grid td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.grid th { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.grid td.ex { max-width: 320px; overflow-wrap: anywhere; color: var(--muted); }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; background: var(--neutral-bg); color: var(--muted); }
.badge.s-data, .badge.s-found, .badge.s-connected { background: var(--ok-bg); color: var(--ok); }
.badge.s-derivable { background: var(--neutral-bg); color: var(--text); }
.badge.s-empty { background: var(--info-bg); color: var(--info); }
.badge.s-restricted, .badge.s-missing_permission { background: var(--warn-bg); color: var(--warn); }
.badge.s-error, .badge.s-invalid_api_key, .badge.s-inactive_or_expired_key { background: var(--bad-bg); color: var(--bad); }

.progress { height: 8px; background: var(--neutral-bg); border-radius: 999px; overflow: hidden; }
#progress-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }
.event-log { max-height: 280px; overflow: auto; font-size: 0.85rem; padding-left: 20px; }
.event-log li { margin: 2px 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.card .num { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.card .lbl { font-size: 0.8rem; color: var(--muted); }

.filters { display: flex; gap: 10px; margin: 8px 0; }
.filters input { flex: 2; } .filters select { flex: 1; }
.cov-group, .ep { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.cov-group summary, .ep summary { cursor: pointer; }
.report-list { padding-left: 18px; }
.report-list li { margin: 4px 0; }

dialog { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); max-width: 440px; width: calc(100% - 32px); }
dialog::backdrop { background: var(--backdrop); }

.login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 28px; width: 100%; max-width: 380px; }
.login-card button { margin-top: 16px; width: 100%; }

@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; }
  .topbar { padding: 12px 16px; }
  .actions .btn { width: 100%; }
  .filters { flex-direction: column; }
}
/* Corporate colour on the sign-in page: near-black gray. */
.login-body { --accent: var(--brand-grey); --accent-text: var(--brand-ink); }
@media (prefers-color-scheme: dark) { .login-body { --accent: var(--ink-strong); --accent-text: var(--on-ink-strong); } }
.login-card [hidden] { display: none !important; }
.login-card #codes { font-size: 1rem; line-height: 1.7; background: rgba(127,127,127,.12); padding: 10px 14px; border-radius: 8px; }
.login-card #qr { background: #fff; border-radius: 8px; padding: 6px; }

/* Same look as the app for the sign-in pages and the API test lab (owner, 2026-10-01). */
.lab-body, .login-body, .auth-body { --soft-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.06); --go: #1a1d23; --go-bg: #eef0f3; }
@media (prefers-color-scheme: dark) { .lab-body, .login-body, .auth-body { --soft-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.3); --go: #e6e8eb; --go-bg: #262a33; } }
:is(.lab-body, .login-body, .auth-body) .panel { border-color: transparent; border-radius: 18px; box-shadow: var(--soft-shadow); }
:is(.lab-body, .login-body, .auth-body) .btn { border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .1s, box-shadow .15s; }
:is(.lab-body, .login-body, .auth-body) .btn:not(:disabled):hover { box-shadow: 0 4px 14px rgba(15,23,42,.14); }
:is(.lab-body, .login-body, .auth-body) .btn:not(:disabled):active { transform: translateY(1px); }
:is(.lab-body, .login-body, .auth-body) input:not([type=checkbox]):not([type=radio]), :is(.lab-body, .login-body, .auth-body) select, :is(.lab-body, .login-body, .auth-body) textarea { border-radius: 12px; min-height: 44px; }
:is(.lab-body, .login-body, .auth-body) input:focus, :is(.lab-body, .login-body, .auth-body) select:focus, :is(.lab-body, .login-body, .auth-body) textarea:focus { outline: none; border-color: var(--go); box-shadow: 0 0 0 3px var(--go-bg); }
:is(.lab-body, .login-body, .auth-body) .grid th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.login-body .login-card { border-color: transparent; border-radius: 20px; box-shadow: var(--soft-shadow); }