/* ============================================================================
 * Portal shell, matched to the live Softr portals:
 *   Affiliate (CleverIntel): navy side menu.  Team (CleverCoat): light grey.
 * Breakpoints follow Softr's previews: mobile < 768 (top bar + drawer),
 * tablet 768-1279 (side menu, stacked header), desktop >= 1280.
 * Every class is ci- prefixed so nothing collides with the blocks' own CSS.
 * ========================================================================== */
:root {
  --ci-navy: #153b57;
  --ci-ink: #101f2d;
  --ci-muted: #5b6b7a;
  --ci-line: #e6eaee;
  --ci-side-w: 320px;
  --ci-rail-w: 84px;
  --ci-top-h: 60px;
  --ci-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ci-theme-affiliate {
  --ci-side-bg: #153b57; --ci-side-fg: #ffffff; --ci-side-on: rgba(255,255,255,.2);
  --ci-side-hover: rgba(255,255,255,.1); --ci-side-div: rgba(255,255,255,.35); --ci-side-sub: rgba(255,255,255,.85);
}
.ci-theme-team {
  --ci-side-bg: #f2f5f6; --ci-side-fg: #153b57; --ci-side-on: #dce1e5;
  --ci-side-hover: #e7ebee; --ci-side-div: #e2e6e9; --ci-side-sub: #3d566b;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.5; color: var(--ci-ink); background: #fff;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; }
.ci-ico { display: block; flex: 0 0 auto; }
.ci-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ci-skip { position: absolute; left: -9999px; }
.ci-skip:focus { left: 16px; top: 8px; z-index: 10000; background: #fff; padding: 8px 12px; border-radius: 6px; }
.ci-spacer { flex: 1; }
/* The blocks set body{font-family:'DM Sans'}; the shell keeps its own font. */
.ci-top, .ci-side, .ci-hero, .ci-links, .ci-user-menu, .ci-sheet, .ci-notice, .ci-login-page { font-family: var(--ci-font); }

/* ---------- mobile top bar ---------- */
.ci-top {
  display: none; position: sticky; top: 0; z-index: 900;
  height: calc(var(--ci-top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 14px 0;
  align-items: center; gap: 10px; background: var(--ci-side-bg); color: var(--ci-side-fg);
}
.ci-menu-btn {
  width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: inherit;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ci-top-logo img { height: 34px; width: auto; display: block; }

/* ---------- side menu ---------- */
.ci-side {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--ci-side-w); z-index: 850;
  background: var(--ci-side-bg); color: var(--ci-side-fg);
  display: flex; flex-direction: column; padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
}
.ci-side-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 6px 0 8px; margin-bottom: 26px; }
.ci-side-logo img { height: 46px; width: auto; display: block; }
.ci-collapse {
  width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: inherit;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ci-collapse:hover { background: var(--ci-side-hover); }
.ci-nav { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; overflow-y: auto; }
.ci-nav a {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px; margin-bottom: 5px;
  border-radius: 6px; color: var(--ci-side-fg); text-decoration: none; font-size: 18px; font-weight: 500; line-height: 1.25;
}
.ci-nav a:hover { background: var(--ci-side-hover); }
.ci-nav a.on { background: var(--ci-side-on); }
.ci-nav-div { height: 1px; background: var(--ci-side-div); margin: 14px 0 18px; }
.ci-side-foot { flex: 0 0 auto; padding-top: 12px; }

.ci-install {
  width: 100%; min-height: 50px; margin-bottom: 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--ci-ink); font: inherit; font-size: 18px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}

/* ---------- user card + menu ---------- */
.ci-user { position: relative; }
.ci-user-btn {
  width: 100%; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 8px; text-align: left;
}
.ci-user-side .ci-user-btn:hover { background: var(--ci-side-hover); }
.ci-avatar {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgba(21,59,87,.18); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ci-avatar img { width: 34px; height: 34px; display: block; }
.ci-user-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ci-user-name { font-size: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-user-mail { font-size: 15px; color: var(--ci-side-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-user-top .ci-user-btn { width: auto; padding: 4px; }
.ci-user-top .ci-avatar { width: 36px; height: 36px; }
.ci-user-top .ci-avatar img { width: 26px; height: 26px; }
.ci-user-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 1000;
  background: #fff; color: var(--ci-ink); border: 1px solid var(--ci-line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16,31,45,.18); padding: 6px; min-width: 240px;
}
.ci-user-top .ci-user-menu { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); }
.ci-user-menu-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--ci-line); margin-bottom: 4px; display: flex; flex-direction: column; }
.ci-user-menu-head span { color: var(--ci-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.ci-user-menu a, .ci-user-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px;
  border: 0; background: transparent; color: var(--ci-ink); font: inherit; font-size: 16px; text-decoration: none; border-radius: 6px; cursor: pointer; text-align: left;
}
.ci-user-menu a:hover, .ci-user-menu button:hover { background: #f2f5f6; }
.ci-user-menu form { margin: 0; }

.ci-scrim { position: fixed; inset: 0; background: rgba(16,31,45,.45); z-index: 940; }

/* ---------- content ---------- */
.ci-main { margin-left: var(--ci-side-w); min-height: 100vh; background: #fff; }
.ci-wrap { max-width: 1384px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- page header block (welcome / logo / links) ---------- */
.ci-hero { border-bottom: 1px solid #edf0f2; }
.ci-hero-in { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-top: 38px; padding-bottom: 30px; }
.ci-hero-date { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; color: var(--ci-navy); }
.ci-hero-h { margin: 16px 0 8px; font-size: 29px; line-height: 1.2; font-weight: 700; letter-spacing: -.4px; color: var(--ci-navy); }
.ci-hero-sub { margin: 0; font-size: 18px; color: var(--ci-navy); }
.ci-hero-logo { justify-self: center; width: 150px; height: auto; display: block; }
.ci-only-tablet, .ci-only-mobile { display: none; }

.ci-links { display: grid; gap: 18px; margin-top: 56px; grid-template-columns: repeat(4, 1fr); }
.ci-links-n3 { grid-template-columns: repeat(3, 1fr); }
.ci-links-n2 { grid-template-columns: repeat(2, 1fr); }
.ci-links-n1 { grid-template-columns: 1fr; }
.ci-links a {
  display: flex; align-items: center; gap: 14px; min-height: 70px; padding: 12px 16px; border-radius: 10px;
  text-decoration: none; font-size: 18px; font-weight: 600; line-height: 1.25; transition: transform .12s ease, box-shadow .12s ease;
}
.ci-links a:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,31,45,.12); }
.ci-link-ico { width: 36px; height: 36px; border-radius: 6px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.ci-link-txt { flex: 1; min-width: 0; }
.ci-link-chev { flex: 0 0 auto; }
.ci-links-dark a { background: #101f2d; color: #fff; }
.ci-links-dark .ci-link-ico { background: rgba(255,255,255,.07); }
.ci-links-light a { background: #fff; color: var(--ci-navy); border: 1px solid #e3e8ec; font-weight: 700; font-size: 19px; }
.ci-links-light .ci-link-ico { width: 46px; height: 46px; border-radius: 8px; background: #e8ebee; }
.ci-hero ~ .ci-block { margin-top: 32px; }
/* Softr puts every custom code block in the same centred container. */
.ci-block { padding-bottom: 32px; }

.ci-notice { max-width: 560px; margin: 64px auto; padding: 0 16px; text-align: center; }
.ci-notice h1 { font-size: 22px; margin: 0 0 8px; color: var(--ci-navy); }
.ci-notice p { color: var(--ci-muted); }

/* ---------- collapsed side menu (tablet and up) ---------- */
@media (min-width: 768px) {
  .ci-collapsed .ci-side { width: var(--ci-rail-w); padding-left: 12px; padding-right: 12px; }
  .ci-collapsed .ci-main { margin-left: var(--ci-rail-w); }
  .ci-collapsed .ci-side-logo, .ci-collapsed .ci-nav span, .ci-collapsed .ci-install span,
  .ci-collapsed .ci-user-txt, .ci-collapsed .ci-user-side .ci-ico { display: none; }
  .ci-collapsed .ci-side-head { justify-content: center; padding: 0; }
  .ci-collapsed .ci-collapse .ci-ico { transform: scaleX(-1); }
  .ci-collapsed .ci-nav a { justify-content: center; padding: 8px 0; }
  .ci-collapsed .ci-install { width: 50px; padding: 0; margin-left: auto; margin-right: auto; }
  .ci-collapsed .ci-user-btn { justify-content: center; padding: 6px 0; }
}

/* ---------- tablet ---------- */
@media (max-width: 1279px) {
  .ci-hero-in { grid-template-columns: 1fr; padding-top: 38px; padding-bottom: 0; }
  .ci-hero-logo { justify-self: start; width: 230px; margin: 52px 0 0 18px; }
  .ci-only-desktop { display: none; } .ci-only-tablet { display: inline; }
  .ci-links, .ci-links-n3, .ci-links-n2 { grid-template-columns: 1fr; margin-top: 56px; }
  .ci-wrap { padding-left: 28px; padding-right: 28px; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .ci-top { display: flex; }
  .ci-side { transform: translateX(-100%); transition: transform .22s ease; width: min(86vw, 320px); z-index: 950; }
  .ci-nav-open .ci-side { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .ci-collapse { display: none; }
  .ci-main { margin-left: 0; min-height: calc(100vh - var(--ci-top-h)); }
  .ci-wrap { padding-left: 19px; padding-right: 19px; }
  .ci-hero-in { padding-top: 34px; }
  .ci-hero-logo { width: 175px; margin: 40px 0 0 17px; }
  .ci-only-tablet { display: none; } .ci-only-mobile { display: inline; }
  .ci-links, .ci-links-n3, .ci-links-n2 { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 37px; }
  .ci-links a { min-height: 76px; padding: 12px 14px; font-size: 18px; }
  .ci-link-chev { display: none; }
  .ci-links-light .ci-link-ico { width: 42px; height: 42px; }
}

/* ---------- install help sheet ---------- */
.ci-sheet { position: fixed; inset: 0; z-index: 2000; background: rgba(16,31,45,.5); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.ci-sheet[hidden] { display: none; }
.ci-sheet-card {
  position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 28px 24px 24px; text-align: center;
  margin-bottom: env(safe-area-inset-bottom);
}
.ci-sheet-card img { border-radius: 14px; box-shadow: 0 0 0 1px var(--ci-line); }
.ci-sheet-card h2 { font-size: 20px; margin: 14px 0 8px; color: var(--ci-navy); }
.ci-sheet-card p { margin: 0; color: var(--ci-muted); font-size: 16px; }
.ci-sheet-card p .ci-ico { display: inline-block; vertical-align: -3px; }
.ci-sheet-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ci-muted); }
@media (min-width: 768px) { .ci-sheet { align-items: center; } }

/* ---------- login ---------- */
.ci-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: #f2f5f6; }
.ci-login {
  width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--ci-line);
  border-radius: 14px; padding: 32px 24px; box-shadow: 0 8px 30px rgba(16,31,45,.06);
}
.ci-login-logo { width: 170px; height: auto; display: block; margin: 0 auto 20px; }
.ci-login h1 { font-size: 24px; margin: 0; text-align: center; color: var(--ci-navy); }
.ci-login-sub { text-align: center; color: var(--ci-muted); margin: 4px 0 20px; }
.ci-login label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 14px; }
.ci-login input {
  display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 10px 12px;
  border: 1px solid #cbd3dd; border-radius: 8px; font: inherit; font-size: 16px;
}
.ci-login input:focus { outline: 2px solid var(--ci-navy); outline-offset: 1px; border-color: var(--ci-navy); }
.ci-login button {
  width: 100%; min-height: 48px; margin-top: 6px; border: 0; border-radius: 8px;
  background: var(--ci-ink); color: #fff; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
}
.ci-login-err { background: #fdecec; color: #9b1c1c; border-radius: 8px; padding: 10px 12px; font-size: 15px; }
.ci-login-help a, .ci-login-sub a { color: var(--ci-navy); font-weight: 500; }
.ci-login-help { text-align: center; color: var(--ci-muted); font-size: 14px; margin: 18px 0 0; }