/* Post-login module chooser */

body.module-chooser-page {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(240, 180, 41, 0.16), transparent 36%),
    radial-gradient(circle at 88% 82%, rgba(44, 90, 160, 0.2), transparent 40%),
    linear-gradient(165deg, #0f172a 0%, #152238 42%, #1e3a6e 100%);
}

body.module-chooser-page .main-content {
  background: transparent;
  background-image: none;
}

body.module-chooser-page .main-content .app-site-footer {
  color: rgba(255, 255, 255, 0.72);
}

body.module-chooser-page .top-navbar {
  background: rgba(15, 23, 42, 0.78);
  border-bottom-color: rgba(148, 163, 184, 0.18);
}

body.module-chooser-page .top-navbar .navbar-brand,
body.module-chooser-page .top-navbar .name {
  color: #fff;
}

body.module-chooser-page .top-navbar .role {
  color: rgba(255, 255, 255, 0.65);
}

body.module-chooser-page .menu-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

body.module-opening-page .sidebar,
body.module-opening-page .sidebar-overlay,
body.module-opening-page .menu-toggle,
body.module-opening-page .app-site-footer {
  display: none !important;
}

body.module-opening-page .main-content {
  margin-left: 0;
  background: transparent;
}

.module-open-screen {
  min-height: calc(100vh - var(--topbar-height, 64px) - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.module-open-card {
  text-align: center;
  max-width: 28rem;
  padding: 1rem;
}

.module-open-ring {
  position: relative;
  width: 11.5rem;
  height: 11.5rem;
  margin: 0 auto 1.35rem;
}

.module-open-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.module-open-ring-track,
.module-open-ring-value {
  fill: none;
  stroke-width: 8;
}

.module-open-ring-track {
  stroke: rgba(255, 255, 255, 0.14);
}

.module-open-ring-value {
  stroke: #f0b429;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.12s linear;
}

.module-open-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.module-open-ring-label #module-open-pct {
  font-size: 2.15rem;
  line-height: 1;
}

.module-open-pct-sign {
  font-size: 1rem;
  margin-left: 0.15rem;
  color: rgba(255, 255, 255, 0.78);
}

.module-open-title {
  margin: 0;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 700;
}

.module-open-countdown {
  margin: 0.7rem 0 0;
  color: #f0b429;
  font-size: 1.05rem;
  font-weight: 700;
}

.module-float-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.module-float {
  position: absolute;
  font-size: 2.4rem;
  opacity: 0.38;
  --tilt: 0deg;
  --drift-x: 14px;
  --drift-y: -18px;
  animation:
    module-drift 16s ease-in-out infinite,
    module-hue 9s linear infinite;
}

.module-float-1 { top: 12%; left: 8%; animation-delay: 0s, 0s; font-size: 2.8rem; --tilt: -12deg; }
.module-float-2 { top: 22%; right: 10%; animation-delay: -3s, -1s; --tilt: 14deg; }
.module-float-3 { bottom: 22%; left: 11%; animation-delay: -6s, -2s; font-size: 2.1rem; --tilt: -8deg; }
.module-float-4 { top: 46%; left: 5%; animation-delay: -2s, -4s; --tilt: 10deg; }
.module-float-5 { bottom: 14%; right: 14%; animation-delay: -8s, -3s; font-size: 2.6rem; --tilt: -6deg; }
.module-float-6 { top: 16%; left: 48%; animation-delay: -5s, -6s; }
.module-float-7 { bottom: 10%; left: 38%; animation-delay: -9s, -1.5s; --tilt: 16deg; }
.module-float-8 { top: 58%; right: 7%; animation-delay: -4s, -5s; --tilt: -14deg; }
.module-float-9 { top: 7%; left: 22%; animation-delay: -1s, -2s; font-size: 1.9rem; --tilt: 8deg; }
.module-float-10 { top: 9%; right: 22%; animation-delay: -7s, -4s; font-size: 2.2rem; --tilt: -10deg; }
.module-float-11 { top: 36%; right: 4%; animation-delay: -11s, -1s; font-size: 2.5rem; --tilt: 12deg; }
.module-float-12 { top: 34%; left: 16%; animation-delay: -4.5s, -7s; font-size: 2rem; --tilt: -18deg; }
.module-float-13 { top: 5%; left: 62%; animation-delay: -2.5s, -3s; font-size: 1.7rem; }
.module-float-14 { bottom: 8%; right: 38%; animation-delay: -10s, -5s; font-size: 2.3rem; --tilt: 9deg; }
.module-float-15 { bottom: 28%; right: 3%; animation-delay: -6.5s, -8s; font-size: 2rem; --tilt: -11deg; }
.module-float-16 { top: 68%; left: 6%; animation-delay: -8.5s, -2s; font-size: 2.1rem; --tilt: 15deg; }
.module-float-17 { top: 72%; right: 18%; animation-delay: -3.5s, -6s; font-size: 2.4rem; --tilt: -16deg; }
.module-float-18 { bottom: 6%; left: 22%; animation-delay: -12s, -4s; font-size: 1.8rem; --tilt: 7deg; }
.module-float-19 { top: 28%; left: 3%; animation-delay: -9.5s, -9s; font-size: 2.2rem; --tilt: -9deg; }
.module-float-20 { bottom: 18%; left: 48%; animation-delay: -1.5s, -7s; font-size: 2rem; --tilt: 13deg; }
.module-float-21 { top: 52%; left: 12%; animation-delay: -13s, -3s; font-size: 1.85rem; --tilt: -7deg; }
.module-float-22 { top: 42%; right: 16%; animation-delay: -5.5s, -1s; font-size: 1.75rem; }

@keyframes module-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)); }
  50% { transform: translate3d(var(--drift-x, 14px), var(--drift-y, -18px), 0) rotate(var(--tilt, 0deg)); }
}

