/* ==========================================================================
   CastiloCloud — CloudStack login page theme
   Applies only while CloudStack shows its login / forgot-password screens
   (CloudStack adds class "userLayout" to <body> on those screens).
   ========================================================================== */

/* ── Inter, served from this server (same file in every browser) ── */
@font-face {
  font-family: "CC Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "CC Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cc-navy: #1B3A8C;
  --cc-royal: #1E6DC8;
  --cc-sky: #42A0DC;
  --cc-pale: #8DD4F0;
  --cc-ink: #0d1b3e;
  --cc-mist: #f0f6fc;
  --cc-mid: #4a5a7a;
  --cc-rule: #d0e4f4;
  --cc-brand-w: 50%;
  --cc-foot-h: 64px;
}

/* ── Brand panel (static markup in index.html, hidden outside login) ── */
#cc-brand { display: none; }

body.userLayout #cc-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--cc-brand-w);
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  color: #fff;
  font-family: "CC Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 85% 12%, rgba(66, 160, 220, .28) 0%, transparent 42%),
    radial-gradient(circle at 10% 95%, rgba(30, 109, 200, .30) 0%, transparent 45%),
    linear-gradient(150deg, #0a1a44 0%, #0d1b3e 40%, #14307a 100%);
  z-index: 1;
}

/* faint dotted grid */
body.userLayout #cc-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(141, 212, 240, .14) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 75%);
          mask-image: linear-gradient(160deg, #000 0%, transparent 75%);
  pointer-events: none;
}

.cc-top, .cc-copy, .cc-bottom { position: relative; z-index: 2; }

.cc-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: 100px;
  background: rgba(13, 27, 62, .55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(141, 212, 240, .22);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cc-pale);
}
.cc-pill-arcs { width: 15px; height: 15px; flex-shrink: 0; overflow: visible; }
.cc-pill-arcs path { fill: none; stroke-linecap: round; }
.cc-pill i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
  animation: cc-ping 2.4s ease-out infinite;
}
@keyframes cc-ping {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  100% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
}

.cc-visual {
  /* Fills the space between the badge and the headline, so the arcs can
     never run into the text, whatever the window height. */
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin: -34px -4% clamp(16px, 3vh, 32px) 0;   /* tuck under the badge, bleed right */
  pointer-events: none;
  animation: cc-float 9s ease-in-out infinite;
}
.cc-visual svg {
  display: block;
  height: 100%;
  width: auto;
  max-width: min(100%, 600px);
  overflow: visible;
}
@media (max-height: 560px) { .cc-visual { display: none; } }
.cc-copy { max-width: 520px; margin-top: auto; }
.cc-copy h1 {
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0 0 18px;
  color: #fff;
}
.cc-copy h1 em { font-style: normal; color: var(--cc-sky); }
.cc-copy p {
  font-size: clamp(.92rem, 1.05vw, 1.02rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .66);
  margin: 0;
  max-width: 500px;
}

.cc-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .09);
}
.cc-stats li { background: rgba(13, 27, 62, .72); padding: 14px 14px 13px; }
.cc-stats b {
  display: block;
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--cc-sky);
}
.cc-stats span { display: block; font-size: 11px; color: rgba(255, 255, 255, .5); margin-top: 3px; }

.cc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .42);
}
.cc-bottom nav { display: flex; gap: 18px; }
.cc-bottom a { color: rgba(255, 255, 255, .62); text-decoration: none; transition: color .2s; }
.cc-bottom a:hover { color: var(--cc-pale); }
.cc-legal { display: flex; align-items: center; gap: 18px; }
.cc-copy-right { color: rgba(255, 255, 255, .42); }
.cc-rainbow { display: flex; gap: 5px; align-items: center; }
.cc-rainbow s { display: block; height: 3px; border-radius: 3px; text-decoration: none; }

/* CloudStack's UI kit turns on tabular numbers everywhere; with Inter that can
   spread hyphens apart ("sign - on"). Not needed on the login screens. */
body.userLayout #cc-brand, body.userLayout #cc-brand *,
body.userLayout .user-layout, body.userLayout .user-layout * {
  font-feature-settings: normal !important;
  font-variant-numeric: normal !important;
}

/* ── Form side ── */
body.userLayout { background: #fff; }

body.userLayout #app {
  position: fixed;
  inset: 0 0 var(--cc-foot-h) var(--cc-brand-w);
  overflow-y: auto;
  background:
    radial-gradient(circle at 100% 0%, rgba(141, 212, 240, .16) 0%, transparent 38%),
    #fff;
}

