/* =========================================
   RESET
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --green:#2E7D5B;
  --green-light:#4CAF7A;
  --red:#E74C3C;
  --blue:#4F7CFF;
  --purple:#8B5CF6;
  --orange:#F59E0B;

  --dark:#07111C;
  --dark-soft:#101D2B;

  --bg:#F4F7F6;
  --card:#FFFFFF;

  --text:#1F2A2E;
  --muted:rgba(31,42,46,.62);

  --border:rgba(31,42,46,.08);
  --shadow:0 20px 60px rgba(0,0,0,.08);
}

body{
  font-family:'Inter',sans-serif;
  background:#f8faf9;
  color:var(--text);
}

/* =========================================
   APP LAYOUT
========================================= */

.dashboard-app{
  min-height:100vh;
  display:grid;
  grid-template-columns:280px 1fr;
}

/* =========================================
   SIDEBAR
========================================= */

.sidebar{
  background:#ffffff;
  color:#1F2A2E;
  min-height:100vh;
  padding:28px 20px;
  position:sticky;
  top:0;
  border-right:1px solid #e5e7eb;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#1F2A2E;
  font-size:24px;
  font-weight:800;
  margin-bottom:38px;
}

.brand span span{
  color:var(--green-light);
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--green),var(--green-light));
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
}

.side-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.side-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  color:#5f6b76;
  text-decoration:none;
  padding:14px 16px;
  border-radius:14px;
  font-size:15px;
  font-weight:600;
  transition:.25s;
}

.side-nav a:hover,
.side-nav a.active{
  background:#eef7f2;
  color:#2E7D5B;
}

.side-nav strong{
  margin-left:auto;
  background:var(--red);
  color:#fff;
  font-size:11px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
}

.sidebar-upgrade{
  margin-top:28px;
  padding:22px;
  border-radius:22px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.sidebar-upgrade h3{
  color:#1F2A2E;
}

.sidebar-upgrade p{
  color:#6b7280;
}

.sidebar-upgrade a{
  display:inline-block;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  padding:11px 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
}

.logout-btn{
  width:100%;
  margin-top:22px;
  height:48px;
  border:none;
  border-radius:14px;
  background:#f3f4f6;
  color:#ef4444;
  font-weight:700;
  cursor:pointer;
}

/* =========================================
   MAIN PANEL
========================================= */

.main-panel{
  padding:32px;
  overflow:hidden;
}

/* =========================================
   TOPBAR
========================================= */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:28px;
}

.eyebrow{
  color:var(--green);
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:8px;
}

.topbar h1{
  font-size:38px;
  line-height:1.15;
  margin-bottom:6px;
}

.topbar span{
  color:var(--muted);
}

.top-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.date-pill,
.bell-btn,
.user-pill{
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.04);
}

.date-pill{
  padding:14px 18px;
  border-radius:14px;
  font-size:14px;
  font-weight:600;
}

.bell-btn{
  width:52px;
  height:52px;
  border-radius:14px;
  border:none;
  position:relative;
  cursor:pointer;
  font-size:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  color:#1F2A2E;
}


.bell-btn small{
  position:absolute;
  top:7px;
  right:7px;
  width:18px;
  height:18px;
  background:var(--red);
  color:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:10px;
}

.user-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 8px 8px;
  border-radius:999px;
  font-weight:700;
}

.user-pill div{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#2E7D5B;
  color:#fff;
  display:grid;
  place-items:center;
}

/* =========================================
   METRIC CARDS
========================================= */

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:24px;
}

.metric-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  padding:22px;
  box-shadow:0 16px 40px rgba(0,0,0,.045);
  transition:.25s;
}

.metric-card:hover{
  transform:translateY(-4px);
}

.metric-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:24px;
  margin-bottom:18px;
}

.metric-icon.green{
  background:#EAF6EF;
}

.metric-icon.blue{
  background:#EAF0FF;
}

.metric-icon.orange{
  background:#FFF2DF;
}

.metric-icon.purple{
  background:#F1EAFE;
}

.metric-card p{
  color:var(--muted);
  font-size:14px;
  margin-bottom:8px;
}

.metric-card h2{
  font-size:34px;
  line-height:1;
  margin-bottom:8px;
}

.metric-card h2 span{
  font-size:16px;
  color:var(--muted);
}

.metric-card small{
  color:var(--green);
  font-weight:700;
}

/* =========================================
   CONTENT GRID
========================================= */

.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:24px;
}

