@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

.default {
  --color-main: #4d266f;
  --color-secondary: #7253a2;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --color-navbar-text: #ffffff;
  --color-button-text: #ffffff;
  --color-button-text-alternate: #ffffff;
  --color-footer: #011d30;
  --color-portal-background: #7dd3fc;
  --color-login-text: #ffffff;
  --login-background-image: url("/images/login-background.jpg");
}

.pink {
  --color-main: #ff1493;
  --color-secondary: #ff00ff;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --login-background-image: url("/images/login-background.jpg");
}

.aqua {
  --color-main: #00ffff;
  --color-secondary: #7253a2;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --login-background-image: url("/images/login-background.jpg");
}

.talktelecom {
  --color-main: #9fb5cc;
  --color-secondary: #0f57a8;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --color-navbar-text: #000000;
  --color-button-text: #000000;
  --color-button-text-alternate: #ffffff;
  --color-footer: #0f57a8;
  --login-background-image: url("/images/login-background.jpg");
}

.infinitel {
  --color-main: #26b2e4;
  --color-secondary: #3167b3;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --color-navbar-text: #ffffff;
  --color-button-text: #ffffff;
  --color-button-text-alternate: #ffffff;
  --color-footer: #011d30;
  --color-login-text: #ffffff;
  --login-background-image: url("/images/custom/infinitel-login-background.jpg");
  --login-extra-logo: url("/images/logos/infinitel-extra-logo.png");
}

.qstesteup {
  --color-main: #4d266f;
  --color-secondary: #7253a2;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --color-navbar-text: #ffffff;
  --color-button-text: #ffffff;
  --color-button-text-alternate: #ffffff;
  --color-footer: #011d30;
  --color-portal-background: #7dd3fc;
  --color-login-text: #ffffff;
  --login-background-image: url("/images/custom/qstesteup-login-background.jpg");
}

.smartnumbers {
  --color-main: #df038c;
  --color-secondary: #004666;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --color-navbar-text: #ffffff;
  --color-button-text: #ffffff;
  --color-button-text-alternate: #ffffff;
  --color-footer: #011d30;
  --color-login-text: #ffffff;
  --login-background-image: url("/images/custom/bg-3.svg");
}

.colvait {
  --color-main: #23beed;
  --color-secondary: #004666;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --color-navbar-text: #ffffff;
  --color-button-text: #ffffff;
  --color-button-text-alternate: #ffffff;
  --color-footer: #011d30;
  --color-login-text: #ffffff;
  --login-background-image: url("/images/custom/colva-it-login-background.jpg");
}

.greenip {
  --color-main: #072719;
  --color-secondary: #F8F3E9;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --color-navbar-text: #ffffff;
  --color-button-text: #ffffff;
  --color-button-text-alternate: #000000;
  --color-footer: #719737;
  --color-login-text: #ffffff;
  --color-portal-background: #072719;
  --login-background-image: url("/images/custom/greenip-login-background.jpg");
}

.telbridge {
  --color-main: #4d266f;
  --color-secondary: #7253a2;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --color-navbar-text: #ffffff;
  --color-button-text: #ffffff;
  --color-button-text-alternate: #ffffff;
  --color-footer: #011d30;
  --color-portal-background: #8858A0;
  --color-login-text: #ffffff;
  --login-background-image: url("/images/telbridge-login-background.jpg");
}


.assembly {
  --color-main: #C51E1E;
  --color-secondary: #312F3C;
  --color-prd-blue: #41bbc9;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --color-navbar-text: #ffffff;
  --color-button-text: #ffffff;
  --color-button-text-alternate: #ffffff;
  --color-footer: #011d30;
  --color-portal-background: #ffffff;
  --color-login-text: #ffffff;
  --login-background-image: url("/images/assembly-login-background.jpg");
}

