/* ═════════════════════════════════════════════════════════
   SEDCO COLLEGE - CSS FIXES & ENHANCEMENTS
   Generated: 2026-06-18

   ⚠️  ADD THIS TO YOUR <style> SECTION OR LINK AS EXTERNAL FILE

   Installation:
   1. Option A: Copy all content into index.html <style> tag (recommended)
   2. Option B: Add <link rel="stylesheet" href="/sedco-fixes.css">
   3. Option C: Include after existing CSS with !important if conflicts
   ═════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   FIX #1: SMOOTH PAGE TRANSITIONS
   ══════════════════════════════════════════════════════════ */

[data-page]{
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  will-change: opacity;
}

[data-page].page-active{
  display: block;
  opacity: 1;
  pointer-events: auto;
  animation: fadeIn 0.3s ease-in-out;
}

.hero[data-page].page-active{
  display: flex;
}

@keyframes fadeIn{
  from{opacity: 0; transform: translateY(4px);}
  to{opacity: 1; transform: translateY(0);}
}


/* ══════════════════════════════════════════════════════════
   FIX #2: LIGHT MODE IMPROVEMENTS
   ══════════════════════════════════════════════════════════ */

/* Better border visibility in light mode */
[data-theme="light"]{
  --border: rgba(15,39,71,0.18) !important;  /* Increased from 0.12 */
  --green:  #D17C2D;                         /* Darker orange */
  --green-lt: #E59043;                       /* Medium orange */
  --green-glow: #FF6B35;                     /* Bright orange */
  --gold:   #B8860B;                         /* Darker gold */
  --gold-lt: #DAA520;                        /* Light gold */
}

/* Light mode button contrast improvement */
[data-theme="light"] .hero-badge{
  background: rgba(200,98,26,0.12) !important;
  border: 1px solid rgba(200,98,26,0.25) !important;
}

[data-theme="light"] .card-thumb,
[data-theme="light"] .progress-bar{
  background: rgba(15,39,71,0.08) !important;
}

/* Better scrollbar in light mode */
[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb{
  background: rgba(15,39,71,0.15) !important;
}


/* ══════════════════════════════════════════════════════════
   FIX #3: RESPONSIVE HERO BACKGROUNDS
   ══════════════════════════════════════════════════════════ */

.hero::before{
  width: clamp(300px, 70vw, 700px);
  height: clamp(300px, 70vw, 700px);
}

.hero::after{
  width: clamp(200px, 50vw, 400px);
  height: clamp(200px, 50vw, 400px);
}


/* ══════════════════════════════════════════════════════════
   FIX #4: MOBILE LANGUAGE WIDGET POSITIONING
   ══════════════════════════════════════════════════════════ */

@media(max-width:600px){
  #langWidget{
    position: fixed !important;
    top: 70px !important;
    right: 12px !important;
    bottom: auto !important;
    z-index: 1350 !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: auto;
    max-width: calc(100vw - 24px);
  }

  .lw-btn{
    height: 28px;
    font-size: 11px;
    padding: 0 7px;
  }

  [dir="rtl"] #langWidget{
    left: 12px !important;
    right: auto !important;
  }
}

@media(max-width:400px){
  #langWidget{
    top: 68px !important;
    gap: 2px;
  }

  .lw-btn{
    padding: 0 5px;
    font-size: 10px;
  }
}


/* ══════════════════════════════════════════════════════════
   FIX #5: RESPONSIVE CHAT INPUT & SEND BUTTON
   ══════════════════════════════════════════════════════════ */

#chatInput{
  flex: 1;
  min-width: 0;  /* Prevents flex overflow */
  padding: 10px 14px;
}

@media(max-width:500px){
  #chatInput{
    padding: 8px 12px;
    font-size: 13px;
  }

  #sendBtn{
    width: 38px;
    height: 38px;
    font-size: 15px;
    flex-shrink: 0;
  }

  .input-row{
    gap: 8px;
  }
}

@media(max-width:380px){
  #chatInput{
    padding: 8px 10px;
    font-size: 12px;
  }

  #sendBtn{
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .quick-prompts{
    display: none;
  }
}


/* ══════════════════════════════════════════════════════════
   FIX #6: FOOTER RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════ */