@keyframes module-hue {
  0% { color: #f0b429; }
  20% { color: #ef4444; }
  40% { color: #22c55e; }
  60% { color: #38bdf8; }
  80% { color: #e879f9; }
  100% { color: #f0b429; }
}

.module-chooser {
  width: 100%;
  max-width: 640px;
  margin: 1.5rem auto 0;
  position: relative;
  z-index: 2;
}

.module-chooser-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.module-chooser-title {
  margin: 0;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.35;
}

.module-chooser-subtitle {
  margin: 0.55rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
}

.module-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: stretch;
}

.module-card-form {
  margin: 0;
  min-width: 0;
  height: 100%;
}

.module-card {
  box-sizing: border-box;
  width: 100%;
  height: 7.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  padding: 0.45rem 0.4rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.2rem;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.module-card:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 180, 41, 0.55);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.24);
}

.module-card-icon {
  flex: 0 0 1.7rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1e3a6e;
  color: #f0b429;
  font-size: 0.72rem;
  margin-bottom: 0;
}

.module-card-name {
  flex: 0 0 1.05rem;
  width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  color: #152c54;
  line-height: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-card-hint {
  display: none;
}

.module-card-request,
.module-card-lock {
  flex: 1 1 auto;
  width: 100%;
  min-height: 2.2rem;
  font-size: 0.58rem;
  font-weight: 700;
  color: #dc2626;
  line-height: 1.2;
}

.module-card.is-denied .module-card-lock {
  font-size: 0;
}

.module-card.is-denied .module-card-lock i {
  display: none !important;
}

.module-card.is-denied .module-card-lock::after {
  content: "Request rights to access this module";
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  color: #dc2626;
  line-height: 1.2;
}

.module-card-request.is-placeholder,
.module-card-lock.is-placeholder {
  visibility: hidden;
}

.module-card.is-denied {
  background: rgba(255, 255, 255, 0.78);
}

.module-card.is-denied .module-card-icon {
  background: #94a3b8;
  color: #fff;
}

body.module-chooser-page .page-alert-slot .alert-info {
  overflow: hidden;
}

body.module-chooser-page .page-alert-slot .alert-info .alert-compact-message.is-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}

body.module-chooser-page .module-alert-marquee-text {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: module-coming-soon-ltr 8s linear infinite;
}

@keyframes module-coming-soon-ltr {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(100cqi); }
}
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
}

.licensing-main {
  margin-top: var(--topbar-height, 64px);
  padding: 2rem 1.5rem;
  min-height: calc(100vh - 64px);
}

.licensing-welcome {
  max-width: 40rem;
  margin: 3rem auto;
  text-align: center;
}

.licensing-welcome-logo {
  width: 96px;
  height: auto;
  background: #fff;
  border-radius: 14px;
  padding: 0.35rem;
  margin-bottom: 1rem;
}

.licensing-welcome h1 {
  color: #152c54;
  font-size: 1.8rem;
  font-weight: 700;
}

.licensing-welcome p {
  color: #64748b;
}

@media (max-width: 520px) {
  .module-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .module-card-name {
    font-size: 0.62rem;
  }
}