.left-column{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.right-column{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:26px;
  box-shadow:0 18px 50px rgba(0,0,0,.05);
  padding:24px;
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.panel-head h2,
.panel h2{
  font-size:24px;
  margin-bottom:6px;
}

.panel-head p{
  color:var(--muted);
  line-height:1.6;
}

.panel-head.small h2{
  margin-bottom:0;
}

.panel-head.small a{
  color:var(--green);
  text-decoration:none;
  font-weight:800;
}

/* =========================================
   CHART TABS + LEGEND
========================================= */

.range-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.range-tabs button{
  border:none;
  background:#EEF2F1;
  color:var(--text);
  padding:9px 14px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}

.range-tabs button.active{
  background:var(--green);
  color:#fff;
}

.chart-summary{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-bottom:20px;
  color:var(--muted);
  font-size:14px;
}

.chart-summary div{
  display:flex;
  align-items:center;
  gap:8px;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
}

.green-dot{
  background:var(--green);
}

.red-dot{
  background:var(--red);
}

.line-dot{
  width:34px;
  border-top:2px dashed rgba(31,42,46,.35);
}

/* =========================================
   LEARNING CANDLE CHART
========================================= */

.learning-chart{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:18px;
}

.axis{
  height:360px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  padding:8px 0 40px;
  color:rgba(31,42,46,.48);
  font-size:12px;
  font-weight:700;
}

.chart-board{
  height:360px;
  position:relative;
  border-left:1px solid rgba(31,42,46,.12);
  border-bottom:1px solid rgba(31,42,46,.12);
  border-radius:0 0 0 14px;
  background:
    linear-gradient(to top, rgba(31,42,46,.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(31,42,46,.035) 1px, transparent 1px);
  background-size:100% 72px, 64px 100%;
  display:flex;
  justify-content:space-around;
  align-items:flex-end;
  padding:30px 18px 48px;
  overflow:hidden;
}

.target-line{
  position:absolute;
  left:0;
  right:0;
  top:42%;
  border-top:2px dashed rgba(46,125,91,.45);
  z-index:1;
}

.study-candle{
  width:26px;
  height:240px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  z-index:2;
  cursor:pointer;
}

.study-candle i{
  position:absolute;
  bottom:38px;
  width:3px;
  height:150px;
  border-radius:20px;
  background:rgba(31,42,46,.55);
}

.study-candle b{
  position:absolute;
  bottom:74px;
  width:24px;
  height:64px;
  border-radius:6px;
}

.study-candle.green b{
  background:var(--green);
}

.study-candle.red b{
  background:var(--red);
}

.study-candle.big b{
  height:112px;
  bottom:48px;
}

.study-candle.big i{
  height:210px;
}

.study-candle span{
  position:absolute;
  bottom:-36px;
  font-size:12px;
  font-weight:800;
  color:rgba(31,42,46,.52);
}

.chart-note{
  margin-top:20px;
  background:#F5F8F6;
  border:1px solid rgba(46,125,91,.10);
  padding:18px;
  border-radius:18px;
}

.chart-note strong{
  color:var(--green);
}

.chart-note p{
  color:var(--muted);
  line-height:1.7;
  margin-top:6px;
}

/* =========================================
   BOTTOM GRID
========================================= */

.bottom-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
}

.course-progress-card{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:20px;
  align-items:center;
}

.course-thumb{
  height:140px;
  border-radius:22px;
  background:
  linear-gradient(
    135deg,
    var(--dark),
    #12304A
  );
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:800;
  line-height:1.5;
}

.course-progress-card h3{
  font-size:22px;
  margin-bottom:6px;
}

.course-progress-card p{
  color:var(--muted);
  margin-bottom:16px;
}

.progress-track{
  height:10px;
  background:#E8ECEB;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:14px;
}

.progress-track span{
  display:block;
  width:65%;
  height:100%;
  background:var(--green);
  border-radius:999px;
}

.progress-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.progress-meta span{
  color:var(--muted);
  font-size:14px;
}

.progress-meta strong{
  background:var(--green);
  color:#fff;
  padding:9px 16px;
  border-radius:12px;
  font-size:14px;
}

/* =========================================
   ACTIVITY
========================================= */

.activity-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:18px;
}

.activity-list div{
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:12px;
}

.activity-list span{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
}

.green-bg{
  background:#EAF6EF;
}

.blue-bg{
  background:#EAF0FF;
}

.purple-bg{
  background:#F1EAFE;
}

.activity-list p{
  font-weight:700;
}

.activity-list small{
  color:var(--muted);
}

/* =========================================
   RIGHT PANELS
========================================= */

.trend-circle{
  width:180px;
  height:180px;
  margin:24px auto;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #fff 58%, transparent 59%),
    conic-gradient(var(--green) 0 85%, #E7ECEA 85% 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.trend-circle strong{
  font-size:34px;
  color:var(--green);
}

.trend-circle span{
  color:var(--muted);
  font-weight:800;
}

.score-panel p{
  color:var(--muted);
  line-height:1.7;
  text-align:center;
}

.streak-number{
  font-size:38px;
  margin:20px 0;
}

.streak-number strong{
  color:var(--green);
}

.week-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}

.week-grid span{
  height:38px;
  border-radius:12px;
  background:#EEF2F1;
  display:grid;
  place-items:center;
  font-weight:800;
}

.week-grid .done{
  background:#EAF6EF;
  color:var(--green);
}

.week-grid .red-day{
  background:#FDECEC;
  color:var(--red);
}

.quick-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 0;
  border-bottom:1px solid var(--border);
}

.quick-row:last-child{
  border-bottom:none;
}

.quick-row span{
  color:var(--muted);
  font-weight:700;
}

.quick-row strong{
  color:var(--text);
}

.metric-card{
  opacity:0;
  transform:translateY(16px);
}

.quick-row{
  transition:.3s;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1200px){

  .dashboard-app{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:relative;
    min-height:auto;
  }

  .content-grid{
    grid-template-columns:1fr;
  }

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

}

@media(max-width:768px){

  .main-panel{
    padding:22px;
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  .top-actions{
    flex-wrap:wrap;
  }

  .metric-grid{
    grid-template-columns:1fr;
  }

  .panel-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .learning-chart{
    grid-template-columns:1fr;
  }

  .axis{
    display:none;
  }

  .chart-board{
    overflow-x:auto;
    justify-content:flex-start;
    gap:34px;
  }

  .bottom-grid{
    grid-template-columns:1fr;
  }

  .course-progress-card{
    grid-template-columns:1fr;
  }

}