/* A business's own office (e.g. office.iyumbustays.co.tz): the same portal in the business's colour, without Sihebs' sales site.
   --brand is set per business by the server; the accents below are lighter tints of it so they read on the dark portal. */
body.brand-mode { --brand: #5a5a2d; }
body.brand-mode #auth > :not(.sheet), body.brand-mode .si-new, body.brand-mode [data-go="signup"],body.brand-mode [data-t="si-help"],body.brand-mode .bottom, body.brand-mode .go-signup, body.brand-mode #si-close, body.brand-mode .grab,
body.brand-mode #first-run, body.brand-mode .tabs [data-tab="admin"], body.brand-mode .tabs [data-tab="templates"], body.brand-mode .tabs [data-tab="send"],
body.brand-mode .tabs [data-tab="connect"], body.brand-mode .tabs [data-tab="billing"], body.brand-mode #bot-pay-msg, body.brand-mode #bot-plan { display: none !important; }

/* signed out: a calm page in the business's colours with the sign-in card in the middle */
html:has(body.brand-mode:not(.portal-on)) { background: #f6f3ea; }
body.brand-mode:not(.portal-on) { background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), #f6f3ea; min-height: 100vh; }
body.brand-mode:not(.portal-on) .top { background: transparent; border-bottom: 0; }
body.brand-mode:not(.portal-on) #top-signin { display: none; }
body.brand-mode .brand img { background: #fbf9f3; border-radius: 12px; padding: 4px 8px; height: 56px; width: auto; }
body.brand-mode .brand .brand-sub { color: var(--brand); font-weight: 600; letter-spacing: .04em; }
body.brand-mode.portal-on .brand .brand-sub { color: color-mix(in srgb, var(--brand) 35%, #fff); }
body.brand-mode .sheet-logo { width: auto; height: 72px; }
body.brand-mode .sheet .btn.wa { background: var(--brand); border-color: var(--brand); }
body.brand-mode .sheet .btn.primary { background: var(--brand); border-color: var(--brand); }

/* signed in: the dark portal with the business's tint instead of cyan and violet */
body.brand-mode.portal-on {
  --accent: color-mix(in srgb, var(--brand) 40%, #f2f0d8);
  --blue: color-mix(in srgb, var(--brand) 45%, #ffffff);
  --line-hi: color-mix(in srgb, var(--brand) 55%, transparent);
  --neo: linear-gradient(120deg, color-mix(in srgb, var(--brand) 35%, #f2f0d8) 0%, color-mix(in srgb, var(--brand) 60%, #d9c9a3) 100%);
  --glass-edge: linear-gradient(135deg, color-mix(in srgb, var(--brand) 60%, transparent), rgba(255, 255, 255, 0.08) 50%, color-mix(in srgb, var(--brand) 45%, transparent));
}
body.brand-mode.portal-on::before { background: radial-gradient(50% 40% at 85% -5%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 62%),
  radial-gradient(45% 45% at -5% 35%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%); }
@media (max-width: 560px) { body.brand-mode .brand img { height: 44px; } }