/*
FILE:
 /core/styles/dashboard.css

FINALIZED V2 RECONSTRUCTION
- V1 emotional dashboard restoration
- Premium educational hierarchy
- Guided progression psychology
- Mobile-first immersion
- Malayalam-safe spacing rhythm
- Testing-runtime compatible
*/

/* ================= PAGE ================= */

.dashboard-page{

  width:100%;

  max-width:980px;

  margin:0 auto;

  animation:fadeIn .28s ease;
}

/* ================= HEADER ================= */

.dashboard-header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  margin-bottom:24px;
}

.dashboard-title{

  font-size:34px;

  font-weight:900;

  line-height:1.08;

  letter-spacing:-1px;

  color:var(--text-primary);
}

.dashboard-user{

  padding:12px 18px;

  border-radius:999px;

  background:
    rgba(255,255,255,.72);

  backdrop-filter:blur(14px);

  border:
    1px solid rgba(255,255,255,.82);

  font-size:14px;

  font-weight:800;

  color:var(--blue);

  box-shadow:
    0 12px 30px rgba(0,87,255,.08);
}

/* ================= HERO ================= */

.dashboard-hero{

  position:relative;

  overflow:hidden;

  margin-bottom:22px;

  padding:34px;

  border-radius:34px;

  background:
    linear-gradient(
      135deg,
      rgba(0,87,255,.96),
      rgba(27,184,255,.92)
    );

  color:#fff;

  box-shadow:
    0 24px 60px rgba(0,87,255,.18);
}

.dashboard-hero::before{

  content:"";

  position:absolute;

  width:280px;
  height:280px;

  border-radius:50%;

  background:
    rgba(255,255,255,.10);

  top:-140px;
  right:-80px;
}

.dashboard-hero::after{

  content:"";

  position:absolute;

  width:200px;
  height:200px;

  border-radius:50%;

  background:
    rgba(255,255,255,.08);

  bottom:-100px;
  left:-60px;
}

.dashboard-hero-content{

  position:relative;

  z-index:2;
}

.dashboard-hero-title{

  max-width:620px;

  font-size:42px;

  font-weight:900;

  line-height:1.08;

  letter-spacing:-1.2px;

  margin-bottom:14px;
}

.dashboard-hero-text{

  max-width:620px;

  font-size:16px;

  line-height:1.8;

  color:
    rgba(255,255,255,.88);
}

/* ================= QUOTE ================= */

.dashboard-quote{

  margin-top:22px;

  padding:18px 20px;

  border-radius:24px;

  background:
    rgba(255,255,255,.12);

  backdrop-filter:blur(14px);

  border:
    1px solid rgba(255,255,255,.14);
}

.dashboard-quote-text{

  font-size:15px;

  line-height:1.8;

  font-weight:700;

  color:
    rgba(255,255,255,.94);
}

/* ================= SUMMARY ================= */

.dashboard-summary-grid{

  display:grid;

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

  gap:18px;

  margin-bottom:26px;
}

.dashboard-summary-card{

  padding:24px;

  border-radius:28px;

  background:
    rgba(255,255,255,.84);

  backdrop-filter:blur(16px);

  border:
    1px solid rgba(255,255,255,.82);

  box-shadow:
    0 16px 40px rgba(0,0,0,.06);

  transition:.18s ease;
}

.dashboard-summary-card:hover{

  transform:translateY(-2px);
}

.dashboard-summary-value{

  font-size:38px;

  font-weight:900;

  line-height:1;

  color:var(--blue);
}

.dashboard-summary-label{

  margin-top:12px;

  font-size:14px;

  font-weight:800;

  color:var(--text-secondary);
}

/* ================= SUBJECTS ================= */

.dashboard-subject-grid{

  display:grid;

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

  gap:20px;
}

.dashboard-subject-card{

  position:relative;

  overflow:hidden;

  width:100%;

  border:none;

  text-align:left;

  cursor:pointer;

  padding:24px;

  border-radius:30px;

  background:
    rgba(255,255,255,.88);

  backdrop-filter:blur(16px);

  border:
    1px solid rgba(255,255,255,.84);

  box-shadow:
    0 18px 44px rgba(0,0,0,.06);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.dashboard-subject-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      transparent
    );

  pointer-events:none;
}

.dashboard-subject-card:hover{

  transform:
    translateY(-4px);

  box-shadow:
    0 28px 56px rgba(0,87,255,.14);
}

.dashboard-subject-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  margin-bottom:18px;
}

.dashboard-subject-icon{

  width:64px;
  height:64px;

  border-radius:22px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;

  font-size:30px;

  background:
    linear-gradient(
      135deg,
      #0057ff,
      #1bb8ff
    );

  color:#fff;

  box-shadow:
    0 16px 34px rgba(0,87,255,.18);
}

.dashboard-subject-progress{

  min-width:72px;

  text-align:center;

  padding:10px 14px;

  border-radius:999px;

  background:
    #eef5ff;

  font-size:14px;

  font-weight:900;

  color:#0057ff;
}

.dashboard-subject-title{

  font-size:22px;

  font-weight:900;

  line-height:1.25;

  color:var(--text-primary);

  margin-bottom:10px;
}

.dashboard-subject-description{

  font-size:14px;

  line-height:1.8;

  color:var(--text-secondary);
}

/* ================= EMPTY ================= */

.dashboard-empty{

  padding:48px 24px;

  text-align:center;
}

/* ================= ERROR ================= */

.dashboard-error{

  padding:52px 24px;

  text-align:center;
}

/* ================= DARK MODE ================= */

.theme-dark .dashboard-user{

  background:
    rgba(15,23,42,.72);

  border:
    1px solid rgba(255,255,255,.06);
}

.theme-dark .dashboard-summary-card,
.theme-dark .dashboard-subject-card{

  background:
    rgba(15,23,42,.76);

  border:
    1px solid rgba(255,255,255,.06);
}

.theme-dark .dashboard-subject-progress{

  background:
    rgba(59,130,246,.14);

  color:#7dd3fc;
}

/* ================= TABLET ================= */

@media(max-width:1080px){

  .dashboard-summary-grid,
  .dashboard-subject-grid{

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

/* ================= MOBILE ================= */

@media(max-width:768px){

  .dashboard-page{
    max-width:100%;
  }

  .dashboard-header{

    flex-direction:column;

    align-items:flex-start;

    gap:14px;
  }

  .dashboard-title{

    font-size:28px;

    line-height:1.15;
  }

  .dashboard-user{

    padding:10px 16px;

    font-size:13px;
  }

  .dashboard-hero{

    padding:26px;

    border-radius:28px;
  }

  .dashboard-hero-title{

    font-size:32px;

    line-height:1.15;
  }

  .dashboard-hero-text{

    font-size:15px;

    line-height:1.8;
  }

  .dashboard-summary-grid,
  .dashboard-subject-grid{

    grid-template-columns:1fr;
  }

  .dashboard-summary-card{

    padding:22px;
  }

  .dashboard-summary-value{

    font-size:32px;
  }

  .dashboard-subject-card{

    padding:22px;
  }

  .dashboard-subject-title{

    font-size:20px;
  }

  .dashboard-subject-description{

    font-size:14px;
  }
}