@media(max-width:900px){
  .footer-top{
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media(max-width:650px){
  .footer-top{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-col{
    margin-bottom: 8px;
  }
}


/* ══════════════════════════════════════════════════════════
   FIX #7: ADMISSION FORM FLUID GRID
   ══════════════════════════════════════════════════════════ */

.adm-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* No rigid breakpoint - flows naturally */
@media(max-width:500px){
  .adm-grid{
    grid-template-columns: 1fr;
  }

  .adm-field.adm-full{
    grid-column: 1;
  }
}


/* ══════════════════════════════════════════════════════════
   FIX #8: SCROLLBAR STYLING (Firefox + Chrome)
   ══════════════════════════════════════════════════════════ */

/* Chrome/Safari */
.chat-messages::-webkit-scrollbar{
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track{
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb{
  background: var(--border);
  border-radius: 3px;
  transition: background 0.2s;
}

.chat-messages::-webkit-scrollbar-thumb:hover{
  background: var(--muted);
}

.lms-side::-webkit-scrollbar{
  width: 5px;
}

.lms-side::-webkit-scrollbar-thumb{
  background: var(--border);
  border-radius: 2px;
}

/* Firefox */
.chat-messages {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.lms-side {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}


/* ══════════════════════════════════════════════════════════
   FIX #9: MEGA MENU MOBILE SUPPORT
   ══════════════════════════════════════════════════════════ */

@media(max-width:1000px){
  #megaMenu{
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mega-panel{
    flex-direction: column;
  }

  .mp-left{
    border-right: none;
    border-bottom: 1px solid rgba(0,255,136,0.12);
    padding-right: 0;
    padding-bottom: 16px;
  }

  .mp-right{
    padding-left: 0;
    padding-top: 16px;
  }
}

@media(max-width:700px){
  #megaMenu{
    top: 64px;
    max-height: calc(100vh - 64px);
    padding: 16px;
  }

  .mega-inner{
    padding: 0;
  }

  .mp-title{
    font-size: 1.1rem;
  }

  .mp-desc{
    font-size: 0.85rem;
  }
}


/* ══════════════════════════════════════════════════════════
   FIX #10: PROGRESS BAR VISIBILITY (Light Mode)
   ══════════════════════════════════════════════════════════ */

.progress-bar{
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}

[data-theme="light"] .progress-bar{
  background: rgba(15,39,71,0.15);
}

.lms-prog-bar{
  background: rgba(255,255,255,0.1);
}

[data-theme="light"] .lms-prog-bar{
  background: rgba(15,39,71,0.12);
}


/* ══════════════════════════════════════════════════════════
   FIX #11: CHAT CONTAINER RESPONSIVE HEIGHT
   ══════════════════════════════════════════════════════════ */

.chat-container{
  height: clamp(300px, 60vh, 520px);
  max-height: calc(100vh - 300px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media(max-width:700px){
  .chat-container{
    height: clamp(250px, 55vh, 420px);
    max-height: calc(100vh - 240px);
  }
}

@media(max-width:500px){
  .chat-container{
    height: clamp(200px, 50vh, 350px);
    max-height: calc(100vh - 200px);
  }
}


/* ══════════════════════════════════════════════════════════
   FIX #12: FLOATING ACTION BUTTONS — compact, no stretch
   ══════════════════════════════════════════════════════════ */

#aiFloat{
  position: fixed !important;
  bottom: 22px !important;
  left: 22px !important;
  right: auto !important;
  top: auto !important;
  z-index: 1500 !important;
  width: auto !important;
  max-width: calc(100vw - 100px) !important;
  height: auto !important;
  white-space: nowrap !important;
}

#waFloat{
  position: fixed !important;
  bottom: 22px !important;
  right: 22px !important;
  left: auto !important;
  top: auto !important;
  z-index: 1500 !important;
  width: 56px !important;
  height: 56px !important;
}

#langWidget{
  position: fixed !important;
  top: 74px !important;
  right: 14px !important;
  z-index: 1400 !important;
  width: auto !important;
}

@media(max-width:700px){
  #aiFloat{
    bottom: 88px !important;
    left: 14px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  #waFloat{
    bottom: 22px !important;
    right: 14px !important;
  }
}

[dir="rtl"] #aiFloat{
  left: auto !important;
  right: 22px !important;
}

[dir="rtl"] #waFloat{
  right: auto !important;
  left: 22px !important;
}

@media(max-width:700px){
  [dir="rtl"] #aiFloat{ right: 14px !important; left: auto !important; }
  [dir="rtl"] #waFloat{ left: 14px !important; right: auto !important; }
}


/* ══════════════════════════════════════════════════════════
   FIX #13: TYPING INDICATOR TIMING
   ══════════════════════════════════════════════════════════ */

.typing-indicator span{
  width: 6px;
  height: 6px;
  background: var(--muted);
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2){
  animation-delay: 0.15s;
}

.typing-indicator span:nth-child(3){
  animation-delay: 0.3s;
}

@keyframes typing{
  0%, 60%, 100%{
    transform: translateY(0);
    opacity: 0.7;
  }
  30%{
    transform: translateY(-8px);
    opacity: 1;
  }
}


/* ══════════════════════════════════════════════════════════
   FIX #14: LAZY LOADING SUPPORT (for images)

   Note: Add loading="lazy" to all <img> tags:
   <img src="..." loading="lazy" alt="..." />

   CSS enhancement for lazy loaded images:
   ══════════════════════════════════════════════════════════ */

img[loading="lazy"]{
  display: block;
  max-width: 100%;
  height: auto;
}

img[loading="lazy"]:not([src]){
  background: var(--dark3);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer{
  0%{background-position: -1000px 0;}
  100%{background-position: 1000px 0;}
}


/* ══════════════════════════════════════════════════════════
   FIX #15: COURSE GRID RESPONSIVE
   ══════════════════════════════════════════════════════════ */

.courses-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

@media(max-width:600px){
  .courses-grid{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

@media(max-width:400px){
  .courses-grid{
    grid-template-columns: 1fr;
  }
}


/* ══════════════════════════════════════════════════════════
   BONUS: OVERALL MOBILE SAFETY
   ══════════════════════════════════════════════════════════ */

@media(max-width:600px){
  /* Ensure nav doesn't overflow */
  .nav-inner{
    padding: 0 12px;
  }

  /* Better form inputs on mobile */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea{
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px;
    min-height: 44px;
  }

  /* Buttons large enough for touch */
  button, .btn-primary, .btn-secondary{
    min-height: 44px;
    min-width: 44px;
  }

  /* Better spacing for cards on mobile */
  .card-thumb{
    height: 120px;
  }

  /* Prevent horizontal scroll */
  body, html{
    overflow-x: hidden;
  }
}

/* ══════════════════════════════════════════════════════════
   END OF FIXES
   ═════════════════════════════════════════════════════════ */