/* ============================================================================
   CrewX brand layer — v3.4.2
   Colours sampled directly from the official CrewX logo artwork
   (design-proposals/latest). Loaded AFTER the design system so these brand
   tokens/overrides win. Scope is intentionally narrow: the brand marks, the
   gradient "X", the favicon/app theme, and the login hero. The working
   application UI palette (tables, buttons, badges, pages) is left untouched.
   ----------------------------------------------------------------------------
   Palette
     Deep navy field ....... #00002E  (logo background)
     X gradient (warm→cool)  #E0457E pink → #E8823C orange → #8B3FD0 violet → #3F47C9 blue
     Wordmark "Crew" ....... #FFFFFF on dark / navy on light
   ========================================================================== */
:root{
  /* Navy field */
  --cx-navy-900:#00002E;
  --cx-navy-800:#0A0A3C;
  --cx-navy-700:#11114E;
  /* Signature gradient stops */
  --cx-pink:#E0457E;
  --cx-orange:#E8823C;
  --cx-violet:#8B3FD0;
  --cx-blue:#3F47C9;
  /* The hero gradient that defines the brand (matches the logo "X") */
  --cx-gradient:linear-gradient(115deg,#E0457E 0%,#E8823C 28%,#8B3FD0 68%,#3F47C9 100%);
  --cx-gradient-rev:linear-gradient(115deg,#3F47C9 0%,#8B3FD0 32%,#E8823C 72%,#E0457E 100%);
}

/* ── The gradient "X" used in the Crew[X] wordmark everywhere ──────────────── */
.cx-x{
  background:var(--cx-gradient);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-weight:inherit;
}

/* Reusable brand-gradient helpers (optional accents) */
.cx-grad-bg{ background:var(--cx-gradient); color:#fff; }
.cx-grad-text{
  background:var(--cx-gradient);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.cx-grad-rule{ height:3px; border:0; border-radius:3px; background:var(--cx-gradient); }

/* ── Login hero, re-skinned to the CrewX identity ─────────────────────────── */
.login-left{
  background:
    radial-gradient(circle at 16% 6%,  rgba(224,69,126,.32), transparent 50%),
    radial-gradient(circle at 92% 14%, rgba(139,64,208,.28), transparent 48%),
    radial-gradient(circle at 82% 100%,rgba(63,71,201,.34),  transparent 55%),
    linear-gradient(180deg,#0A0A3C 0%,#00002E 100%) !important;
}
/* The thin accent rule under the headline picks up the brand gradient */
.login-left .brand-headline .rule{
  background:var(--cx-gradient) !important;
  height:3px; border-radius:3px;
}

/* Brand-mark chip (desktop login-left, dark panel): subtle glass + gradient X */
.brand-mark .mark{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(63,71,201,.22);
}
/* Brand-mark chip (mobile login card, white surface): navy + gradient X */
.login-card-brand .mark{
  background:var(--cx-navy-900) !important;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(63,71,201,.25) !important;
}
.brand-mark .mark svg,
.login-card-brand .mark svg{ width:72%; height:72%; }

/* ── Official CrewX wordmark image (white-on-transparent PNG) ──────────────── */
/* Desktop login hero (navy panel) — wordmark sits directly on the navy. */
.cx-login-logo{ height:64px; width:auto; display:block; }
/* Navy badge so the white wordmark stays legible on LIGHT surfaces
   (the white topbar + the white mobile login card). */
.cx-logo-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background:#00002E;                 /* exact CrewX logo navy — no blue tint */
  border-radius:12px; padding:8px 18px;
  box-shadow:0 2px 8px rgba(0,0,0,.16); /* neutral shadow (was an indigo/blue glow) */
}
/* CrewX topbar wordmark: 90% of the topbar height (matches client + ITL logos). */
.cx-topbar-logo{ height:calc(var(--header-h) * 0.9); width:auto; display:block; }
.cx-card-logo{ height:42px; width:auto; display:block; }
/* In the topbar the navy badge hugs the wordmark vertically so the whole badge
   stays at ~90% of the bar; horizontal padding gives the navy chrome. */
.topbar-center .cx-logo-badge{ padding:0 16px; background:transparent; box-shadow:none; }

/* ── In-app copyright footer (mirrors the login screen's bottom-left ©) ────── */
.sidebar{ display:flex; flex-direction:column; }      /* lets the footer sit at the bottom */
.sidebar-foot{
  margin-top:auto;                                    /* push to the bottom of the sidebar */
  display:flex; align-items:center; gap:8px;
  padding:16px 18px 8px; margin-bottom:2px;
  font-size:11px; font-weight:600; letter-spacing:.4px;
  color:var(--cs-text-tertiary,#94A3B8);
}
.sidebar-foot .sf-dot{ width:8px; height:8px; border-radius:50%; background:var(--cx-gradient); flex-shrink:0; }

/* ── Static app footer (Powered by ITL World) — declutters the user dropdown ── */
/* Topbar + footer unified to the CrewX navy #00002E (matches the brand mark). */
.topbar{ background:#00002E !important; }
.app-footer{
  position:fixed; left:0; right:0; bottom:0; height:34px;
  display:flex; align-items:center; justify-content:flex-start; padding:0 18px;
  background:#00002E; border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.88); letter-spacing:.3px; z-index:60;
}
.app-footer .ftr-copy{ font-size:11px; opacity:.85; }              /* © on the left */
/* brand absolutely centred so it stays in the middle regardless of the © width */
.app-footer .ftr-brand{ position:absolute; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; font-size:13.5px; }
.app-footer strong{ color:#fff; font-weight:700; }
.app-footer .ftr-dot{ width:9px; height:9px; border-radius:50%; background:var(--cx-gradient); display:inline-block; }
.content{ padding-bottom:46px !important; }   /* clearance so the fixed footer never hides the last rows */
.sidebar{ padding-bottom:46px; }              /* clear the full-width footer */
/* On phones the absolute-centred brand overlaps the © — collapse the footer to a
   single, statically-centred brand line so nothing overlaps. */
@media(max-width:640px){
  .app-footer{ justify-content:center; padding:0 10px; }
  .app-footer .ftr-copy{ display:none; }
  .app-footer .ftr-brand{ position:static; left:auto; transform:none; font-size:11.5px; }
}

/* ── Client-side table pagination bar ─────────────────────────────────────── */
.cs-pager{
  display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 4px 2px; flex-wrap:wrap;
  font-size:12px; color:var(--cs-text-tertiary,#6B7280);
}
.cs-pager-ctrls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cs-pager-pg{ min-width:96px; text-align:center; font-weight:600; color:var(--text,#1F2937); }

/* ── Topbar Refresh button spin while reloading ───────────────────────────── */
@keyframes cxSpin { to { transform: rotate(360deg); } }
#topbar-refresh-btn.cx-spin { animation: cxSpin .7s linear infinite; }

/* ── "Install CrewX" prompt banner ────────────────────────────────────────── */
.cx-install-banner{
  position:fixed; left:50%; bottom:54px; transform:translate(-50%, 20px);
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--cs-border-subtle,#E5E7EB);
  border-radius:14px; padding:12px 16px; box-shadow:0 12px 34px rgba(0,0,0,.22);
  z-index:2000; max-width:min(460px,94vw); width:max-content;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.cx-install-banner.show{ opacity:1; transform:translate(-50%, 0); }
.cx-install-banner .cxib-logo{ font-size:24px; flex-shrink:0; }
.cx-install-banner .cxib-text{ display:flex; flex-direction:column; min-width:0; }
.cx-install-banner .cxib-text strong{ color:var(--brand-dark,#0B2056); font-size:14px; }
.cx-install-banner .cxib-text span{ color:var(--cs-text-secondary,#6B7280); font-size:12px; }
.cx-install-banner .cxib-actions{ display:flex; gap:8px; flex-shrink:0; }
@media(max-width:640px){
  .cx-install-banner{ left:10px; right:10px; bottom:46px; transform:translateY(20px); max-width:none; width:auto; flex-wrap:wrap; }
  .cx-install-banner.show{ transform:translateY(0); }
  .cx-install-banner .cxib-actions{ margin-left:auto; }
}

/* ── Role-aware Help / FAQ panel ──────────────────────────────────────────── */
.faq-body{ padding:6px 4px; }
.faq-item{ border-bottom:1px solid var(--cs-border-subtle,#E5E7EB); }
.faq-item:last-child{ border-bottom:0; }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:12px 8px; font-size:14px; font-weight:600; color:var(--brand-dark,#0B2056);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq-q:hover{ background:var(--cs-bg-muted,#F3F4F6); }
.faq-caret{ font-size:18px; font-weight:700; color:var(--cx-blue,#3F47C9); flex-shrink:0; }
.faq-a{ display:none; padding:0 8px 14px; font-size:13.5px; color:var(--cs-text-secondary,#374151); line-height:1.55; }
.faq-a.open{ display:block; }