/* =========================================================
   Student Dashboard — scoped layer
   - All styles must live under .dash-student (no leaks)
   - Uses global tokens:
     --brand-primary --brand-secondary --brand-accent
     --app-bg --app-surface --app-soft
     --app-text --app-muted
   - Supports: body.dark-mode + Bootstrap data-bs-theme
   ========================================================= */


/* =========================================================
   1) Core primitives (reused everywhere)
   ========================================================= */

.dash-student .dash-muted{
  color: var(--app-muted) !important;
}

.dash-student .dash-card{
  background: color-mix(in oklab, var(--app-surface) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--app-text) 10%, transparent);
  border-radius: 18px;
  box-shadow: 0 .25rem 1rem rgba(0,0,0,.08);
}

.dash-student .dash-pill{
  border: 1px solid color-mix(in oklab, var(--app-text) 12%, transparent);
  background: color-mix(in oklab, var(--app-soft) 70%, transparent);
  color: var(--app-text);
  border-radius: 999px;
  padding: .35rem .65rem;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* Neutral badge (NOT semantic states) */
.dash-student .badge-dash{
  color: var(--app-text);
  background: color-mix(in oklab, var(--app-soft) 85%, var(--app-surface));
  border: 1px solid color-mix(in oklab, var(--app-text) 18%, transparent);
  font-weight: 600;
}

/* Buttons (3 variants, not one color everywhere) */
.dash-student .btn-dash-primary{
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  border-radius: 14px;
}
.dash-student .btn-dash-primary:hover{ filter: brightness(1.05); }

.dash-student .btn-dash-secondary{
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-primary));
  border-radius: 14px;
}
.dash-student .btn-dash-secondary:hover{ filter: brightness(1.05); }

.dash-student .btn-dash-soft{
  border: 1px solid color-mix(in oklab, var(--app-text) 14%, transparent);
  background: color-mix(in oklab, var(--app-surface) 80%, transparent);
  color: var(--app-text);
  border-radius: 14px;
}
.dash-student .btn-dash-soft:hover{
  background: color-mix(in oklab, var(--app-surface) 92%, transparent);
}


/* =========================================================
   2) Components
   ========================================================= */

/* ------------------------------
   2.1 Hero
------------------------------ */

.dash-student .dash-hero{
  margin-bottom: .75rem;
}

.dash-student .dash-hero__card{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--brand-primary) 10%, var(--app-surface)),
    var(--app-surface)
  );
  border: 1px solid color-mix(in oklab, var(--app-text) 10%, transparent);
}

.dash-student .dash-callout{
  background: color-mix(in oklab, var(--brand-secondary) 10%, var(--app-soft));
  border: 1px solid color-mix(in oklab, var(--brand-secondary) 18%, transparent);
  border-radius: 16px;
}


/* ------------------------------
   2.2 Library
------------------------------ */

.dash-student .dash-library{ height: 100%; }

.dash-student .dash-list{
  display: grid;
  gap: .75rem;
}

.dash-student .dash-item{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem;
  border-radius: 16px;
  background: color-mix(in oklab, var(--app-surface) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--app-text) 10%, transparent);
}

.dash-student .dash-item__badges{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .35rem;
}

.dash-student .dash-item__meta{
  margin-top: .5rem;
  line-height: 1.3;
}

.dash-student .dash-item__actions{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: stretch;
  min-width: 140px;
}

@media (min-width: 768px){
  .dash-student .dash-item__actions{
    align-items: flex-end;
  }
}

/* Empty state (inside library) */
.dash-student .dash-empty{
  margin-top: .75rem;
  padding: 1.25rem;
  border-radius: 18px;
  background: color-mix(in oklab, var(--app-soft) 65%, transparent);
  border: 1px dashed color-mix(in oklab, var(--app-text) 18%, transparent);
  text-align: center;
}

