:root{
	/* Logo-derived palette */
	--accent:#0a6fb8;      /* primary logo blue */
	--accent-strong:#13b8a9; /* secondary teal accent */
	--muted:#94a8ad;       /* muted text color */
  --bg:#3b454c; /* page background (keep dark) */
	--surface:#0f1720; /* card / surface */
	--elev:#071317; /* sidebars/topbars */
	--btn-text:#071019; /* dark text on light-ish CTA gradient */
    /* width of the fixed left sidebar — used to center the dashboard logo
       within the content area (viewport minus the sidebar). */
    --sidebar-width: 240px;
}
*{box-sizing:border-box}
html, body { height: 100%; }
body{font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:0;color:#e6f3f2;background:var(--bg);-webkit-font-smoothing:antialiased}
.container{max-width:980px;margin:0 auto;padding:1rem}
.ribbon{position:sticky;top:0;background:transparent;border-bottom:1px solid rgba(255,255,255,0.04);z-index:50}

.ribbon .container{display:flex;align-items:center;gap:1rem}
.brand img{height:44px}

/* Logo fallback: if image is missing or broken, show a text logo */
.brand{display:inline-block;vertical-align:middle}
.brand img{display:block;max-height:44px}
.brand:empty::after{content:'IgnitedTraining';color:var(--accent);font-weight:700;font-size:1.05rem}
.brand::after{content:''}
.nav{margin-left:auto;display:flex;gap:1rem}
.nav a{color:var(--muted);text-decoration:none;padding:.6rem .8rem;border-radius:6px}
.nav a:hover{background:rgba(255,255,255,0.02);color:var(--accent)}

/* Dropdown nav styles */
.nav-dropdown{position:relative;display:inline-block}
.dropdown-toggle{background:transparent;color:var(--accent);padding:.5rem .9rem;border-radius:10px;cursor:pointer;font-weight:600;border:1px solid rgba(255,255,255,0.04)}
.dropdown-menu{display:none;min-width:180px;right:0;background:var(--surface);border-radius:8px;box-shadow:0 8px 30px rgba(2,12,22,0.6);padding:.4rem}
.dropdown-menu a{display:block;padding:.6rem .8rem;border-radius:6px;color:#e6f3f2}
.dropdown-menu a:hover{background:rgba(255,255,255,0.02)}
.hero{padding:3rem 1rem;text-align:center}
.lead{color:var(--muted);font-size:1.05rem}
.dashboard-landing{ padding-top:4rem }

/* Dashboard background: scale logo to fit available space while keeping overlay */
body.dashboard-bg{
  /* Watermark background removed temporarily. To restore, uncomment the
     following background-image / positioning properties. */
  /* background-image: linear-gradient(rgba(59,69,76,0.85), rgba(59,69,76,0.75)), url('logo.png'); */
  background-repeat: no-repeat; /* kept for compatibility if restored */
  /* background-position: calc(50% + calc(var(--sidebar-width) / 2)) center; */
  /* background-size: contain; */
  /* keep the overlay visually consistent and ensure the bg fills viewport height */
  min-height: 100vh;
  background-color: var(--bg); /* match base background while image loads */
}

/* On very wide screens, 'contain' may leave extra empty space — switch to cover
   if you prefer filling the background (uncomment or add the class on the body). */
body.dashboard-bg.bg-cover{
  background-size: cover;
  background-attachment: fixed;
}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.5rem}
.services article{background:var(--surface);padding:1rem;border-radius:10px;box-shadow:0 10px 30px rgba(2,12,22,0.6);border:1px solid rgba(255,255,255,0.02)}
.btn{display:inline-block;background:linear-gradient(180deg,var(--accent),var(--accent-strong));color:var(--btn-text);padding:.7rem 1rem;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(10,103,184,0.14);border:1px solid rgba(255,255,255,0.03);cursor:pointer}

/* Base fallback — simple block footer (for pages that include it inline) */
.site-footer{padding:1rem 0;text-align:center;color:var(--muted);margin-top:2rem}

/* Sticky small footer anchored to bottom-right of the content area (to the
   right of the fixed left sidebar). Uses a compact style so it doesn't cover
   content. */
.site-footer.sticky-right{
  position:fixed;
  bottom:12px;
  right:12px;
  left: auto;
  width:auto;
  max-width:320px;
  padding:.45rem .8rem;
  background:rgba(11,21,28,0.85);
  border-radius:8px;
  color:var(--muted);
  box-shadow:0 8px 20px rgba(2,12,22,0.6);
  /* lower z-index so floating player controls (Next/Prev) sit above the watermark
     and allow pointer events to pass through to underlying controls. The watermark
     itself is decorative, so we disable pointer-events to avoid blocking clicks. */
  z-index:20;
  pointer-events:none;
  text-align:center;
  font-size:0.95rem;
}

/* If you prefer the footer to span the content area, apply .sticky-content */
.site-footer.sticky-content{
  position:fixed;
  bottom:0;
  left:var(--sidebar-width);
  width:calc(100% - var(--sidebar-width));
  padding:.6rem 1rem;
  text-align:center;
  background:linear-gradient(180deg, rgba(7,16,25,0.0), rgba(7,16,25,0.35));
  z-index:70;
}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.card{background:var(--surface);border-radius:12px;padding:1rem;box-shadow:0 10px 30px rgba(2,12,22,0.6);border:1px solid rgba(255,255,255,0.02)}
.card img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem;margin-top:.6rem}
.meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem;margin-top:.6rem}
.search-toolbar{margin:1rem 0;display:flex;justify-content:flex-end}
.search-toolbar input{width:100%;max-width:320px;padding:.6rem .8rem;border:1px solid rgba(255,255,255,0.08);border-radius:8px;background:rgba(11,21,28,0.65);color:#e6f3f2;font:inherit}
.search-toolbar input::placeholder{color:var(--muted)}
.search-toolbar input:disabled{opacity:0.55;cursor:not-allowed}

/* Forms */
.form{max-width:680px;margin:1rem auto;background:var(--surface);padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.form .row{display:flex;gap:0.6rem}
.form label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:.3rem}
.form input,.form select,.form textarea{width:100%;padding:.6rem;border:1px solid rgba(255,255,255,0.04);border-radius:8px;background:transparent;color:#e6f3f2;font-family:inherit;resize:vertical}
.form .actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.6rem}
.small{font-size:.9rem;color:var(--muted)}

/* Player */
.player{background:var(--surface);padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.video-embed{width:100%;height:360px}

@media (max-width:600px){.ribbon .container{padding:.6rem}.hero{padding:2rem}}

.app-layout{display:block}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:var(--elev);color:#e6f3f2;padding:1rem 0;box-shadow:2px 0 20px rgba(2,12,22,0.6);z-index:60}
.sidebar .brand{display:block;padding:0 1rem;margin-bottom:1.5rem}
.sidebar .brand img{height:36px}
.sidebar-nav{display:flex;flex-direction:column;gap:0.2rem;padding:0 0.5rem}
.sidebar-nav a{color:var(--muted);text-decoration:none;padding:.9rem .9rem;border-radius:8px;display:flex;align-items:center;gap:.6rem;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease}
.sidebar-nav a:hover{background:rgba(255,255,255,0.02);color:var(--accent)}
.sidebar-nav a.active{background:linear-gradient(90deg, rgba(10,111,184,0.12), transparent);color:var(--accent);box-shadow:inset 4px 0 0 var(--accent);transform:scale(1.03);}

/* make parent toggle (has-children) link stand out when active */
.sidebar-nav .has-children > a.active{padding-left:1rem;border-radius:10px}
.sidebar-nav .submenu{display:none;flex-direction:column;margin-left:.6rem;margin-top:.3rem}
.sidebar-nav .submenu a{font-size:0.95rem;padding:.5rem .8rem;border-radius:6px;color:#9aa6b0}
.sidebar-nav .submenu a:hover{background:rgba(255,255,255,0.01);color:var(--accent)}
.sidebar-nav .has-children{cursor:pointer}
.sidebar-nav .has-children .caret{margin-left:auto;opacity:0.8}
.sidebar-nav .has-children.open + .submenu{display:flex}
.main-area{margin-left:240px;padding-top:0}
.topbar{position:sticky;top:0;z-index:55;background:transparent;border-bottom:1px solid rgba(255,255,255,0.03)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem}
.top-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}
.top-actions #auth-link{
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color: var(--btn-text) !important;
  padding: 0.8rem 1.5rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(10, 111, 184, 0.3) !important;
  transition: all 0.2s ease !important;
  border: 2px solid transparent !important;
  cursor: pointer;
}

.top-actions #auth-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(10, 111, 184, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.top-actions #auth-link:active {
  transform: translateY(0) !important;
}

