/* students.css — styles only for the Students page/table */

:root{
    --card-bg: var(--surface, #fff);
    --muted: #8A8FA3;
    --chip-bg: rgba(124,97,255,0.12);
    --chip-fg: #7c61ff;
    --chip-blue-bg: rgba(0,139,255,0.12);
    --chip-blue-fg: #008bff;
    --red: #ef476f;
    --green: #22c55e;
    --radius: 16px;
    --shadow: 0 6px 24px rgba(20,23,54,.08);
    --table-border: rgba(20,23,54,.06);
  }
  
  .card{
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(20,23,54,.04);
  }
  
  .card.students-card{ overflow: hidden; }
  
  .card-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--table-border);
  }
  .card-title{ font-weight: 700; font-size: 18px; }
  .card-body{ padding: 12px 14px 16px; }
  
  .students-actions{ display:flex; gap:12px; align-items:center; }
  #studentsSearch{
    width: 260px; max-width: 50vw;
    border:1px solid var(--table-border); border-radius: 12px; padding:10px 12px;
    outline: none; background: #f8fafc;
  }
  
  .students-table{
    width:100%; border-collapse: collapse; font-size: 14px;
  }
  .students-table thead th{
    text-align:left; font-weight:600; color:#556; padding:12px 10px;
    border-bottom:1px solid var(--table-border);
  }
  .students-table tbody td{
    padding:12px 10px; border-bottom:1px solid var(--table-border);
  }
  .students-table tbody tr:hover{ background: rgba(20,23,54,.02); }
  
  .cell-center{ text-align:center; }
  .cell-right{ text-align:right; }
  
  .chip{
    display:inline-block; padding:4px 10px; border-radius:999px;
    background: var(--chip-bg); color: var(--chip-fg); font-weight:600;
  }
  .chip-blue{ background: var(--chip-blue-bg); color: var(--chip-blue-fg); }
  
  .badge{
    display:inline-block; padding:4px 10px; border-radius:8px; font-weight:700; font-size:12px;
  }
  .badge-red{ background: rgba(239,71,111,.12); color: var(--red); }
  .badge-green{ background: rgba(34,197,94,.12); color: var(--green); }
  
  .pill-btn{
    border:1px solid var(--table-border); padding:8px 12px; border-radius:999px;
    background:#fff; cursor:pointer;
  }
  .pill-btn:hover{ box-shadow: 0 2px 8px rgba(20,23,54,.08); }
  
  .empty-state{ padding: 24px; color: var(--muted); }
  
  /* ---------- loading skeleton ---------- */
  .shimmer-row .shimmer{
    height: 12px; border-radius: 8px; background:
      linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06));
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
  }
  @keyframes shimmer{ to{ background-position: -200% 0; } }
  
  /* ---------- modal ---------- */
  #attModal.modal-hidden{ display:none; }
  #attModal{ position:fixed; inset:0; z-index:1000; }
  #attBackdrop{
    position:absolute; inset:0; background: rgba(15, 19, 36, .5);
    backdrop-filter: blur(2px);
  }
  .modal-card{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: min(680px, 92vw); background: var(--card-bg); border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
  }
  .modal-header{ padding: 16px 18px; border-bottom: 1px solid var(--table-border); }
  .modal-body{ padding: 14px 18px 16px; }
  .modal-close{
    position:absolute; right:10px; top:10px; border:none; background:transparent;
    font-size:18px; cursor:pointer; color:#667;
  }
  .modal-video-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
  .modal-video-list li{ display:flex; gap:12px; align-items:center; padding:8px 2px; }
  .modal-video-list .thumb{ width:40px; height:28px; border-radius:8px; background:#eef; }
  .video-meta-small{ font-size:12px; color: var(--muted); }
  
  /* ---------- animations ---------- */
  .fade-in { animation: fadeIn .2s ease-out; }
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
  

  /* students.css — glossy, animated styling to match Payments */

/* ---------- Tokens / fallbacks ---------- */
:root{
  --primary: var(--indigo, #7159F5);
  --primary-600: var(--indigo-600, #4F46E5);
  --text: var(--text, #e5e7eb);
  --border: rgba(255,255,255,.12);
  --surface: rgba(9,15,28,.6);
  --muted: #94a3b8;
  --shadow: 0 12px 28px rgba(2,6,23,.30);
}

/* ---------- Card shell ---------- */
.card{ background:var(--surface); border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow); }
.card.students-card{ overflow:hidden; }
.card-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); }
.card-title{ font-weight:800; font-size:18px; }
.card-body{ padding:12px 14px 16px; }

/* ---------- Toolbar / Search ---------- */
#studentsSearch{
  min-width:260px; max-width:50vw; height:38px;
  padding:8px 12px 8px 38px;
  border-radius:12px; border:1px solid var(--border);
  background:
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2399A4B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
    no-repeat 10px center/18px 18px,
    transparent;
  color:var(--text); outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#studentsSearch:hover{ border-color:rgba(113,89,245,.35); }
#studentsSearch:focus{
  border-color:rgba(113,89,245,.55);
  box-shadow:0 0 0 4px rgba(113,89,245,.12);
  background-color:rgba(113,89,245,.04);
}

