:root{
	/* Logo-derived palette */
	--accent:#0a6fb8;      /* primary logo blue */
	--accent-strong:#13b8a9; /* secondary teal accent */
	--muted:#94a8ad;       /* muted text color */
	--bg:#071019; /* 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{
  background-image: linear-gradient(rgba(7,16,25,0.65), rgba(7,16,25,0.65)), url('logo.png');
  background-repeat:no-repeat;
  /* center the background inside the content area (viewport minus sidebar).
     The center of the content area is shifted right by half the sidebar width. */
  background-position: calc(50% + calc(var(--sidebar-width) / 2)) center;
  /* Use contain so the whole logo is visible and scales to fit the viewport. */
  background-size: contain;
  /* keep the overlay visually consistent and ensure the bg fills viewport height */
  min-height: 100vh;
  background-color: rgba(255,255,255,0.65); /* fallback color */
}

/* 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)}

/* 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);
  z-index:80;
  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}

/* 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{width:100%;padding:.6rem;border:1px solid rgba(255,255,255,0.04);border-radius:8px;background:transparent;color:#e6f3f2}
.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}

@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. */
  .site-footer.sticky-right{left:0;right:0;bottom:0;width:100%;border-radius:0;padding:.8rem 1rem}
  .site-footer.sticky-content{left:0;width:100%}
}