/* =========================================================
   🚀 SGS PROFILE PAGE — ULTRA PREMIUM CSS
   Dark Glassmorphism + SaaS UI
========================================================= */

/* =========================================================
   🌍 GOOGLE FONTS
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');


/* =========================================================
   🎨 ROOT VARIABLES
========================================================= */
:root {

  --primary:
    #7c5cff;

  --primary-light:
    #9d85ff;

  --secondary:
    #00d4ff;

  --success:
    #00d26a;

  --danger:
    #ff4d6d;

  --warning:
    #ffb020;

  --bg:
    #0b1020;

  --surface:
    rgba(255,255,255,0.06);

  --surface2:
    rgba(255,255,255,0.04);

  --border:
    rgba(255,255,255,0.08);

  --text:
    #ffffff;

  --text2:
    rgba(255,255,255,0.7);

  --text3:
    rgba(255,255,255,0.45);

  --shadow:
    0 20px 60px rgba(0,0,0,0.45);

  --blur:
    blur(18px);

  --radius:
    24px;

  --radius-sm:
    16px;
}


/* =========================================================
   ☀️ LIGHT MODE
========================================================= */
[data-theme="light"] {

  --bg:
    #f4f7ff;

  --surface:
    rgba(255,255,255,0.8);

  --surface2:
    rgba(255,255,255,0.65);

  --border:
    rgba(0,0,0,0.06);

  --text:
    #101828;

  --text2:
    #475467;

  --text3:
    #98a2b3;

  --shadow:
    0 20px 60px rgba(15,23,42,0.08);
}


/* =========================================================
   🔥 RESET
========================================================= */
* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

html {

  scroll-behavior: smooth;
}

body {

  font-family:
    'Inter',
    sans-serif;

  background:
    radial-gradient(
      circle at top left,
      rgba(124,92,255,0.15),
      transparent 30%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(0,212,255,0.12),
      transparent 30%
    ),

    var(--bg);

  color:
    var(--text);

  min-height:
    100vh;

  overflow-x:
    hidden;
}


/* =========================================================
   🌀 LOADER
========================================================= */
.loader-overlay {

  position:
    fixed;

  inset: 0;

  background:
    rgba(5,8,20,0.92);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  z-index:
    9999;

  backdrop-filter:
    blur(12px);
}

.loader {

  text-align:
    center;
}

.spinner {

  width:
    70px;

  height:
    70px;

  border:
    5px solid rgba(255,255,255,0.1);

  border-top:
    5px solid var(--primary);

  border-radius:
    50%;

  animation:
    spin 1s linear infinite;

  margin:
    auto;
}

.loader-text {

  margin-top:
    16px;

  color:
    white;

  font-size:
    14px;

  letter-spacing:
    1px;
}

@keyframes spin {

  to {

    transform:
      rotate(360deg);
  }
}


/* =========================================================
   📦 LAYOUT
========================================================= */
.layout {

  display:
    flex;

  min-height:
    100vh;
}


/* =========================================================
   📚 SIDEBAR
========================================================= */
.sidebar {

  width:
    300px;

  background:
    rgba(10,14,30,0.75);

  backdrop-filter:
    var(--blur);

  border-right:
    1px solid var(--border);

  padding:
    24px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  position:
    fixed;

  inset:
    0 auto 0 0;

  z-index:
    100;
}

.sidebar-brand {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  margin-bottom:
    30px;
}

.brand-icon {

  width:
    56px;

  height:
    56px;

  border-radius:
    18px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--secondary)
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    24px;

  box-shadow:
    0 10px 35px rgba(124,92,255,0.4);
}

.brand-name {

  font-size:
    22px;

  font-weight:
    800;
}

.brand-sub {

  font-size:
    12px;

  color:
    var(--text2);
}

.sidebar-nav {

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}

.nav-section-label {

  font-size:
    12px;

  color:
    var(--text3);

  margin:
    12px 0 4px;
}