.xelion {
  --color-main: #FF5D15;
  --color-secondary: #D35118;
  --color-prd-blue: #FF5D15;
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #3b9f91;
  --color-prd-gray: #ededed;
  --color-prd-lt-purple: #cccee5;
  --color-prd-dk-green: #011d30;
  --color-navbar-text: #ffffff;
  --color-button-text: #ffffff;
  --color-button-text-alternate: #ffffff;
  --color-footer: #ffffff;
  --color-portal-background: #F5F6FA;
  --color-login-text: #000000;
  --login-background-image: linear-gradient(#F5F6FA, #F5F6FA);
}

.xelion .login {
    background-size: contain;           /* fit the whole image instead of filling */
    background-position: center bottom; /* sit the people on the bottom edge — no white gap below */
    background-repeat: no-repeat;
}

/* =====================================================================
   ESSENTIALS — Intelligent Billing brand reskin (deep purple + navy).
   Theme-only: every rule is scoped under `.essentials` so no other
   theme is affected. Activated when orgInfo.Theme === "essentials"
   (body gets the `essentials` class on top of `default`).
   Login page only — dashboard / invoices reskin to follow.
   ===================================================================== */
.essentials {
  --color-main: #5b2d8e;            /* brand purple — primary buttons, accents */
  --color-secondary: #4a2475;       /* purple hover (darker) */
  --color-prd-blue: #8b5cf6;        /* violet accent */
  --color-prd-red: #e64583;
  --color-prd-sec-purple: #5d549a;
  --color-prd-green: #2f9e6b;       /* success / paid */
  --color-prd-gray: #ece6f6;        /* card border tint */
  --color-prd-lt-purple: #ece9f2;
  --color-prd-dk-green: #101a2c;    /* navy ink */
  --color-navbar-text: #1f2540;
  --color-button-text: #ffffff;
  --color-button-text-alternate: #ffffff;
  --color-footer: #101a2c;          /* navy footer */
  --color-portal-background: #f5f2fb; /* soft lavender app body */
  --color-login-text: #1f2540;
  /* fall-back so App.css `.login` has something; overridden below anyway */
  --login-background-image: none;

  font-family: 'Mulish', sans-serif;
}

.essentials h1,
.essentials h2,
.essentials h3,
.essentials h4,
.essentials h5,
.essentials h6,
.essentials button,
.essentials .btn {
  font-family: 'Poppins', sans-serif;
}

/* ---- Login: full-viewport lavender backdrop with faint 28px grid ---- */
.essentials .login {
  position: relative;
  overflow: hidden;
  background-color: #f5f2fb;
  background-image:
    linear-gradient(rgba(91, 45, 142, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 45, 142, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: top left;
  background-repeat: repeat;
}

/* Two soft floating purple blobs (decorative) */
.essentials .login::before,
.essentials .login::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.essentials .login::before {
  width: 220px;
  height: 220px;
  top: -40px;
  left: -30px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.16), transparent 70%);
  animation: ess-floatA 12s ease-in-out infinite;
}
.essentials .login::after {
  width: 200px;
  height: 200px;
  bottom: -40px;
  right: -30px;
  background: radial-gradient(circle, rgba(91, 45, 142, 0.14), transparent 70%);
  animation: ess-floatB 14s ease-in-out infinite;
}

@keyframes ess-floatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(28px, -22px) scale(1.06); }
}
@keyframes ess-floatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-26px, 20px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .essentials .login::before,
  .essentials .login::after { animation: none; }
}

/* Centre the card regardless of CenterLoginScreen left-align variant */
.essentials .login > div {
  justify-content: center !important;
  margin-left: 0 !important;
  position: relative;
  z-index: 1;
}

/* ---- The login card ----
   These rules restyle the single-action SSO login card and are scoped to
   `.login-sso` (set only on the Login page), NOT `.login` — other pages reuse
   the `.login` background wrapper (SelectAccount, Signup, OrgPicker, …) and must
   keep their own layout, not get turned into a 312px card with a big button. */
.essentials .login-sso > div > div {
  position: relative;
  width: 312px;
  max-width: 90vw;
  gap: 0 !important;
  padding: 38px 32px 34px;
  background: #ffffff;
  border: 1px solid #ece6f6;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 22px 48px -24px rgba(60, 30, 100, 0.45);
  text-align: center;
}

/* 6px gradient bar flush across the top of the card */
.essentials .login-sso > div > div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #5b2d8e, #8b5cf6);
}

/* Reorder: logo on top, then title block, then button (DOM order differs) */
.essentials .login-sso > div > div > div:first-child { order: 2; }
.essentials .login-sso img { order: 1; }
.essentials .login-sso button { order: 3; }

/* Logo — Essentials ships a square circle logo; render at the design's 64px */
.essentials .login-sso img {
  height: 64px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  margin: 0 auto 22px !important;
}

/* Title block + headings */
.essentials .login-sso > div > div > div:first-child {
  gap: 4px !important;
  margin-bottom: 28px;
}
.essentials .login-sso h2:first-of-type {
  font-size: 22px;
  font-weight: 600;
  color: #1f2540;
  margin: 0;
}
.essentials .login-sso h2 + h2 { /* "Billing Portal" → subtitle */
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  margin: 0;
  font-family: 'Mulish', sans-serif;
}

/* ---- LOG IN button ---- */
.essentials .login-sso button {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: #5b2d8e;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 12px 24px -12px rgba(91, 45, 142, 0.7);
  transition: background 0.15s, transform 0.15s;
}
.essentials .login-sso button:hover {
  background: #4a2475;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ---- Invoice detail: call-category tabs ----
   The tab base text is dark navy, which is unreadable on the purple tab
   strip for non-selected tabs. Headless UI exposes stable ARIA roles, so
   scope to those: non-selected → white (on purple); selected → dark (on
   its white card). */
.essentials [role='tab'] {
  color: #ffffff;
}
.essentials [role='tab'][aria-selected='true'] {
  color: #1f2540;
}
/* Hover only the non-selected tabs: solid purple + white text.
   (The component's translucent hover bg renders near-white on the
   CSS-variable colour, which hides the white hover text.) */
.essentials [role='tab'][aria-selected='false']:hover {
  background-color: #5b2d8e;
  color: #ffffff;
}

/* ---- Footer ----
   This is Intelligent Billing's own portal, so the org (left) footer logo
   duplicates the IB (right) logo. Hide the left one and centre the rest.
   The org logo is the only direct <img> child of .container (the IB logo is
   nested in a <div>), so target it structurally rather than by alt text. */
.essentials footer .container > img {
  display: none;
}
.essentials footer .container {
  justify-content: flex-end;
}

/* ---- Homepage cover image ----
   The cover img is stretched to the Account Details card's height by the
   flex row, so object-cover crops the (wide, short) banner. Fit the whole
   image inside its box instead. object-cover is used only here. */
.essentials .object-cover {
  object-fit: contain;
}