/* =====================================================================
   BIST LMS — Royal Bubble Theme (shared base)
   Century Gothic font + royal blue bubble background + colour tokens.
   Loaded by style.css (all LMS pages) and directly by stand-alone pages
   (login, password recovery, surveys, public chat, attendance).
   ===================================================================== */
/* Didact Gothic is a free Century Gothic look-alike, used only on devices
   without Century Gothic (most phones). */
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');

/* ---------- 1. Tokens ---------- */
:root{
  --bist-font:"Century Gothic",CenturyGothic,"URW Gothic","URW Gothic L",AppleGothic,"Didact Gothic","Questrial",sans-serif;

  --royal-950:#050f38;
  --royal-900:#071a52;
  --royal-800:#0b2577;
  --royal-700:#12339e;
  --royal-600:#1a44c2;
  --royal-500:#2453dc;
  --royal-400:#4169e1;
  --royal-300:#7b97f0;
  --royal-100:#e3eafc;
  --royal-50:#f3f6fe;

  --gold:#ffc83d;
  --gold-deep:#f2a900;
  --gold-soft:#fff4d1;

  --ink:#0f1d40;
  --muted:#5b6b8c;
  --line:#dbe3f5;
  --card:#ffffff;
  --success:#15803d;
  --danger:#dc2626;

  --radius-lg:20px;
  --radius:14px;
  --radius-sm:10px;
  --shadow-card:0 10px 30px rgba(5,15,56,.18);
  --shadow-soft:0 4px 14px rgba(5,15,56,.10);

  --sidebar-w:290px;
  --mobile-header-h:62px;
  --bist-fixed-footer-height:42px;

  /* Legacy variable names still used by some module pages */
  --p:var(--royal-600);--p2:var(--royal-400);--a:var(--gold);--y:var(--gold);
  --g:var(--success);--d:var(--ink);--bg:var(--royal-50);
}

/* ---------- 2. Base + royal bubble background ---------- */
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  font-family:var(--bist-font);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background-color:var(--royal-800);
  background-image:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.16) 0 70px,rgba(255,255,255,.05) 71px 74px,transparent 75px),
    radial-gradient(circle at 82% 14%,rgba(255,255,255,.12) 0 110px,rgba(255,255,255,.04) 111px 115px,transparent 116px),
    radial-gradient(circle at 66% 78%,rgba(255,255,255,.10) 0 150px,rgba(255,255,255,.035) 151px 156px,transparent 157px),
    radial-gradient(circle at 8% 86%,rgba(255,255,255,.12) 0 90px,transparent 91px),
    radial-gradient(circle at 44% 48%,rgba(123,151,240,.22) 0 46px,transparent 47px),
    radial-gradient(circle at 92% 58%,rgba(123,151,240,.20) 0 34px,transparent 35px),
    radial-gradient(circle at 34% 8%,rgba(255,255,255,.14) 0 22px,transparent 23px),
    linear-gradient(140deg,var(--royal-900) 0%,var(--royal-700) 38%,var(--royal-500) 72%,var(--royal-400) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  overflow-x:hidden;
}
/* Slow floating bubbles layer (decorative only) */
body::before{
  content:"";
  position:fixed;inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.22) 0 6px,transparent 7px),
    radial-gradient(circle,rgba(255,255,255,.16) 0 11px,transparent 12px),
    radial-gradient(circle,rgba(255,255,255,.12) 0 4px,transparent 5px);
  background-size:337px 389px,523px 467px,211px 263px;
  background-position:40px 60px,180px 220px,123px 71px;
  animation:bistBubblesRise 60s linear infinite;
}
@keyframes bistBubblesRise{
  from{background-position:40px 60px,180px 220px,123px 71px}
  to{background-position:40px -1496px,180px -1648px,123px -981px}
}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* Century Gothic everywhere in the LMS UI (code/pre keep monospace). */
body,body *:not(pre):not(code):not(kbd):not(samp):not(.mono){font-family:var(--bist-font)!important}
input,button,textarea,select{font:inherit;font-family:var(--bist-font)!important}
h1,h2,h3,h4{letter-spacing:.2px;line-height:1.25}
a{color:var(--royal-600)}
img{max-width:100%}


/* Stand-alone pages: let the bubble background show behind their wrappers */
.login-page,.recovery-page,.bist-standalone-page{background:transparent!important}
.login-bg-shape,.login-bg-shape-2{display:none!important}