/* ---------- Table wrapper + table ---------- */
.table-wrap{
  border-radius:14px; border:1px solid var(--border);
  box-shadow:var(--shadow); overflow:auto;
  backdrop-filter:saturate(160%) blur(6px);
}
.table{ width:100%; border-collapse:collapse; }
.table thead th{
  position:sticky; top:0; z-index:1;
  text-align:left; font-weight:800; color:#cbd5e1;
  padding:12px 10px; background:linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  border-bottom:1px solid var(--border);
}
.table tbody td{ padding:12px 10px; border-bottom:1px solid var(--border); }
.table tbody tr:nth-child(odd){ background:rgba(255,255,255,0.015); }
.table tbody tr:hover{ background:rgba(113,89,245,0.10); }

/* Money / right / center helpers if used */
.cell-right{ text-align:right; } .cell-center{ text-align:center; }

/* ---------- “ViewMore” eye button ---------- */
button.view-student{
  width:36px; height:36px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border); background:rgba(255,255,255,0.02);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
button.view-student:hover{
  transform:translateY(-1px);
  background:rgba(113,89,245,.08);
  border-color:rgba(113,89,245,.35);
  box-shadow:0 10px 20px rgba(113,89,245,.20);
}

/* ---------- Pager / footer ---------- */
.pager .pill.mini{
  border-radius:12px; font-weight:800;
  transition:transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.pager .pill.mini:hover{ transform:translateY(-1px); }
#studentsPageInfo{
  padding:6px 10px; border-radius:10px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  font-weight:700;
}

/* ---------- Chips / badges (if present) ---------- */
.chip{ display:inline-block; padding:4px 10px; border-radius:999px; font-weight:700; }
.badge{ display:inline-block; padding:4px 10px; border-radius:8px; font-weight:800; font-size:12px; }

/* ---------- Empty state ---------- */
.empty-state{ padding:24px; color:var(--muted); }

/* ---------- Scrollbars ---------- */
.table-wrap::-webkit-scrollbar{ height:10px; width:10px; }
.table-wrap::-webkit-scrollbar-track{ background:transparent; }
.table-wrap::-webkit-scrollbar-thumb{
  background:rgba(113,89,245,.35); border-radius:99px; border:2px solid transparent; background-clip:content-box;
}
.table-wrap:hover::-webkit-scrollbar-thumb{ background:rgba(113,89,245,.55); }

/* ---------- Light theme tweaks ---------- */
body.light .table-wrap{ box-shadow:0 8px 22px rgba(15,23,42,.08); }
body.light .table thead th{ background:#fff; color:#334155; }
body.light .table tbody tr:nth-child(odd){ background:#fafbff; }
body.light .table tbody tr:hover{ background:#eef1ff; }
body.light #studentsSearch{ background-color:#fff; }

/* ---------- Subtle fade-in for rows ---------- */
.table tbody tr{ animation:stuFade .18s ease-out; }
@keyframes stuFade{ from{opacity:0; transform:translateY(2px)} to{opacity:1; transform:none} }