/* css/courses.css — Courses list + Course details (light by default, supports dark via body:not(.light)) */

/* light theme tokens */
:root{
    --bg:#f6f8fb; --card:#ffffff; --text:#0f172a; --muted:#64748b; --border:#e5e9f2;
    --chip-bg:#f1edff; --chip-fg:#6d5ff6; --info-bg:#e8f3ff; --info-fg:#0b7cff;
    --ok:#16a34a; --bad:#ef4444; --radius:16px; --shadow:0 10px 30px rgba(15,23,42,.06);
  }
  
  /* dark */
  body:not(.light){
    --bg:#0b1220; --card:#0f172a; --text:#e2e8f0; --muted:#8a8fa3; --border:rgba(148,163,184,.15);
    --chip-bg:rgba(124,97,255,.15); --chip-fg:#9aa0ff; --info-bg:rgba(0,139,255,.12); --info-fg:#69b9ff;
    --ok:#22c55e; --bad:#ef476f; --shadow:0 8px 28px rgba(2,6,23,.35);
  }
  
  .page.courses-page,.page.course-details-page{display:block}
  
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--text)}
  
  .main-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
  .page-heading{font-weight:800;font-size:28px;margin:0;color:var(--text)}
  
  .courses-kpis{display:flex;gap:12px;flex-wrap:wrap}
  .kpi-mini{padding:12px 14px}
  .kpi-mini-title{color:var(--muted);font-size:12px}
  .kpi-mini-value{font-weight:800;font-size:20px;color:var(--text)}
  
  .courses-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
  .category-bar{display:flex;gap:10px;flex-wrap:wrap}
  .cat-btn{border:1px solid var(--border);background:#fff;color:var(--text);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:600}
  body:not(.light) .cat-btn{background:transparent}
  .cat-btn.active{background:var(--chip-bg);color:var(--chip-fg);border-color:transparent}
  .badge-mini{background:#eef2ff;color:#4f46e5;padding:2px 6px;border-radius:999px;margin-left:6px;font-weight:700;font-size:12px}
  body:not(.light) .badge-mini{background:rgba(255,255,255,.08);color:var(--text)}
  
  .courses-actions{display:flex;gap:10px;align-items:center}
  .search-wrap input{width:280px;max-width:50vw;background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text);outline:none}
  body:not(.light) .search-wrap input{background:rgba(148,163,184,.08)}
  #courseSort{background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text);outline:none}
  body:not(.light) #courseSort{background:rgba(148,163,184,.08)}
  
  .courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
  .course-card{padding:16px}
  .course-card.skel{height:240px;background:linear-gradient(90deg,rgba(15,23,42,.06),rgba(15,23,42,.12),rgba(15,23,42,.06));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
  @keyframes shimmer{to{background-position:-200% 0}}
  
  .cc-head{display:flex;justify-content:space-between;align-items:center}
  .cc-badges{display:flex;gap:8px}
  .cc-status{font-size:12px;color:var(--muted)}
  .status-dot{padding:3px 8px;border-radius:999px;font-weight:700;font-size:11px}
  .status-dot.on{background:rgba(34,197,94,.12);color:var(--ok)}
  .status-dot.off{background:rgba(239,71,111,.12);color:var(--bad)}
  .cc-title{font-size:18px;margin:10px 0 4px;font-weight:800;color:var(--text)}
  .cc-meta{display:flex;gap:8px;align-items:center}
  .meta-chip{font-size:12px;padding:4px 8px;border-radius:8px;background:#eef2f7;color:#334155}
  body:not(.light) .meta-chip{background:rgba(148,163,184,.12);color:var(--text)}
  .cc-desc{color:var(--muted);margin:8px 0 10px;min-height:40px}
  .cc-price-row{display:flex;gap:10px;align-items:center;justify-content:space-between}
  .cc-price{font-weight:800;font-size:18px;color:var(--text)}
  .cc-months,.cc-students{color:var(--muted)}
  .cc-tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
  .pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2f7;color:#334155;font-weight:600;font-size:12px}
  body:not(.light) .pill{background:rgba(148,163,184,.12);color:var(--text)}
  .chip{display:inline-block;padding:4px 10px;border-radius:8px;font-weight:700;font-size:12px}
  .chip.soft{background:var(--chip-bg);color:var(--chip-fg)}
  .chip.info{background:var(--info-bg);color:var(--info-fg)}
  .cc-actions{display:flex;gap:8px;margin-top:10px}
  .btn{border:1px solid var(--border);background:#fff;color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:700}
  body:not(.light) .btn{background:transparent}
  .btn.view{background:var(--chip-bg);color:var(--chip-fg);border-color:transparent}
  .btn.ghost{opacity:.9}
  
  /* ---------- Course Details ---------- */
  /* Back button row – flush with the left padding of the content column */
  .cd-back-row{
    display:flex;
    align-items:center;
    gap:8px;
    /* pull slightly toward the far left so it sits exactly where you marked */
    margin: -6px 0 10px -8px;
  }
  
  /* Header grid: big banner at left, text at right */
  .cd-header{display:grid;grid-template-columns: 340px 1fr;gap:18px;align-items:start;margin-bottom:14px}
  
  /* KPIs block */
  .cd-kpis{display:grid;grid-template-columns:minmax(220px,320px);gap:12px;margin-bottom:16px}
  
  /* Tabs */
  .cd-tabs{padding:0;overflow:hidden}
  .cd-tabs .tabbar{padding:10px;border-bottom:1px solid var(--border);background:var(--card)}
  .cd-tabs .tab{border:none;background:transparent;color:var(--text);padding:10px 12px;border-radius:10px;font-weight:700;cursor:pointer}
  .cd-tabs .tab.active{background:#eef2f7}
  body:not(.light) .cd-tabs .tab.active{background:rgba(148,163,184,.12)}
  .cd-tabs .tabpane{display:none;padding:14px}
  .cd-tabs .tabpane.active{display:block}
  
  .cd-about{padding:12px}
  .cd-about-title{font-weight:800;margin-bottom:6px;color:var(--text)}
  .cd-about-text{color:var(--muted);line-height:1.6}
  .cd-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
  
  .table-wrap{overflow:auto}
  .table{width:100%;border-collapse:collapse;font-size:14px}
  .table thead th{text-align:left;padding:10px;border-bottom:1px solid var(--border);color:#475569}
  body:not(.light) .table thead th{color:#cbd5e1}
  .table tbody td{padding:10px;border-bottom:1px solid var(--border);color:var(--text)}
  
  /* Curriculum */
  .cur-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .cur-item{background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:10px}
  body:not(.light) .cur-item{background:rgba(148,163,184,.06)}
  .cur-title{font-weight:800;display:flex;align-items:center;gap:8px;color:var(--text)}
  .cur-index{width:22px;height:22px;display:inline-grid;place-items:center;background:var(--chip-bg);color:var(--chip-fg);border-radius:999px;font-size:12px}
  .lesson-list{list-style:none;margin:8px 0 0 0;padding:0 0 0 8px;display:grid;gap:6px}
  .lesson{display:flex;align-items:center;gap:8px;color:var(--muted)}
  .lesson .dot{width:6px;height:6px;background:#94a3b8;border-radius:50%;display:inline-block}
  
  /* Skeleton */
  .cd-header-skel,.cd-kpi-skel,.cd-tabs-skel{height:90px;margin:10px;border-radius:12px;
    background:linear-gradient(90deg,rgba(15,23,42,.06),rgba(15,23,42,.12),rgba(15,23,42,.06));
    background-size:200% 100%;animation:shimmer 1.2s linear infinite}
  body:not(.light) .cd-header-skel,body:not(.light) .cd-kpi-skel,body:not(.light) .cd-tabs-skel{
    background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04))
  }
  
  /* Responsive */
  @media (max-width:1024px){
    .courses-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
    .cd-header{grid-template-columns: 280px 1fr}
  }
  @media (max-width:640px){
    .search-wrap input{width:100%}
    .courses-actions{width:100%;justify-content:space-between}
    .cd-header{grid-template-columns:1fr}
  }
  


/* make the details root a positioning context */
#courseDetailsRoot { position: relative; }

/* float the back button farther left */
.cd-back-floating{
  position: absolute;
  left: -96px;           /* was -44; go more negative to push left */
  top: -2px;             /* nudge vertically if needed */
  z-index: 3;            /* keep it above the banner */
}

/* safety on smaller screens: pull it back inside */
@media (max-width: 1280px){
  .cd-back-floating{ left: -72px; }
}
@media (max-width: 1024px){
  .cd-back-floating{ left: -12px; top: 0; }
}




/* ---------- Enrolled students / Course details styles (append to courses.css) ---------- */

.students-container { 
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.06);
}

.students-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}
.students-table thead th {
  text-align: left;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.students-table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.students-table .col-idx {
  width: 48px;
  text-align: center;
  font-weight:700;
  color: var(--muted);
}

/* student cell: avatar + stacked info */
.student-cell {
  display:flex;
  align-items:center;
  gap:12px;
}
.student-avatar {
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  box-shadow: 0 6px 18px rgba(2,6,23,0.25);
  font-size:16px;
}
.student-info { display:flex; flex-direction:column; gap:2px; }
.student-name { font-weight:800; font-size:15px; color: var(--text); }
.student-sub { font-size:12px; color: var(--muted); margin-top:2px; }

.cell-text, .student-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.col-type, .col-amt, .col-final, .col-selling, .col-emisPaid, .col-emiSel, .col-expiry {
  white-space:nowrap;
}

@media (max-width:900px){
  .students-table { min-width:700px; }
  .student-avatar { width:40px; height:40px; min-width:40px; }
}

/* Course details tabs (force readable blue active in both themes) */
.cd-tabs .tabbar { padding:10px; }
.cd-tabs .tab {
  appearance:none;
  border:1px solid rgba(148,163,184,0.18);
  background:#fff; color:#0f1724;
  padding:8px 14px; border-radius:10px; font-weight:600; cursor:pointer;
}
body.light .cd-tabs .tab { background:#fff; color:#0f1724; border-color: rgba(148,163,184,0.18); }
.cd-tabs .tab:hover { background:#f3f6fb; }
.cd-tabs .tab.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 6px 18px rgba(37,99,235,0.12);
}
.cd-tabs .tab, .cd-tabs .tab.active { z-index: 6; position: relative; }




/*------changes of courses.js-----*/

/* --- Course Card Banner: fill the card, no side gaps --- */
.course-card .cc-banner{
  width: 100%;
  aspect-ratio: 16 / 9;           /* consistent height across the grid */
  border-radius: 16px;
  overflow: hidden;               /* crop overflow instead of letterboxing */
  background: var(--surface-2, #f1f5f9);
  margin: 0 0 12px 0;             /* snug spacing below the banner */
}

.course-card .cc-banner img.course-banner-img{
  display: block;                 /* remove inline-img extra baseline gap */
  width: 100%;
  height: 100%;
  object-fit: cover;              /* <-- key: fills the box, no empty bars */
  object-position: center;
}




/* ===== Course Details: Blue/White Tabs ===== */
:root{
  --cd-blue: #2563eb;      /* primary */
  --cd-blue-100: #dbeafe;  /* light bg */
  --cd-blue-200: #bfdbfe;  /* border */
  --cd-text: #0f172a;      /* slate-900 */
}

/* Tab bar container */
.cd-tabs .tabbar{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px;
  background:#fff;
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
}

/* Tab buttons (default/inactive) */
.cd-tabs .tab{
  appearance:none;
  -webkit-tap-highlight-color: transparent;
  cursor:pointer;
  padding:10px 16px;
  border-radius:10px;
  font-weight:800;
  background:#fff;
  color:#1e3a8a;                /* dark blue text */
  border:1.5px solid var(--cd-blue-200);
  transition:background .18s ease, color .18s ease,
             box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}

/* Hover + focus */
.cd-tabs .tab:hover{ background:var(--cd-blue-100); border-color:var(--cd-blue); }
.cd-tabs .tab:focus-visible{ outline:3px solid var(--cd-blue-200); outline-offset:2px; }

/* Active tab */
.cd-tabs .tab.active{
  background:var(--cd-blue);
  color:#fff;
  border-color:var(--cd-blue);
  box-shadow:0 8px 22px rgba(37,99,235,.25), inset 0 0 0 1px rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* (Optional) show/hide panes using the same 'active' class */
.cd-tabs .tabpane{ display:none; }
.cd-tabs .tabpane.active{ display:block; }





/* ===== Course Details: Blue/White Tabs ===== */
:root{
  --cd-blue: #2563eb;
  --cd-blue-100: #dbeafe;
  --cd-blue-200: #bfdbfe;
}

.cd-tabs .tabbar{
  display:flex; gap:10px; align-items:center;
  padding:8px;
  background:#fff;
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
}

.cd-tabs .tab{
  appearance:none; cursor:pointer;
  padding:10px 16px; border-radius:10px; font-weight:800;
  background:#fff; color:#1e3a8a;
  border:1.5px solid var(--cd-blue-200);
  transition:background .18s, color .18s, box-shadow .18s, transform .12s, border-color .18s;
}
.cd-tabs .tab:hover{ background:var(--cd-blue-100); border-color:var(--cd-blue); }
.cd-tabs .tab:focus-visible{ outline:3px solid var(--cd-blue-200); outline-offset:2px; }
.cd-tabs .tab.active{
  background:var(--cd-blue); color:#fff; border-color:var(--cd-blue);
  box-shadow:0 8px 22px rgba(37,99,235,.25), inset 0 0 0 1px rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* keep panes toggled by 'active' class (your JS already does this) */
.cd-tabs .tabpane{ display:none; }
.cd-tabs .tabpane.active{ display:block; }



.cc-banner{
  height: 200px;            /* tune if you like (180–220) */
  padding: 10px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* prevent cropping; keep image inside the frame */
.cc-banner img,
.course-banner-img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;     /* <- this is the key */
  display:block;
}


/* --- Course Details: Tab buttons (blue/white) --- */
.cd-tabs .tabbar .tab{
  background:#ffffff !important;
  color:#1e3a8a !important;           /* blue text */
  border:1.5px solid #bfdbfe !important;
  border-radius:12px !important;
  font-weight:800;
  padding:10px 16px;
  box-shadow:none !important;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s;
}

.cd-tabs .tabbar .tab:hover{
  background:#eaf2ff !important;
  border-color:#2563eb !important;
}

.cd-tabs .tabbar .tab.active{
  background:#2563eb !important;      /* BLUE button */
  color:#ffffff !important;            /* WHITE text */
  border-color:#2563eb !important;
  box-shadow:0 10px 22px rgba(37,99,235,.25) !important;
}




/* ===== Fancy skeleton for Courses grid ===== */
.courses-skeleton{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}

.skel-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:14px;
  overflow:hidden;
  animation:floatUp .28s ease-out both;
}

.skel-banner{
  height:170px;
  border-radius:12px;
  margin-bottom:12px;
  background:
    linear-gradient(100deg,
      rgba(148,163,184,.18) 8%,
      rgba(148,163,184,.32) 18%,
      rgba(148,163,184,.18) 33%) ;
  background-size:200% 100%;
  animation:shimmer 1.2s linear infinite;
}

.skel-head{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 8px; }
.skel-chip{
  display:inline-block; height:18px; width:86px; border-radius:999px;
  background:linear-gradient(100deg, rgba(148,163,184,.14) 8%, rgba(148,163,184,.26) 18%, rgba(148,163,184,.14) 33%);
  background-size:200% 100%; animation:shimmer 1.2s linear infinite;
}
.skel-dot{
  height:18px; width:78px; border-radius:999px;
  background:linear-gradient(100deg, rgba(34,197,94,.18) 8%, rgba(34,197,94,.28) 18%, rgba(34,197,94,.18) 33%);
  background-size:200% 100%; animation:shimmer 1.2s linear infinite;
}

.skel-line{
  height:14px; border-radius:8px; margin:8px 0;
  background:linear-gradient(100deg, rgba(148,163,184,.16) 8%, rgba(148,163,184,.3) 18%, rgba(148,163,184,.16) 33%);
  background-size:200% 100%; animation:shimmer 1.2s linear infinite;
}
.skel-line.lg{ width:80%; height:16px; }
.skel-line.md{ width:60%; }

.skel-meta{ display:flex; gap:8px; margin:4px 0 6px; }
.skel-pill{
  height:22px; width:90px; border-radius:10px;
  background:linear-gradient(100deg, rgba(148,163,184,.14) 8%, rgba(148,163,184,.28) 18%, rgba(148,163,184,.14) 33%);
  background-size:200% 100%; animation:shimmer 1.2s linear infinite;
}

.skel-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.skel-price{
  height:18px; width:120px; border-radius:8px;
  background:linear-gradient(100deg, rgba(148,163,184,.18) 8%, rgba(148,163,184,.34) 18%, rgba(148,163,184,.18) 33%);
  background-size:200% 100%; animation:shimmer 1.2s linear infinite;
}
.skel-btn{
  height:36px; width:120px; border-radius:10px;
  background:linear-gradient(100deg, rgba(124,97,255,.20) 8%, rgba(124,97,255,.34) 18%, rgba(124,97,255,.20) 33%);
  background-size:200% 100%; animation:shimmer 1.2s linear infinite;
}

/* already defined in file for other skeletons; reuse safely */
@keyframes shimmer{ to{ background-position:-200% 0; } }
@keyframes floatUp{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* dark theme tweaks */
body:not(.light) .skel-banner,
body:not(.light) .skel-chip,
body:not(.light) .skel-line,
body:not(.light) .skel-pill,
body:not(.light) .skel-price{
  background:linear-gradient(100deg, rgba(255,255,255,.06) 8%, rgba(255,255,255,.12) 18%, rgba(255,255,255,.06) 33%);
  background-size:200% 100%;
}
body:not(.light) .skel-btn{
  background:linear-gradient(100deg, rgba(124,97,255,.22) 8%, rgba(124,97,255,.38) 18%, rgba(124,97,255,.22) 33%);
}