/* Prominent login button for landing page */
.login-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color: var(--btn-text) !important;
  padding: 0.8rem 1.5rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(10, 111, 184, 0.3) !important;
  transition: all 0.2s ease !important;
  border: 2px solid transparent !important;
}

.login-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(10, 111, 184, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.login-cta:active {
  transform: translateY(0) !important;
}

/* Adjust cards and spacing for dashboard look */
.container{max-width:1100px;margin:0 auto;padding:1rem}
.dashboard-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.sidebar-note{font-size:.9rem;color:#c5c7c9;padding:.6rem 1rem}

/* Enrollment payment modal */
.payment-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:11000;
}

.payment-modal-overlay.visible{display:flex}

.payment-modal{
  background:#ffffff;
  color:#0f172a;
  border-radius:12px;
  padding:1.75rem;
  width:min(420px,92vw);
  box-shadow:0 18px 45px rgba(15,23,42,0.25);
  position:relative;
  font-family:inherit;
}

.payment-modal h3{margin:0 0 .75rem;font-size:1.35rem;color:#111827}
.payment-modal p{margin:0 0 1rem;color:#475569;font-size:.95rem;line-height:1.45}

.payment-card-element{
  border:1px solid #d1d5db;
  border-radius:8px;
  padding:.75rem;
  margin-bottom:.75rem;
  background:#f9fafb;
}

.payment-modal__error{
  display:none;
  background:#fee2e2;
  border:1px solid #ef4444;
  border-radius:8px;
  color:#b91c1c;
  font-size:.9rem;
  padding:.65rem .85rem;
  margin-bottom:.8rem;
}

.payment-modal__error.visible{display:block}

.payment-modal__actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.2rem}

.payment-modal__close{
  position:absolute;
  top:.75rem;
  right:.75rem;
  background:transparent;
  border:none;
  font-size:1.2rem;
  color:#94a3b8;
  cursor:pointer;
}

.payment-modal__close:hover{color:#475569}

.payment-modal__spinner{
  display:none;
  margin-bottom:.75rem;
  font-size:.9rem;
  color:#475569;
  align-items:center;
  gap:.5rem;
}

.payment-modal__spinner.visible{display:flex}

.payment-modal__spinner::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid #cbd5f5;
  border-top-color:#4f46e5;
  animation:payment-modal-spin .8s linear infinite;
}

@keyframes payment-modal-spin{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}

.btn-secondary,
.btn.btn-secondary{
  background:#f1f5f9;
  color:#1e293b;
  border:1px solid #cbd5f5;
}

.btn-secondary:hover,
.btn.btn-secondary:hover{background:#e2e8f0}

#register-error{
  display:none;
  margin:0 0 .75rem;
  padding:.75rem;
  border-radius:6px;
  border:1px solid #fca5a5;
  background:#fee2e2;
  color:#b91c1c;
  font-size:.9rem;
}

@media (max-width:900px){
  .sidebar{position:relative;width:100%;height:auto}
  .main-area{margin-left:0}
  /* On narrow screens the sidebar becomes part of the flow, so reset the
     background positioning back to the normal centered behavior. */
  body.dashboard-bg{
    background-position: center center;
    background-size: contain;
  }
  /* On small screens the footer should be full-width and sit at the bottom
     center to avoid overlapping content in a cramped viewport. */
  /* ensure the mobile override keeps the watermark non-interactive */
  .site-footer.sticky-right{left:0;right:0;bottom:0;width:100%;border-radius:0;padding:.8rem 1rem;pointer-events:none;z-index:20}
  .site-footer.sticky-content{left:0;width:100%}
}