/* ==========================================
   CLASSROOM INSTRUCTOR — Dashboard
   Extends pro/admin/admin-dashboard.css (.df-side, .df-body,
   .df-stats, .df-panel, .df-mini-bars, .df-donut, .df-pie,
   .df-blur-overlay, .df-tooltip, .df-line-chart, .df-legend, etc.)

   Adds:
     - 4-column stat tile layout (instructor has 4 tiles)
     - Top Students rows (.df-ts-*)
     - Recent Submissions rows (.df-rs-*)
     - Green instructor avatar tone
   ========================================== */

/* === 4 stat tiles instead of admin's 3 === */
.df-stat-val { font-size: 14px; }

/* === Green instructor avatar === */
.df-av { background: #42b883; }

/* === User name 2-line layout (Testing Admin / Instructor) === */
.df-uname { font-size: 10px; color: #888; text-align: right; line-height: 1.3; }
.df-uname b { color: #333; display: block; font-size: 11px; }
.df-uname-role { font-size: 9px; color: #aaa; }

/* === Top Students rows (same as classroom admin pattern) === */
.df-ts-rows { margin-top: 4px; }
.df-ts-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid #f5f5f5; }
.df-ts-row:last-child { border-bottom: none; }
.df-ts-av { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.df-ts-info { flex: 1; min-width: 0; }
.df-ts-name { font-size: 9px; font-weight: 600; color: #1a1a1a; }
.df-ts-dept { font-size: 7px; color: #aaa; }
.df-ts-pct { font-size: 9px; color: #4285f4; font-weight: 600; flex-shrink: 0; }

/* === Recent Submissions rows === */
.df-rs-rows { margin-top: 4px; }
.df-rs-row { display: flex; align-items: center; gap: 5px; padding: 3px 0; border-bottom: 1px solid #f5f5f5; }
.df-rs-row:last-child { border-bottom: none; }
.df-rs-av { width: 16px; height: 16px; border-radius: 50%; color: #fff; font-size: 7px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.df-rs-info { flex: 1; min-width: 0; line-height: 1.15; }
.df-rs-name { font-size: 8px; font-weight: 600; color: #1a1a1a; }
.df-rs-cls { font-size: 7px; color: #aaa; }
.df-rs-pct { font-size: 8px; font-weight: 600; padding: 2px 6px; border-radius: 4px; min-width: 28px; text-align: center; flex-shrink: 0; }
.df-rs-pct.lo { background: #eef2ff; color: #5b6cff; }
.df-rs-pct.md { background: #fff4d6; color: #c98b00; }
.df-rs-pct.hi { background: #ffe5e5; color: #e54545; }
.df-rs-status { font-size: 7px; color: #22a06b; display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.df-rs-status::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #22a06b; display: inline-block; }
.df-rs-btn { font-size: 7px; background: #4285f4; color: #fff; padding: 2px 7px; border-radius: 4px; cursor: default; flex-shrink: 0; }

/* === Top Students area-line chart (mimics screenshot's filled area chart) === */
.df-ts-chart { height: 40px; margin-top: 6px; position: relative; }
.df-ts-chart svg { width: 100%; height: 100%; }
.df-ts-chart .area-fill { fill: url(#tsGradient); opacity: 0; transition: opacity .8s ease; }
.df-ts-chart.drawn .area-fill { opacity: 1; }
.df-ts-chart .area-line { fill: none; stroke: #3b82f6; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 999; stroke-dashoffset: 999; transition: stroke-dashoffset 1.4s ease; }
.df-ts-chart.drawn .area-line { stroke-dashoffset: 0; }
.df-ts-chart .area-pt { fill: #3b82f6; opacity: 0; transition: opacity .3s ease .8s; }
.df-ts-chart.drawn .area-pt { opacity: 1; }

@media(max-width:640px){
  .df-side{width:80px}
  .df-stats{flex-wrap:wrap}
  .df-stat{flex:1 1 45%}
}