.nav-item {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    14px 16px;

  border-radius:
    16px;

  text-decoration:
    none;

  color:
    var(--text2);

  transition:
    .3s ease;

  cursor:
    pointer;

  font-weight:
    600;
}

.nav-item:hover,
.nav-item.active {

  background:
    linear-gradient(
      135deg,
      rgba(124,92,255,0.22),
      rgba(0,212,255,0.16)
    );

  color:
    white;

  transform:
    translateX(5px);
}

.nav-icon {

  font-size:
    18px;
}


/* =========================================================
   👤 SIDEBAR FOOTER
========================================================= */
.teacher-mini {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    14px;

  border:
    1px solid var(--border);

  border-radius:
    20px;

  background:
    var(--surface2);
}

.avatar,
.topbar-avatar,
.profile-avatar-lg {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  font-weight:
    700;

  color:
    white;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--secondary)
    );
}

.avatar,
.topbar-avatar {

  width:
    48px;

  height:
    48px;
}

.profile-avatar-lg {

  width:
    110px;

  height:
    110px;

  font-size:
    36px;

  box-shadow:
    0 20px 50px rgba(124,92,255,0.45);
}


/* =========================================================
   🖥️ MAIN
========================================================= */
.main {

  margin-left:
    300px;

  width:
    calc(100% - 300px);

  padding:
    24px;
}


/* =========================================================
   🔝 TOPBAR
========================================================= */
.topbar {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-bottom:
    30px;
}

.topbar-title {

  font-size:
    30px;

  font-weight:
    800;
}

.topbar-sub {

  color:
    var(--text2);

  margin-top:
    5px;
}

.topbar-right {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}

.dark-toggle,
.hamburger {

  width:
    48px;

  height:
    48px;

  border:
    none;

  border-radius:
    16px;

  background:
    var(--surface);

  color:
    var(--text);

  cursor:
    pointer;

  font-size:
    18px;

  backdrop-filter:
    var(--blur);

  border:
    1px solid var(--border);

  transition:
    .3s ease;
}

.dark-toggle:hover,
.hamburger:hover {

  transform:
    translateY(-3px);

  background:
    rgba(124,92,255,0.2);
}


/* =========================================================
   👤 HERO
========================================================= */
.profile-hero {

  background:
    linear-gradient(
      135deg,
      rgba(124,92,255,0.18),
      rgba(0,212,255,0.12)
    );

  border:
    1px solid var(--border);

  border-radius:
    32px;

  padding:
    35px;

  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  backdrop-filter:
    var(--blur);

  box-shadow:
    var(--shadow);

  margin-bottom:
    24px;
}

.profile-hero-info h2 {

  font-size:
    36px;

  font-weight:
    800;
}

.profile-hero-info p {

  margin-top:
    6px;

  color:
    var(--text2);
}

.hero-badges {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    18px;
}

.hero-chip {

  padding:
    10px 16px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,0.08);

  border:
    1px solid var(--border);

  font-size:
    13px;

  font-weight:
    600;
}


/* =========================================================
   📦 CARDS
========================================================= */
.two-col {

  display:
    grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    22px;
}

.card {

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    28px;

  backdrop-filter:
    var(--blur);

  box-shadow:
    var(--shadow);

  overflow:
    hidden;
}

.card-header {

  padding:
    22px 24px;

  border-bottom:
    1px solid var(--border);

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;
}

.card-title {

  font-size:
    18px;

  font-weight:
    700;
}

.card-body {

  padding:
    24px;
}


/* =========================================================
   📄 INFO ROW
========================================================= */
.info-row {

  display:
    flex;

  gap:
    16px;

  align-items:
    center;

  margin-bottom:
    22px;
}

.info-icon {

  width:
    52px;

  height:
    52px;

  border-radius:
    16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    rgba(124,92,255,0.15);

  font-size:
    22px;
}

.info-label {

  color:
    var(--text3);

  font-size:
    13px;

  margin-bottom:
    4px;
}

.info-value {

  font-size:
    16px;

  font-weight:
    700;
}