.dash-student .dash-empty__icon{
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto .75rem;
  border-radius: 16px;
  background: color-mix(in oklab, var(--brand-accent) 14%, var(--app-surface));
  border: 1px solid color-mix(in oklab, var(--brand-accent) 18%, transparent);
}

.dash-student .dash-empty__icon i{
  font-size: 1.25rem;
}


/* ------------------------------
   2.3 Quick actions
------------------------------ */

.dash-student .dash-quick__grid{
  display: grid;
  gap: .65rem;
}

.dash-student .dash-action{
  display: grid;
  grid-template-columns: 44px 1fr 20px;
  align-items: center;
  gap: .75rem;
  padding: .85rem;
  border-radius: 16px;
  text-decoration: none;
  color: var(--app-text);
  border: 1px solid color-mix(in oklab, var(--app-text) 10%, transparent);
  background: color-mix(in oklab, var(--app-surface) 92%, transparent);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.dash-student .dash-action:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--app-surface) 98%, transparent);
  border-color: color-mix(in oklab, var(--app-text) 16%, transparent);
}

.dash-student .dash-action__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--app-text) 10%, transparent);
  background: color-mix(in oklab, var(--app-soft) 70%, transparent);
}

.dash-student .dash-action__icon i{ font-size: 1.1rem; }

.dash-student .dash-action__title{
  font-weight: 700;
  line-height: 1.1;
}

.dash-student .dash-action__chev{ opacity: .6; }
.dash-student .dash-action:hover .dash-action__chev{ opacity: .85; }

/* Icon variants */
.dash-student .dash-action--primary .dash-action__icon{
  background: color-mix(in oklab, var(--brand-primary) 16%, var(--app-surface));
  border-color: color-mix(in oklab, var(--brand-primary) 18%, transparent);
}

.dash-student .dash-action--secondary .dash-action__icon{
  background: color-mix(in oklab, var(--brand-accent) 16%, var(--app-surface));
  border-color: color-mix(in oklab, var(--brand-accent) 18%, transparent);
}

.dash-student .dash-action--teacher .dash-action__icon{
  background: color-mix(in oklab, var(--brand-secondary) 16%, var(--app-surface));
  border-color: color-mix(in oklab, var(--brand-secondary) 18%, transparent);
}

.dash-student .dash-action--upgrade .dash-action__icon{
  background: color-mix(in oklab, var(--brand-secondary) 10%, var(--brand-primary) 10%, var(--app-surface));
  border-color: color-mix(in oklab, var(--brand-secondary) 18%, transparent);
}


/* ------------------------------
   2.4 Role tabs
------------------------------ */

.dash-student .dash-roles .dash-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.dash-student .dash-roles .dash-tabs .nav-link{
  border: 1px solid color-mix(in oklab, var(--app-text) 12%, transparent);
  background: color-mix(in oklab, var(--app-surface) 75%, transparent);
  color: var(--app-text);
  border-radius: 14px;
  padding: .55rem .85rem;
  line-height: 1;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.dash-student .dash-roles .dash-tabs .nav-link:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--app-surface) 90%, transparent);
  border-color: color-mix(in oklab, var(--app-text) 18%, transparent);
}

.dash-student .dash-roles .dash-tabs .nav-link.active{
  border-color: color-mix(in oklab, var(--brand-primary) 35%, transparent);
  background: color-mix(in oklab, var(--brand-primary) 12%, var(--app-surface));
}

.dash-student .dash-roles .tab-content{
  padding-top: .25rem;
}


/* ------------------------------
   2.5 Purchases accordion
------------------------------ */

.dash-student .dash-accordion__item{
  background: transparent;
  border: 0;
}

.dash-student .dash-accordion__button{
  background: color-mix(in oklab, var(--app-soft) 55%, transparent);
  border: 1px solid color-mix(in oklab, var(--app-text) 12%, transparent);
  border-radius: 14px !important;
  color: var(--app-text);
  padding: .8rem .9rem;
  box-shadow: none;
}

