@import url("../../elastic/styles/styles.min.css");

#layout-login, body.task-login #layout {
  background: #0a0f1e;
  background-image: radial-gradient(circle at 50% 45%, rgba(59,130,246,.10) 0%, transparent 60%);
}
#login-form .box-inner {
  background: rgba(17,24,39,.97);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: 16px;
  box-shadow: 0 40px 80px rgba(0,0,0,.6);
}
#login-form #logo { max-height: 72px; width: auto; }
#login-form input.form-control {
  background: rgba(255,255,255,.05);
  border-color: rgba(59,130,246,.2);
  color: #e2e8f0;
}
#login-form input.form-control:focus { border-color: #3b82f6; }
#login-form button.btn-primary, #rcmloginsubmit {
  background: #2563eb; border-color: #2563eb;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}

#layout-menu .popup-header img,
#taskmenu .menu-header img,
.menu-header img { object-fit: contain; max-width: 100%; height: auto; }

/* Login logo — large, slow float */
#layout-login #logo,
#login-form #logo,
.task-login #logo {
  max-height: 190px !important;
  max-width: 460px !important;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 22px rgba(59,130,246,.35));
  animation: cl-float 5s ease-in-out infinite;
}

@keyframes cl-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  #layout-login #logo, #login-form #logo, .task-login #logo { animation: none; }
}

/* Footer strapline under product name */
#layout-login .footer::after,
#login-form + .footer::after,
.task-login #layout-content .footer::after {
  content: "Powered by Custom Launch Limited 🚀";
  display: block;
  margin-top: .45rem;
  font-size: .78rem;
  letter-spacing: .02em;
  color: rgba(148,163,184,.75);
}

/* Strapline under product name */
#login-footer::after {
  content: "Powered by Custom Launch Limited 🚀";
  display: block;
  margin-top: .45rem;
  font-size: .78rem;
  letter-spacing: .02em;
  color: rgba(148,163,184,.75);
}

/* Starfield background */
#layout-login, body.task-login #layout, .task-login #layout-content {
  background-color: #0a0f1e;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.85) 0%, transparent 100%),
    radial-gradient(1px 1px   at 27% 62%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px 1px   at 41% 11%, rgba(255,255,255,.70) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 78%, rgba(255,255,255,.60) 0%, transparent 100%),
    radial-gradient(1px 1px   at 69% 33%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1px 1px   at 78% 88%, rgba(255,255,255,.65) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 24%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1px 1px   at 94% 57%, rgba(255,255,255,.75) 0%, transparent 100%),
    radial-gradient(1px 1px   at 6%  84%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1px 1px   at 35% 42%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(circle at 50% 40%, rgba(59,130,246,.10) 0%, transparent 60%);
  background-repeat: repeat;
  background-size: 620px 620px, 620px 620px, 620px 620px, 620px 620px, 620px 620px,
                   620px 620px, 620px 620px, 620px 620px, 620px 620px, 620px 620px, 100% 100%;
  background-attachment: fixed;
}

/* Twinkle layer */
#layout-login { position: relative; }
#layout-login::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 70%, rgba(255,255,255,.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,.75) 0%, transparent 100%);
  background-size: 480px 480px;
  background-repeat: repeat;
  animation: cl-twinkle 6s ease-in-out infinite;
  z-index: 0;
}
@keyframes cl-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { #layout-login::before { animation: none; } }

/* Denser star layer */
#layout-login { position: relative; overflow: hidden; }
#layout-login::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
  background-size: 380px 380px;
  background-image:
    radial-gradient(1px 1px at 8% 22%,  rgba(255,255,255,.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 55%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 8%,  rgba(255,255,255,.70) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 37%, rgba(255,255,255,.90) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 82%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 19%, rgba(255,255,255,.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 64%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 83% 41%, rgba(255,255,255,.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 76%, rgba(255,255,255,.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 91%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 68%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 5%,  rgba(255,255,255,.70) 0%, transparent 100%);
  animation: cl-twinkle 7s ease-in-out infinite;
}
@keyframes cl-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Shooting stars */
#layout-login::after,
#login-form::before {
  content: "";
  position: fixed;
  top: -10%;
  left: -10%;
  width: 140px;
  height: 2px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 60%, #fff 100%);
  border-radius: 999px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.8));
  opacity: 0;
  transform: rotate(28deg);
  animation: cl-shoot 9s linear infinite;
}
#login-form::before { animation-delay: 4.5s; top: 8%; left: 22%; }

@keyframes cl-shoot {
  0%   { opacity: 0; transform: rotate(28deg) translate3d(0, 0, 0); }
  4%   { opacity: 1; }
  18%  { opacity: 1; }
  22%  { opacity: 0; transform: rotate(28deg) translate3d(115vw, 62vh, 0); }
  100% { opacity: 0; transform: rotate(28deg) translate3d(115vw, 62vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #layout-login::before, #layout-login::after, #login-form::before { animation: none; }
  #layout-login::after, #login-form::before { display: none; }
}

/* ---- Logged-in chrome ---- */
html.dark-mode #layout-menu,
html.dark-mode #taskmenu {
  background: #0a0f1e;
  border-right: 1px solid rgba(59,130,246,.14);
}
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list {
  background: #0d1425;
  border-right: 1px solid rgba(59,130,246,.10);
}
html.dark-mode #layout-content,
html.dark-mode #layout-content .header {
  background: #0a0f1e;
}
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-list .header,
html.dark-mode #layout-menu .header {
  background: #111a2e;
  border-bottom: 1px solid rgba(59,130,246,.14);
}
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a:hover {
  background: rgba(59,130,246,.12);
  color: #93c5fd;
}
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
  background: rgba(37,99,235,.20) !important;
}
html.dark-mode .listing li:hover,
html.dark-mode .listing tr:hover td {
  background: rgba(59,130,246,.07);
}
html.dark-mode a { color: #93c5fd; }
html.dark-mode .btn-primary,
html.dark-mode button.primary {
  background: #2563eb;
  border-color: #2563eb;
}

/* Task menu buttons — kill the grey blocks */
html.dark-mode #taskmenu a,
html.dark-mode #taskmenu a.button {
  background: transparent !important;
  color: #94a3b8;
  border: none;
}
html.dark-mode #taskmenu a:hover {
  background: rgba(59,130,246,.10) !important;
  color: #93c5fd;
}
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover {
  background: rgba(37,99,235,.18) !important;
  color: #93c5fd;
  box-shadow: inset 3px 0 0 #2563eb;
}
html.dark-mode #taskmenu a.logout,
html.dark-mode #taskmenu a.logout:hover {
  color: #f87171;
  background: transparent !important;
}
html.dark-mode #taskmenu a.logout:hover {
  background: rgba(248,113,113,.10) !important;
}

/* Collapsible folder pane */
#layout-sidebar {
  transition: width .22s ease, min-width .22s ease;
}
body.cl-folders-collapsed #layout-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border-right: none;
}
#cl-folder-toggle {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 120;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 6px;
  background: rgba(17,24,39,.9);
  color: #93c5fd;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cl-folder-toggle:hover { background: rgba(59,130,246,.18); }