@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
}

body {
  background-color: #f0f5ff;
  color: #1a2542;
  display: flex;
  min-height: 100vh;
}

/* Header Bar */
.header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  z-index: 100;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 10px; /* space between logo and name */
}

.brand-container img {
  width: 150px;          /* adjust for your design */
  height: 150px;
  object-fit: contain;  /* ensures full logo is visible */
  border-radius: 8px;   /* optional: rounded corners */
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #f6f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4169e1;
  font-weight: bold;
}

/* Sidebar Styles */
.sidebar {
  width: 100px;
  background-color: #ffffff;
  padding: 90px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 50;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 16px;
  margin-bottom: 10px;
  color: #8a94a6;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #f0f5ff;
  color: #4169e1;
}

.nav-item.active {
  background-color: #4169e1;
  color: white;
}

.nav-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.nav-label {
  font-size: 10px;
  text-align: center;
}

/* Main Content Styles */
.main-content {
  flex: 1;
  padding: 90px 30px 30px 130px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.dashboard-title {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(90deg, #1a2542, #4169e1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dashboard-subtitle {
  font-size: 15px;
  color: #8a94a6;
  margin-top: 5px;
}

    .date-filter {
      background: #f5f7ff;
      color: #1a2542;
      padding: 10px 18px;
      border-radius: 12px;
      font-weight: 500;
      font-size: 15px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      position: relative;
      cursor: pointer;
      margin-left: 900px;
    }

    .date-picker {
      position: absolute;
      top: 45px;
      left: 0;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      padding: 10px;
      display: none;
      z-index: 20;
    }

    .date-picker input {
      border: none;
      font-size: 15px;
      color: #1a2542;
      background: none;
      outline: none;
      cursor: pointer;
    }

    .date-filter.open .date-picker {
      display: block;
      animation: fadeIn 0.25s ease;
    }

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

/* New Courses */
    h2 {
      color: #1a2542;
      margin-bottom: 20px;
      font-size: 24px;
    }

    .new-courses {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 25px;
    }

    .course-card {
      background: white;
      border-radius: 18px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.08);
      padding: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .course-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .course-card, .stat-card, .dashboard-header, .members img, .nav-item, .user-profile {
  transition: all 0.22s cubic-bezier(.4,0,.2,1);
}

.course-card {
  animation: fadeUp 0.9s cubic-bezier(.39,.58,.57,1.23);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px);}
  to { opacity: 1; transform: none;}
}

.stat-card {
  animation: popIn 0.7s cubic-bezier(.47,.98,.52,1.42);
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.95);}
  to { opacity: 1; transform: none;}
}

