/* Celvesta walnut + ivory theme (light mode only) */
:root:not(.dark) {
  --background: #F5F2EE;
  --foreground: #3A302A;
  --card: #FBF9F6;
  --card-foreground: #3A302A;
  --popover: #FBF9F6;
  --popover-foreground: #3A302A;
  --primary: #6B4632;
  --primary-foreground: #F5F2EE;
  --secondary: #EAE2D8;
  --secondary-foreground: #4A3526;
  --muted: #EAE2D8;
  --muted-foreground: #7A6A5E;
  --accent: #E9DFD2;
  --accent-foreground: #4A3526;
  --border: #DDD2C4;
  --input: #DDD2C4;
  --ring: #B08D57;
  --chart-1: #6B4632;
  --chart-2: #B08D57;
  --chart-3: #8A6748;
  --chart-4: #C9A66B;
  --chart-5: #8C6A4F;
  --sidebar: #3A261C;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #B08D57;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #6B4632;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #5A3B2B;
  --sidebar-ring: #B08D57;
}

/* Celvesta login panel: wordmark, tagline, features, network pattern */
#auth .background {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(176, 141, 87, 0.22), transparent 60%),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23B08D57' stroke-opacity='0.14' stroke-width='1'><path d='M10 30 L80 70 L150 20 M80 70 L110 140 L40 160 L10 30 M110 140 L170 120 L150 20'/></g><g fill='%23B08D57' fill-opacity='0.35'><circle cx='10' cy='30' r='2.5'/><circle cx='80' cy='70' r='2.5'/><circle cx='150' cy='20' r='2.5'/><circle cx='110' cy='140' r='2.5'/><circle cx='40' cy='160' r='2.5'/><circle cx='170' cy='120' r='2.5'/></g></svg>") 0 0 / 180px 180px repeat,
    linear-gradient(135deg, #3A261C 0%, #24150E 100%);
  border-left: 3px solid #B08D57;
}
#auth .background::before {
  content: "CELVESTA";
  display: block;
  width: fit-content;
  color: #F5F2EE;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0.32em;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 2px solid #B08D57;
}
#auth .background::after {
  content: "Carrier-grade voice, simply managed\A\A Live call monitoring\A Real-time statistics\A Secure account access";
  display: block;
  white-space: pre-line;
  color: rgba(245, 242, 238, 0.9);
  font-size: 16px;
  line-height: 2.4em;
  padding-left: 1.6em;
  background:
    radial-gradient(circle, #B08D57 0.2em, transparent 0.22em) 0 5.5em / 1em 1em no-repeat,
    radial-gradient(circle, #B08D57 0.2em, transparent 0.22em) 0 7.9em / 1em 1em no-repeat,
    radial-gradient(circle, #B08D57 0.2em, transparent 0.22em) 0 10.3em / 1em 1em no-repeat;
}

/* Celvesta login: phones and narrow windows. The stock portal hides the panel here;
   this keeps the brand as a header band above the form. */
@media screen and (max-width: 800px) {
  #auth { flex-direction: column; justify-content: flex-start; }
  #auth .background {
    flex: 0 0 auto;
    padding: 38px 34px 28px 34px;
    border-left: 0;
    border-bottom: 3px solid #B08D57;
  }
  #auth .background::before {
    font-size: 26px;
    letter-spacing: 0.28em;
    padding-bottom: 12px;
    margin-bottom: 0;
  }
  #auth .background::after { display: none; }
  #auth .login-form-container { width: 100%; flex: 1 1 auto; }
}