.dash-student .dash-accordion__button:not(.collapsed){
  background: color-mix(in oklab, var(--app-soft) 75%, transparent);
  border-color: color-mix(in oklab, var(--app-text) 16%, transparent);
}

.dash-student .dash-accordion__button:focus{
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--brand-primary) 25%, transparent);
}

/* List items inside accordion */
.dash-student .dash-list__item{
  background: transparent;
  color: var(--app-text);
  border-color: color-mix(in oklab, var(--app-text) 12%, transparent);
  border-left: 0;
  border-right: 0;
  padding: .9rem 0;
}
.dash-student .dash-list__item:first-child{ border-top: 0; }
.dash-student .dash-list__item:last-child{ border-bottom: 0; }


/* ------------------------------
   2.6 Onboarding empty state
------------------------------ */

.dash-student .dash-onboarding__icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--brand-primary) 14%, var(--app-surface));
  border: 1px solid color-mix(in oklab, var(--brand-primary) 18%, transparent);
}

.dash-student .dash-onboarding__icon i{
  font-size: 1.2rem;
}

.dash-student .dash-onboarding__steps{
  padding: 1rem;
  border-radius: 18px;
  background: color-mix(in oklab, var(--app-soft) 65%, transparent);
  border: 1px dashed color-mix(in oklab, var(--app-text) 18%, transparent);
  display: grid;
  gap: .8rem;
}

.dash-student .dash-step{
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: .75rem;
  align-items: start;
}

.dash-student .dash-step__badge{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .85rem;
  color: var(--app-text);
  background: color-mix(in oklab, var(--app-surface) 85%, transparent);
  border: 1px solid color-mix(in oklab, var(--app-text) 12%, transparent);
}


/* =========================================================
   3) Theme adjustments
   ========================================================= */

/* 3.1 Light mode contrast boost */
:root[data-bs-theme="light"] .dash-student,
body:not(.dark-mode) .dash-student {

  .dash-card{
    background: color-mix(in oklab, var(--app-surface) 92%, var(--app-soft));
    border: 1px solid color-mix(in oklab, var(--app-text) 16%, transparent);
    box-shadow: 0 .6rem 1.4rem rgba(2, 6, 23, .08);
  }

  .dash-item,
  .dash-action{
    background: color-mix(in oklab, var(--app-surface) 88%, var(--app-soft));
    border-color: color-mix(in oklab, var(--app-text) 14%, transparent);
  }

  .dash-roles .dash-tabs .nav-link{
    background: color-mix(in oklab, var(--app-soft) 70%, var(--app-surface));
    border-color: color-mix(in oklab, var(--app-text) 16%, transparent);
  }

  .dash-roles .dash-tabs .nav-link.active{
    background: color-mix(in oklab, var(--brand-primary) 14%, var(--app-surface));
    border-color: color-mix(in oklab, var(--brand-primary) 32%, transparent);
  }

  .dash-accordion__button{
    background: color-mix(in oklab, var(--app-soft) 80%, var(--app-surface));
    border-color: color-mix(in oklab, var(--app-text) 18%, transparent);
    box-shadow: 0 .35rem 1rem rgba(2, 6, 23, .06);
  }

  .dash-accordion__button:not(.collapsed){
    background: color-mix(in oklab, var(--app-soft) 92%, var(--app-surface));
    border-color: color-mix(in oklab, var(--app-text) 22%, transparent);
  }

  .badge-dash{
    background: color-mix(in oklab, var(--app-soft) 92%, var(--app-surface));
    border-color: color-mix(in oklab, var(--app-text) 16%, transparent);
  }
}

/* 3.2 Dark mode neutral badge tweak (keep readable) */
body.dark-mode .dash-student .badge-dash,
:root[data-bs-theme="dark"] .dash-student .badge-dash{
  color: var(--app-text);
  background: color-mix(in oklab, var(--app-soft) 25%, transparent);
  border-color: color-mix(in oklab, var(--app-text) 22%, transparent);
}