/* =====================================================================
   MCA ACADEMY THEME
   Dark red + dark blue palette. Load this AFTER style.css / admin_style.css
   so it overrides the template's default purple/blue variables everywhere.
   ===================================================================== */

:root{
   --mca-dark-blue:#0a1a3d;
   --mca-dark-blue-2:#122a5e;
   --mca-dark-red:#7a0c14;
   --mca-dark-red-2:#9c1420;
   --mca-gold:#d4a017;

   /* override template variables so every existing component re-themes
      automatically without needing to touch each page */
   --main-color: var(--mca-dark-blue);
   --red: var(--mca-dark-red);
   --oragen: var(--mca-gold);
}

body.dark{
   --main-color: var(--mca-dark-blue-2);
   --red: var(--mca-dark-red-2);
}

.header .flex .logo{
   background: linear-gradient(135deg, var(--mca-dark-blue), var(--mca-dark-red));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: 800;
   letter-spacing: .05rem;
}

.btn, .inline-btn, .option-btn{
   background: linear-gradient(135deg, var(--mca-dark-blue), var(--mca-dark-blue-2));
}

.delete-btn{
   background: linear-gradient(135deg, var(--mca-dark-red), var(--mca-dark-red-2));
}

/* ---------------------------------------------------------------------
   Language switcher
   --------------------------------------------------------------------- */
.mca-lang-switch{
   display: flex;
   gap: .5rem;
   align-items: center;
   padding: .5rem 1rem;
}
.mca-lang-switch a{
   font-size: 1.4rem;
   padding: .3rem .8rem;
   border-radius: .5rem;
   border: .1rem solid rgba(0,0,0,.15);
   color: var(--black);
   font-weight: 600;
}
.mca-lang-switch a.active{
   background: linear-gradient(135deg, var(--mca-dark-blue), var(--mca-dark-red));
   color: #fff;
   border-color: transparent;
}

/* ---------------------------------------------------------------------
   Circular progress ring (used on dashboard KPIs and course pages)
   Usage: <div class="mca-ring" data-percent="72" data-color="blue">
             <svg viewBox="0 0 120 120">
               <circle class="ring-bg" cx="60" cy="60" r="52"></circle>
               <circle class="ring-fg" cx="60" cy="60" r="52"></circle>
             </svg>
             <span class="ring-label">72%</span>
           </div>
   --------------------------------------------------------------------- */
.mca-ring{
   position: relative;
   width: 12rem;
   height: 12rem;
   margin: 0 auto;
}
.mca-ring svg{
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
}
.mca-ring .ring-bg{
   fill: none;
   stroke: rgba(0,0,0,.08);
   stroke-width: 10;
}
.mca-ring .ring-fg{
   fill: none;
   stroke-width: 10;
   stroke-linecap: round;
   stroke-dasharray: 326.7;
   stroke-dashoffset: 326.7;
   transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
   stroke: var(--mca-dark-blue);
}
.mca-ring.color-red .ring-fg{ stroke: var(--mca-dark-red); }
.mca-ring.color-gold .ring-fg{ stroke: var(--mca-gold); }
.mca-ring .ring-label{
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   font-weight: 800;
   color: var(--black);
}

/* ---------------------------------------------------------------------
   Page transition (fade + slight rise) + loading spinner
   --------------------------------------------------------------------- */
body{
   animation: mcaFadeIn .35s ease both;
}
@keyframes mcaFadeIn{
   from{ opacity: 0; transform: translateY(8px); }
   to{ opacity: 1; transform: translateY(0); }
}
body.mca-leaving{
   animation: mcaFadeOut .25s ease both;
}
@keyframes mcaFadeOut{
   from{ opacity: 1; transform: translateY(0); }
   to{ opacity: 0; transform: translateY(-8px); }
}

#mca-loader{
   position: fixed;
   inset: 0;
   background: rgba(10,26,61,.92);
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity .2s ease;
}
#mca-loader.show{ opacity: 1; pointer-events: all; }
#mca-loader .spinner{
   width: 5.5rem;
   height: 5.5rem;
   border-radius: 50%;
   border: .5rem solid rgba(255,255,255,.2);
   border-top-color: var(--mca-gold);
   border-right-color: var(--mca-dark-red);
   animation: mcaSpin .8s linear infinite;
}
@keyframes mcaSpin{ to{ transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   Lock badge for sequential video access
   --------------------------------------------------------------------- */
.mca-locked{
   position: relative;
   opacity: .55;
   filter: grayscale(60%);
   pointer-events: none;
}
.mca-locked::after{
   content: '\f023';
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   position: absolute;
   top: 1rem; right: 1rem;
   background: var(--mca-dark-blue);
   color: #fff;
   width: 3rem; height: 3rem;
   border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
}

/* Badges */
.mca-badge{
   display: inline-block;
   padding: .3rem .9rem;
   border-radius: 2rem;
   font-size: 1.3rem;
   font-weight: 700;
   color: #fff;
}
.mca-badge.pending{ background: var(--mca-gold); color: #2c2c2c; }
.mca-badge.approved, .mca-badge.paid, .mca-badge.active{ background: #1e8a4c; }
.mca-badge.rejected, .mca-badge.blocked{ background: var(--mca-dark-red); }

.mca-quiz-box{
   background: var(--white);
   border: var(--border);
   border-radius: .5rem;
   padding: 2rem;
   margin: 1.5rem 0;
}
.mca-quiz-box .q-title{
   font-size: 1.8rem;
   font-weight: 700;
   margin-bottom: 1rem;
   color: var(--black);
}
.mca-quiz-box label{
   display: block;
   padding: .8rem 1rem;
   border: .1rem solid rgba(0,0,0,.1);
   border-radius: .5rem;
   margin-bottom: .6rem;
   cursor: pointer;
   color: var(--black);
}
.mca-quiz-box label:hover{
   border-color: var(--mca-dark-blue);
}

/* ---------------------------------------------------------------------
   Persistent navigation (student + classic teacher pages)
   - sidebar: active page highlighted
   - phones: fixed bottom tab bar (always visible, no drawer needed)
   --------------------------------------------------------------------- */
.side-bar .navbar a.on{
   background: var(--light-bg);
   border-left: .4rem solid var(--mca-dark-red);
}
.side-bar .navbar a.on i{ color: var(--mca-dark-red); }
.side-bar .navbar a.on span{ color: var(--black); font-weight: 700; }
.side-bar .navbar .mca-nav-sep{
   padding: 1.5rem 2rem .5rem;
   font-size: 1.2rem;
   letter-spacing: .1rem;
   text-transform: uppercase;
   color: var(--light-color);
   border-top: var(--border);
   margin-top: 1rem;
}
.side-bar{ overflow-y: auto; }

.mca-tabbar{ display: none; }
@media (max-width:760px){
   .mca-tabbar{
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
      display: flex;
      background: var(--white);
      border-top: var(--border);
      padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom));
   }
   .mca-tabbar a{
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; align-items: center; gap: .3rem;
      padding: .7rem .2rem;
      border-radius: .8rem;
      color: var(--light-color);
      font-size: 1.15rem; font-weight: 600;
   }
   .mca-tabbar a i{ font-size: 1.9rem; }
   .mca-tabbar a span{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .mca-tabbar a.on{ color: var(--mca-dark-red); background: rgba(122,12,20,.08); }
   body{ padding-bottom: 8rem; }
}