/* =========================================================
   📝 FORM
========================================================= */
.form-group {

  margin-bottom:
    20px;
}

.form-group label {

  display:
    block;

  margin-bottom:
    8px;

  font-size:
    14px;

  font-weight:
    600;
}

.input-icon-wrap {

  position:
    relative;
}

.input-icon-wrap .icon {

  position:
    absolute;

  left:
    16px;

  top:
    50%;

  transform:
    translateY(-50%);

  color:
    var(--text3);
}

.input {

  width:
    100%;

  padding:
    16px 16px 16px 50px;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  background:
    var(--surface2);

  color:
    var(--text);

  outline:
    none;

  font-size:
    15px;

  transition:
    .3s ease;
}

.input:focus {

  border-color:
    var(--primary);

  box-shadow:
    0 0 0 4px rgba(124,92,255,0.15);
}


/* =========================================================
   🔘 BUTTONS
========================================================= */
.btn {

  border:
    none;

  cursor:
    pointer;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    15px 22px;

  border-radius:
    18px;

  font-weight:
    700;

  transition:
    .3s ease;
}

.btn-primary {

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--secondary)
    );

  color:
    white;
}

.btn-danger {

  background:
    linear-gradient(
      135deg,
      var(--danger),
      #ff758f
    );

  color:
    white;
}

.btn:hover {

  transform:
    translateY(-4px);

  box-shadow:
    0 14px 35px rgba(0,0,0,0.25);
}


/* =========================================================
   📊 PROGRESS BAR
========================================================= */
.progress-bar {

  width:
    100%;

  height:
    10px;

  background:
    rgba(255,255,255,0.08);

  border-radius:
    999px;

  overflow:
    hidden;
}

.progress-fill {

  height:
    100%;

  width:
    0;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--secondary)
    );

  transition:
    .4s ease;
}


/* =========================================================
   🔔 TOAST
========================================================= */
.toast-container {

  position:
    fixed;

  top:
    20px;

  right:
    20px;

  z-index:
    9999;
}

.toast {

  background:
    rgba(20,25,45,0.9);

  color:
    white;

  padding:
    16px 22px;

  border-radius:
    18px;

  margin-bottom:
    14px;

  backdrop-filter:
    blur(14px);

  border:
    1px solid rgba(255,255,255,0.08);

  animation:
    toastIn .4s ease;
}

.toast.success {

  border-left:
    5px solid var(--success);
}

.toast.error {

  border-left:
    5px solid var(--danger);
}

@keyframes toastIn {

  from {

    opacity:
      0;

    transform:
      translateX(40px);
  }

  to {

    opacity:
      1;

    transform:
      translateX(0);
  }
}


/* =========================================================
   ✨ ANIMATION
========================================================= */
.fade-in {

  animation:
    fade .6s ease;
}

@keyframes fade {

  from {

    opacity:
      0;

    transform:
      translateY(20px);
  }

  to {

    opacity:
      1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   📱 RESPONSIVE
========================================================= */
.hamburger {

  display:
    none;
}

.sidebar-overlay {

  display:
    none;
}

@media(max-width:992px) {

  .two-col {

    grid-template-columns:
      1fr;
  }

  .sidebar {

    transform:
      translateX(-100%);

    transition:
      .3s ease;
  }

  .sidebar.open {

    transform:
      translateX(0);
  }

  .sidebar-overlay.active {

    display:
      block;

    position:
      fixed;

    inset:
      0;

    background:
      rgba(0,0,0,0.5);

    z-index:
      90;
  }

  .main {

    margin-left:
      0;

    width:
      100%;
  }

  .hamburger {

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;
  }

  .profile-hero {

    flex-direction:
      column;

    text-align:
      center;
  }
}

@media(max-width:600px) {

  .main {

    padding:
      16px;
  }

  .topbar-title {

    font-size:
      24px;
  }

  .profile-hero {

    padding:
      24px;
  }

  .card-body,
  .card-header {

    padding:
      18px;
  }
}