body.userLayout .user-layout {
  position: relative;
  min-height: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 24px 32px;
  background: transparent;
  font-family: "CC Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

body.userLayout .user-layout-container {
  position: static;
  top: auto;
  transform: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 400px;
  animation: cc-rise .6s cubic-bezier(.2, .7, .2, 1) backwards;
}
@keyframes cc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

body.userLayout .user-layout-header { text-align: center; }
body.userLayout .user-layout-logo { margin: 0 auto 6px; max-width: 100%; }

body.userLayout .user-layout-header::after {
  content: "Welcome back";
  display: block;
  margin-top: 22px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--cc-ink);
}
body.userLayout #formLogin::before {
  content: "Sign in to manage your instances, storage and networks.";
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cc-mid);
  margin: 6px 0 26px;
}

body.userLayout .user-layout-login { width: 100%; max-width: 400px; min-width: 0; }

/* Tabs → segmented control */
body.userLayout .user-layout-login .ant-tabs-nav { margin: 0 0 22px; }
body.userLayout .user-layout-login .ant-tabs-nav::before,
body.userLayout .user-layout-login .ant-tabs-ink-bar { display: none; }
body.userLayout .user-layout-login .ant-tabs-nav-wrap { justify-content: center; }
body.userLayout .user-layout-login .ant-tabs-nav-list {
  width: 100%;
  background: var(--cc-mist);
  border: 1px solid var(--cc-rule);
  border-radius: 12px;
  padding: 4px;
}
body.userLayout .user-layout-login .ant-tabs-tab {
  flex: 1;
  justify-content: center;
  margin: 0 !important;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-mid);
  transition: background .2s, color .2s, box-shadow .2s;
}
body.userLayout .user-layout-login .ant-tabs-nav-operations { display: none !important; }
body.userLayout .user-layout-login .ant-tabs-nav-wrap { overflow: visible; }
body.userLayout .user-layout-login .ant-tabs-tab-btn { white-space: nowrap; }
body.userLayout .user-layout-login .ant-tabs-tab:hover { color: var(--cc-navy); }
body.userLayout .user-layout-login .ant-tabs-tab-active {
  background: #fff;
  box-shadow: 0 2px 10px rgba(27, 58, 140, .12);
}
body.userLayout .user-layout-login .ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--cc-navy) !important; }
body.userLayout .user-layout-login .ant-tabs-tab-disabled,
body.userLayout .user-layout-login .ant-tabs-tab-disabled .ant-tabs-tab-btn { color: #a9b6cc !important; }

/* Inputs */
body.userLayout .user-layout-login .ant-form-item { margin-bottom: 16px; }
body.userLayout .user-layout-login .ant-input-affix-wrapper,
body.userLayout .user-layout-login .ant-select-selector {
  border-radius: 11px !important;
  border-color: var(--cc-rule) !important;
  background: #f7fbff !important;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body.userLayout .user-layout-login .ant-input-affix-wrapper-lg { padding: 11px 14px; }
body.userLayout .user-layout-login .ant-input-affix-wrapper .ant-input { background: transparent; font-size: 15px; }
body.userLayout .user-layout-login .ant-input-affix-wrapper:hover { border-color: var(--cc-sky) !important; }
body.userLayout .user-layout-login .ant-input-affix-wrapper-focused {
  background: #fff !important;
  border-color: var(--cc-sky) !important;
  box-shadow: 0 0 0 4px rgba(66, 160, 220, .16) !important;
}
body.userLayout .user-layout-login .ant-input-prefix { color: var(--cc-sky) !important; margin-right: 10px; font-size: 16px; }
body.userLayout .user-layout-login .ant-form-item-has-error .ant-input-affix-wrapper { border-color: #e05252 !important; }

/* Sign-in button */
body.userLayout .user-layout-login button.login-button {
  height: 50px;
  margin-top: 6px;
  border: none;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  background: linear-gradient(135deg, var(--cc-navy) 0%, var(--cc-royal) 100%);
  box-shadow: 0 8px 24px rgba(27, 58, 140, .28);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
body.userLayout .user-layout-login button.login-button:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(30, 109, 200, .34);
  filter: brightness(1.06);
}
body.userLayout .user-layout-login button.login-button[disabled] { opacity: .75; color: #fff; }

/* CloudStack reserves 100px for Google/GitHub buttons even when none are set up */
body.userLayout .user-layout-login .center:empty { display: none; }

/* Language + forgot password row */
body.userLayout .user-layout-login .ant-row { align-items: center; font-size: 13.5px; }
body.userLayout .user-layout-login a { color: var(--cc-royal); font-weight: 600; }
body.userLayout .user-layout-login a:hover { color: var(--cc-sky); }

/* Footer under the form: static markup in index.html (#cc-form-foot), so a GUI
   theme or config setting can never blank it. CloudStack's own footer is hidden. */
body.userLayout .user-layout-footer { display: none !important; }
#cc-form-foot { display: none; }
body.userLayout #cc-form-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 5px;
  position: fixed;
  left: var(--cc-brand-w);
  right: 0;
  bottom: 0;
  height: var(--cc-foot-h);
  padding: 0 24px 6px;
  text-align: center;
  font: 400 12.5px/1.7 "CC Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #7d8aa5;
  background: #fff;
  z-index: 2;
}
body.userLayout #cc-form-foot a { color: var(--cc-royal); font-weight: 600; text-decoration: none; white-space: nowrap; }
body.userLayout #cc-form-foot a:hover { color: var(--cc-sky); }
/* Copyright under the form only on phones/tablets (desktop shows it in the brand panel) */
body.userLayout #cc-form-foot .cc-foot-copy { display: none; }

/* If a logo with a white background is ever used (e.g. from a GUI theme),
   blend the white away so no box shows on the tinted page. */
body.userLayout .user-layout-logo { mix-blend-mode: multiply; }

/* ── Dark layout mode (if @layout-mode is set to dark) ── */
body.userLayout.dark-mode #app, body.userLayout.dark-mode #cc-form-foot { background: #0f1629; }
body.userLayout.dark-mode .user-layout-header::after { color: #fff; }
body.userLayout.dark-mode #formLogin::before { color: rgba(255, 255, 255, .6); }
body.userLayout.dark-mode .user-layout-login .ant-tabs-nav-list { background: #16203a; border-color: #24335a; }
body.userLayout.dark-mode .user-layout-login .ant-tabs-tab-active { background: #24335a; }
body.userLayout.dark-mode .user-layout-login .ant-tabs-tab-active .ant-tabs-tab-btn { color: #fff !important; }
body.userLayout.dark-mode .user-layout-login .ant-input-affix-wrapper { background: #16203a !important; border-color: #24335a !important; }

/* ── Tablet & phone: brand panel collapses, form becomes a card ── */
@media (max-width: 960px) {
  /* Phones & tablets: an ordinary top-to-bottom page (card, then footer) that
     scrolls as one. No pinned/fixed parts, so iPhone Safari/Chrome toolbars
     that grow and shrink can never make the footer overlap the card. */
  html:has(body.userLayout) { height: auto; }
  body.userLayout {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(circle at 90% 0%, rgba(66, 160, 220, .22) 0%, transparent 45%),
      linear-gradient(160deg, #f5f9ff 0%, #e4f0fb 60%, #eef4ff 100%) fixed;
    background-color: #eef4ff;
  }
  body.userLayout #cc-brand { display: none; }
  body.userLayout #app {
    position: static;
    order: 1;
    flex: 1 0 auto;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: transparent;
  }
  body.userLayout .user-layout { flex: 1 0 auto; min-height: 0; padding: 28px 16px 20px; }
  body.userLayout #cc-form-foot {
    order: 2;
    position: static;
    height: auto;
    padding: 4px 20px calc(20px + env(safe-area-inset-bottom));
    background: transparent;
    line-height: 1.8;
  }
  body.userLayout #cc-form-foot .cc-foot-copy { display: inline; width: 100%; }
  body.userLayout .user-layout-container {
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--cc-rule);
    border-radius: 22px;
    padding: 32px clamp(18px, 5vw, 32px) 24px;
    box-shadow: 0 24px 60px rgba(13, 27, 62, .10);
  }
  body.userLayout.dark-mode { background: #0b1222; }
  body.userLayout.dark-mode .user-layout-container { background: #0f1629; border-color: #24335a; }
}
@media (max-width: 420px) {
  body.userLayout .user-layout-header::after { font-size: 22px; margin-top: 16px; }
  body.userLayout .user-layout-login .ant-tabs-tab { padding: 9px 6px; font-size: 13px; }
  body.userLayout .user-layout-login .ant-tabs-tab .anticon { margin-right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-visual, .cc-pill i, body.userLayout .user-layout-container { animation: none !important; }
}

/* ── Startup loader (index.html) ── */
.cc-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #fff;
  font: 600 13px "CC Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cc-navy);
}