/* ===== Celvesta portal login v2: matches admin login ===== */
:root:not(.dark) { --primary: #3A261C; }
#auth .background::before, #auth .background::after { content: none !important; display: none !important; }
#auth .background { flex: 1 1 560px !important; min-width: 0; display: flex; flex-direction: column; justify-content: space-between !important; gap: 40px; padding: clamp(28px, 6vh, 56px) 64px !important; box-sizing: border-box; color: #F5F2EE; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-align: left; border-left: 0 !important; border-right: 3px solid #B08D57; }
#auth .background > div { position: relative; }
#auth .cv-brand-top { display: flex; align-items: center; gap: 14px; }
#auth .cv-mark { width: 44px; height: 44px; box-sizing: border-box; border: 2px solid #B08D57; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: #F5F2EE; }
#auth .cv-word { font-size: 22px; font-weight: 800; letter-spacing: 0.28em; color: #F5F2EE; }
#auth .cv-logo { max-height: 64px; max-width: 240px; object-fit: contain; }
#auth .cv-company { font-size: 20px; font-weight: 700; color: #F5F2EE; }
#auth .cv-headline { margin: 0 0 28px; max-width: 460px; font-size: clamp(28px, 4.2vh, 40px); line-height: 1.15; font-weight: 700; color: #F5F2EE; }
#auth .cv-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; font-size: 16px; color: #E8E1D9; }
#auth .cv-features li { display: flex; align-items: center; gap: 12px; }
#auth .cv-features svg { width: 20px !important; height: 20px !important; flex: none; }
#auth .cv-brand-foot { font-size: 13px; color: #CFC4B8; }
#auth .login-form-container { width: auto !important; flex: 1 1 480px; min-width: 0; align-items: center; padding: 24px 24px 0; box-sizing: border-box; background: #F5F2EE !important; }
#auth .login-logo { display: none !important; }
#auth .login-form { flex: 0 0 auto !important; margin: auto 0; width: 100%; max-width: 420px; background: #FFFFFF; border: 1px solid #D5CCC2; border-radius: 16px; box-shadow: 0 12px 32px rgba(58, 38, 28, 0.10); padding: 40px !important; box-sizing: border-box; gap: 18px !important; text-align: left; }
#auth .login-title { margin: 0 0 6px !important; font-size: 28px !important; line-height: 1.2; font-weight: 700 !important; color: #3A261C !important; text-align: left; }
#auth .login-title::after { content: "Customer portal"; display: block; margin-top: 6px; font-size: 15px; font-weight: 400; color: #6B5D52; }
#auth .login-form input { height: 48px !important; border-radius: 10px !important; background: #FDFCFA !important; border-color: #CFC4B8 !important; font-size: 15px !important; }
#auth .login-form button { height: 50px !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 700 !important; background: #3A261C !important; color: #F5F2EE !important; }
#auth .login-form button:hover { background: #24170F !important; }
html.cv-branded #auth .login-footer::before { content: "Powered by CELVESTA"; margin-right: 16px; font-size: 13px; letter-spacing: 0.06em; color: #6B5D52; }
@media screen and (max-width: 800px) {
  #auth .background { flex: 0 0 auto !important; padding: 18px 20px !important; gap: 0; border-right: 0; border-bottom: 3px solid #B08D57; }
  #auth .cv-brand-mid, #auth .cv-brand-foot { display: none; }
  #auth .cv-mark { width: 36px; height: 36px; font-size: 16px; }
  #auth .cv-word { font-size: 18px; }
  #auth .cv-logo { max-height: 44px; }
  #auth .login-form-container { width: 100% !important; flex: 1 1 auto; padding: 20px 16px 0; }
  #auth .login-form { margin: 0; padding: 22px 20px !important; gap: 14px !important; }
  #auth .login-title { font-size: 22px !important; }
}

/* Celvesta portal login: customer logo on the card, company name on walnut */
#auth .cv-company-word { font-size: 26px; font-weight: 800; letter-spacing: 0.02em; color: #F5F2EE; line-height: 1.2; }
html.cv-has-logo #auth .login-form::before { content: ""; display: block; width: 100%; max-width: 260px; height: 72px; margin-bottom: 4px; background: var(--cv-logo) left center / contain no-repeat; }
@media screen and (max-width: 800px) { #auth .cv-company-word { font-size: 18px; } html.cv-has-logo #auth .login-form::before { height: 56px; } }

/* Celvesta portal login: customer logo centred in a white band at the top of the card */
html.cv-has-logo #auth .login-form { overflow: hidden; }
html.cv-has-logo #auth .login-form::before { box-sizing: border-box; width: calc(100% + 80px); max-width: none; height: 140px; margin: -40px -40px 8px; padding: 28px 40px 24px; background: #FFFFFF var(--cv-logo) center / contain no-repeat; background-origin: content-box; background-clip: border-box; border-bottom: 2px solid #B08D57; }
@media screen and (max-width: 800px) {
  html.cv-has-logo #auth .login-form::before { width: calc(100% + 40px); height: 112px; margin: -22px -20px 4px; padding: 20px 20px 18px; }
}

/* Celvesta portal login: taller logo band on big screens */
@media screen and (min-width: 801px) and (min-height: 851px) {
  html.cv-has-logo #auth .login-form::before { height: 156px; }
}