/* ==========================================
   CLASSROOM INSTRUCTOR — Change Password
   Extends pro/admin/change-password.css (cp-*, ds-profile-dd,
   ga-tip, ga-toast styles). Overrides the dashboard scene
   to use the Instructor layout (4 tiles + Top Students +
   Recent Submissions panels) rather than admin's 3 tiles
   + chart.
   ========================================== */

/* === Override dashboard background to match instructor === */
.sc-dash{background:#f3f4f6;display:flex}

/* === Sidebar - tighter for instructor's longer nav list === */
.ds-side{width:108px;background:#fff;border-right:1px solid #eee;padding:12px 0;display:flex;flex-direction:column;gap:1px}
.ds-nav{padding:7px 12px;font-size:9.5px;color:#999;display:flex;align-items:center;gap:7px;margin-right:6px;border-radius:0 7px 7px 0}

/* === Top bar with two-line user info === */
.ds-uname{font-size:10px;color:#888;text-align:right;line-height:1.3}
.ds-uname b{color:#333;display:block;font-size:11px}
.ds-uname-role{font-size:9px;color:#aaa}
.ds-av{width:26px;height:26px;border-radius:50%;background:#42b883;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* === Four stat tiles (instead of admin's 3) === */
.ds-cards{display:flex;gap:7px;margin-bottom:9px}
.ds-card{flex:1;background:#fff;border:1px solid #eee;border-radius:10px;padding:9px 10px;position:relative;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.ds-card.pop{opacity:1;transform:translateY(0)}
.ds-card-lbl{font-size:9px;color:#777;font-weight:600;margin-bottom:2px}
.ds-card-val{font-size:13px;font-weight:700;color:#1a1a1a}
.ds-card-ico{position:absolute;top:8px;right:7px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ds-card-ico svg{width:11px;height:11px}

/* === Row: Top Students | Recent Submissions === */
.ds-row{display:flex;gap:8px}
.ds-panel{background:#fff;border:1px solid #eee;border-radius:10px;padding:9px 10px;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.ds-panel.pop{opacity:1;transform:translateY(0)}
.ds-panel-hd{font-size:10px;font-weight:700;color:#1a1a1a;margin-bottom:6px}

.ds-top-st{flex:0 0 38%}
.ds-st-row{display:flex;align-items:center;gap:6px;padding:3px 0;border-top:1px solid #f3f3f3}
.ds-st-row:first-of-type{border-top:none}
.ds-st-av{width:18px;height:18px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ds-st-name{flex:1;line-height:1.15}
.ds-st-name b{display:block;font-size:9.5px;color:#222;font-weight:600}
.ds-st-name span{display:block;font-size:8px;color:#999}
.ds-st-pct{font-size:10px;font-weight:700;color:#3b82f6}

.ds-recent{flex:1}
.ds-rs-row{display:flex;align-items:center;gap:6px;padding:3px 0;border-top:1px solid #f3f3f3}
.ds-rs-row:first-of-type{border-top:none}
.ds-rs-av{width:18px;height:18px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ds-rs-name{flex:1;line-height:1.15;min-width:0}
.ds-rs-name b{display:block;font-size:9.5px;color:#222;font-weight:600}
.ds-rs-name span{display:block;font-size:8px;color:#999}
.ds-rs-pct{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;min-width:32px;text-align:center}
.ds-rs-pct.lo{background:#eef2ff;color:#5b6cff}
.ds-rs-pct.hi{background:#ffe5e5;color:#e54545}
.ds-rs-pct.md{background:#fff4d6;color:#c98b00}
.ds-rs-status{font-size:8px;color:#22a06b;display:flex;align-items:center;gap:3px}
.ds-rs-status::before{content:'';width:5px;height:5px;border-radius:50%;background:#22a06b;display:inline-block}

/* === Profile dropdown header avatar - green for instructor === */
.ds-dd-header .dd-av{background:#42b883}

/* === Change Password page sidebar - instructor nav list === */
.cp-side{width:108px}
.cp-nav{padding:7px 12px;font-size:9.5px}

@media(max-width:640px){
  .ds-side{width:72px}
  .ds-row{flex-direction:column}
  .ds-top-st{flex:1}
  .ds-cards{flex-wrap:wrap}
  .ds-card{flex:1 1 45%}
  .cp-side{width:72px}
}