.nav-item.active, .course-card:hover {
  box-shadow: 0 8px 24px rgba(65,105,225,.12);
  transform: scale(1.05) translateY(-4px) rotate(-1deg);
}


    .course-icon {
      font-size: 40px;
      color: white;
      background: linear-gradient(135deg, #6a11cb, #2575fc);
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      margin-bottom: 15px;
    }

    .course-card:nth-child(2) .course-icon {
      background: linear-gradient(135deg, #f7971e, #ffd200);
    }

    .course-card:nth-child(3) .course-icon {
      background: linear-gradient(135deg, #00c6ff, #0072ff);
    }

    .course-card:nth-child(4) .course-icon {
      background: linear-gradient(135deg, #ff416c, #ff4b2b);
    }

    .course-card:nth-child(5) .course-icon {
      background: linear-gradient(135deg, #11998e, #38ef7d);
    }

    .course-title {
      font-size: 18px;
      color: #1a2542;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .course-lessons {
      font-size: 14px;
      color: #666;
      margin-bottom: 15px;
    }

    .members {
      display: flex;
      align-items: center;
    }

    .members img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-left: -8px;
      box-shadow: 0 0 0 2px #f7f8fc;
      transition: transform 0.2s;
    }

    .members img:first-child {
      margin-left: 0;
    }

    .members img:hover {
      transform: scale(1.15);
      z-index: 2;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .course-card {
        padding: 15px;
      }
      .course-title {
        font-size: 16px;
      }
    }
/* Dashboard Sections Layout */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

/* Quick Stats */
.quick-stats {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #4169e1, #9370db);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 15px;
}

.blue-gradient {
  background: linear-gradient(135deg, #4169e1, #1e88e5);
  color: white;
}

.purple-gradient {
  background: linear-gradient(135deg, #9370db, #7b1fa2);
  color: white;
}

.green-gradient {
  background: linear-gradient(135deg, #43a047, #00796b);
  color: white;
}

.orange-gradient {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: white;
}

.stat-title {
  font-size: 15px;
  font-weight: 500;
  color: #8a94a6;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.badge-blue {
  background-color: rgba(65, 105, 225, 0.1);
  color: #4169e1;
}

.badge-green {
  background-color: rgba(67, 160, 71, 0.1);
  color: #43a047;
}

.badge-purple {
  background-color: rgba(147, 112, 219, 0.1);
  color: #9370db;
}

.badge-orange {
  background-color: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

/* Charts Section */
.revenue-chart-container {
  grid-column: span 7;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
}

.period-tabs {
  display: flex;
  gap: 10px;
}

.period-tab {
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.period-tab.active {
  background-color: #4169e1;
  color: white;
}

/* Circular Revenue Chart */
.revenue-chart {
  height: 300px;
  position: relative;
}

.circular-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.donut-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #4169e1 0% 25%,
    #9370db 25% 55%,
    #43a047 55% 75%,
    #ff9800 75% 100%
  );
  position: relative;
}

.donut-hole {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.donut-total {
  font-size: 24px;
  font-weight: 700;
}

.donut-label {
  font-size: 14px;
  color: #8a94a6;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

/* Performance Section */
.performance-container {
  grid-column: span 5;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.goal-progress {
  margin-top: 20px;
}

.goal-item {
  margin-bottom: 20px;
}

.goal-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.goal-title {
  font-size: 15px;
  font-weight: 500;
}

.goal-value {
  font-size: 15px;
  font-weight: 600;
}

.progress-bar {
  height: 8px;
  background-color: #f0f5ff;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  border-radius: 4px;
}

.progress-blue {
  background: linear-gradient(90deg, #4169e1, #1e88e5);
}

.progress-purple {
  background: linear-gradient(90deg, #9370db, #7b1fa2);
}

.progress-green {
  background: linear-gradient(90deg, #43a047, #00796b);
}

/* ===========================
RESPONSIVE DASHBOARD CSS
=========================== */

/* ===== Large Screens (≥1400px) ===== */
@media (min-width: 1400px) {
.main-content {
max-width: 1400px;
margin: 0 auto;
}
.new-courses {
grid-template-columns: 1fr;
}
}

/* ===== Large Tablets (≤1200px) ===== */
@media (max-width: 1200px) {
.main-content {
padding: 90px 20px 30px 110px;
}

.header-bar {
padding: 0 20px;
}

.brand-container img {
width: 120px;
height: auto;
}

.dashboard-grid,
.quick-stats {
gap: 14px;
}

.dashboard-title {
font-size: 22px;
}

.new-courses {
grid-template-columns: 1fr;
}

.date-filter {
margin-left: auto;
}
}

/* ===== Tablets (≤900px) ===== */
@media (max-width: 900px) {
/* Sidebar Shrinks */
.sidebar {
width: 70px;
padding: 80px 0 15px;
}

.nav-label {
display: none;
}

.main-content {
padding: 80px 15px 20px 85px;
}

/* Header Adjustments */
.header-bar {
padding: 0 15px;
}

.brand-container img {
width: 100px;
}

.user-profile span {
display: none;
}

/* Grid sections collapse to 1 column */
.dashboard-grid,
.quick-stats,
.new-courses {
grid-template-columns: 1fr;
gap: 18px;
}

.dashboard-title {
font-size: 20px;
}

.dashboard-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}

.revenue-chart-container,
.performance-container {
grid-column: span 12;
}

.revenue-chart-container {
order: 1;
}
.performance-container {
order: 2;
}

.date-filter {
margin-left: 0;
}
}

/* ===== Mobiles (≤600px) ===== */
@media (max-width: 600px) {
/* Sidebar Hidden */
.sidebar {
display: none;
}

.main-content {
padding: 70px 3vw 10px 3vw;
}

/* Header Compact */
.header-bar {
flex-direction: row;
justify-content: space-between;
height: 55px;
padding: 0 12px;
}

.brand-container img {
width: 80px;
height: auto;
}

.header-actions {
gap: 10px;
}

.user-avatar {
width: 30px;
height: 30px;
font-size: 13px;
}

.search-bar {
display: none; /* hide on mobile for space */
}

/* Dashboard Layout */
.dashboard-grid,
.quick-stats,
.new-courses {
grid-template-columns: 1fr;
gap: 12px;
}

.stat-card {
padding: 14px;
}

.dashboard-title {
font-size: 18px;
}

.stat-value {
font-size: 20px;
}

/* Chart & Performance Stack */
.revenue-chart-container,
.performance-container {
grid-column: span 12;
width: 100%;
}

.course-card {
padding: 15px;
}

.course-title {
font-size: 16px;
}

.date-filter {
width: fit-content;
padding: 8px 14px;
font-size: 13px;
margin-left: auto;
}
}

/* ===== Extra Small Devices (≤440px) ===== */
@media (max-width: 440px) {
.user-avatar {
width: 26px;
height: 26px;
font-size: 12px;
}

.brand-container img {
width: 70px;
}

.header-actions {
gap: 6px;
}

.header-bar {
padding: 0 8px;
}

.main-content {
padding: 65px 10px;
}

.dashboard-grid,
.quick-stats,
.new-courses {
grid-template-columns: 1fr;
gap: 10px;
}

.course-card {
padding: 12px;
}

.course-title {
font-size: 14px;
}

.dashboard-title {
font-size: 16px;
}

.date-filter {
font-size: 12px;
padding: 6px 12px;
}
}