/* ==========================================================================
   Tenant dashboard brand look (2026-10-11, docs/DASHBOARD_LOOK_PLAN.md)
   Loaded ONLY by tenant dashboard pages (templates/dashboard/base.html and the
   standalone tenant pages). The admin panel + TIOO Lab share dashboard.css but
   not this file, so every `var(--brand…, <old indigo>)` there falls back to the
   old indigo and their dark menu stays as it was.
   Colours match the marketing site (static/css/mkt/tokens.css): logo blue
   #2b5cff, hero light blue #e9f0fb, ink #0a0b0f. Dark mode (step 2) will give
   these same tokens a second set of values.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/mkt/Geist-latin.a147f99cd533.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;
}

:root {
  --brand: #2b5cff;          /* logo blue: buttons, active states */
  --brand-2: #4a72ff;        /* lighter step (gradient ends, outlines) */
  --brand-ink: #1d45d9;      /* 6.1:1 on white: blue text, hover */
  --brand-ink-2: #1838b0;    /* text on the soft blues */
  --brand-ink-3: #142c86;
  --brand-soft: #eaf0ff;
  --brand-soft-2: #dbe5ff;
  --brand-line: #c4d3ff;
  --brand-300: #9db4ff;
  --brand-400: #7393ff;
  --brand-rgb: 43, 92, 255;
  --brand-band: #e9f0fb;     /* marketing hero light blue: the menu */
  --font-display: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* the dashboard's accent (active marker, small highlights) is the logo blue now */
  --color-accent: #2b5cff;
}

/* ── Light menu (tenant only; dark mode will swap these back) ── */
.sidebar--light {
  --sb-bg: var(--brand-band);
  --sb-text: #26282f;
  --sb-text-strong: #0a0b0f;
  --sb-muted: #595c66;         /* 5.9:1 on the band */
  --sb-hover: rgba(10, 11, 15, 0.05);
  --sb-active: #fff;
  --sb-line: rgba(10, 11, 15, 0.08);
  --sb-focus: var(--brand-ink);
  border-right: 1px solid rgba(10, 11, 15, 0.08);
}
.sidebar--light .sidebar-nav { scrollbar-color: rgba(10, 11, 15, 0.18) transparent; }
.sidebar--light .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(10, 11, 15, 0.18); }
.sidebar--light .sidebar-header .org-name { background: #fff; }
.sidebar--light .sidebar-nav a.active {
  color: var(--brand-ink);
  box-shadow: 0 1px 2px rgba(10, 11, 15, 0.08);
}
.sidebar--light .sidebar-nav a.active::before { background: var(--brand); }
.sidebar--light .nav-lock { border-color: rgba(10, 11, 15, 0.16); color: var(--sb-muted); }
.sidebar--light .sidebar-signout-btn:hover { color: var(--sb-text-strong); }
.sidebar--light .nav-star { color: rgba(10, 11, 15, 0.35); }
.sidebar--light .nav-star:hover,
.sidebar--light[data-edit-mode="true"] .nav-star--active { color: #b45309; }
.sidebar--light .nav-star:focus-visible { outline-color: var(--brand-ink); }
.sidebar--light[data-edit-mode="true"] .sidebar-customize-btn { background: rgba(245, 158, 11, 0.16); color: #92400e; }
@media (min-width: 769px) {
  .sidebar--light.collapsed .nav-section-line { background: rgba(10, 11, 15, 0.1); }
}

/* ── Page titles in the logo / marketing headline font ── */
.dashboard .topbar--tenant .topbar-title,
.dashboard .main-content :where(.page-header h1, .page-header h2,
  [class$="-head__title"], [class*="-head__title "], [class$="-header__title"],
  .wb-page-title, .wa-page-h, .wad-h) {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ── Primary buttons: flat logo blue (were an indigo gradient) ── */
.dashboard .btn-primary { background: var(--brand); border-color: var(--brand); }
.dashboard .btn-primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); }

/* ── The business's own logo under TIOO's (owner 2026-10-11) ──────────
   Its website logo (image, else the logo text in its font) on the menu
   colour — no white card, no orange letter. The initial only shows in the
   folded menu, as a logo-blue circle. */
.sidebar--light .sidebar-header .org-brand,
.sidebar-header .org-brand {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 2px 4px 0;
  margin-top: 16px;
}
.org-brand .org-avatar { display: none; }
.org-brand .org-name-text { display: block; min-width: 0; max-width: 100%; }
.org-brand .biz-logo__text {
  display: block;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--sb-text-strong, #0a0b0f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.org-brand .biz-logo__img {
  display: block;
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
@media (min-width: 769px) {
  .sidebar.collapsed .org-brand {
    justify-content: center;
    margin: 10px auto 0;
    padding: 0;
    width: 40px;
  }
  .sidebar.collapsed .org-brand .org-avatar {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background: var(--brand, #2b5cff);
    font-size: 13px;
  }
}
/* Enterprise with TIOO branding off: the business logo where TIOO's was */
.sidebar .logo .logo-biz { display: inline-flex; align-items: center; min-width: 0; max-width: 170px; }
.sidebar .logo .logo-biz .biz-logo__img { max-height: 32px; max-width: 170px; width: auto; object-fit: contain; }
.sidebar .logo .logo-biz .biz-logo__text { font-size: 20px; font-weight: 600; color: var(--sb-text-strong, #0a0b0f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .logo .logo-biz-icon {
  width: 32px; height: 32px; line-height: 32px; border-radius: 50%;
  background: var(--brand, #2b5cff); color: #fff; text-align: center; font-weight: 700; font-size: 14px;
}