@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
:root[b-nctpsuhqkj] {
  --sidebar-width: 240px;
  --topbar-height: 3.5rem;
  --bg-main: #f5f0eb;
  --bg-topbar: #faf7f4;
  --border: #ddd8d2;
  --text-muted: #8c847c;
}

.page[b-nctpsuhqkj] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-main);
}

main[b-nctpsuhqkj] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar[b-nctpsuhqkj] {
  background-color: #6b6560;
}

.top-row[b-nctpsuhqkj] {
  background-color: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1.5rem;
  gap: 1rem;
}

.top-row[b-nctpsuhqkj]  a,
.top-row[b-nctpsuhqkj]  .btn-link {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}

.top-row[b-nctpsuhqkj]  a:hover,
.top-row[b-nctpsuhqkj]  .btn-link:hover {
  color: #57514c;
}

.content[b-nctpsuhqkj] {
  padding: 1.5rem 2rem;
}

@media (max-width: 640.98px) {
  .top-row[b-nctpsuhqkj] {
    justify-content: space-between;
  }
}

@media (min-width: 641px) {
  .page[b-nctpsuhqkj] {
    flex-direction: row;
  }

  .sidebar[b-nctpsuhqkj] {
    width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
  }

  .top-row[b-nctpsuhqkj] {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  article[b-nctpsuhqkj] {
    padding: 1.5rem 2rem !important;
  }
}

#blazor-error-ui[b-nctpsuhqkj] {
  color-scheme: light only;
  background: #fff8f0;
  border-top: 1px solid #e8c99a;
  bottom: 0;
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-size: 0.875rem;
  color: #7a5c38;
}

#blazor-error-ui .dismiss[b-nctpsuhqkj] {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

#dotnet-compile-error[b-nctpsuhqkj] {
  display: none !important;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
:root[b-sbrtvgliy7] {
  --ka-bg: #4a3f38;
  --ka-top: #3d2b1f;
  --ka-text: #f4f0e8;
  --ka-muted: rgba(244, 240, 232, 0.45);
  --ka-border: rgba(244, 240, 232, 0.12);
  --ka-link-bg: rgba(244, 240, 232, 0.08);
  --ka-hover-bg: #c8a882;
  --ka-hover-text: #1a0f0a;
  --ka-active-bg: #f4f0e8;
  --ka-active-text: #3d2b1f;
  --ka-logout-bg: rgba(180, 60, 40, 0.2);
  --ka-logout-border: rgba(220, 100, 80, 0.3);
  --ka-logout-text: #f4c5bc;
  --ka-logout-hover: #c0392b;
}

/* ── TOGGLER ── */
.navbar-toggler[b-sbrtvgliy7] {
  appearance: none;
  cursor: pointer;
  width: 3.5rem;
  height: 2.5rem;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  border: 1px solid var(--ka-border);
  border-radius: 6px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28244, 240, 232, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
    no-repeat center/1.75rem var(--ka-link-bg);
  transition: background-color 0.2s;
}

.navbar-toggler:checked[b-sbrtvgliy7] {
  background-color: rgba(244, 240, 232, 0.15);
}

/* ── TOP ROW ── */
.top-row[b-sbrtvgliy7] {
  min-height: 3.5rem;
  background-color: var(--ka-top);
  border-bottom: 1px solid var(--ka-border);
}

/* ── BRAND ── */
.ka-brand[b-sbrtvgliy7] {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ka-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s;
}

.ka-brand:hover[b-sbrtvgliy7] {
  color: #fff;
  text-decoration: none;
}

/* ── SIDEBAR ── */
.ka-sidebar[b-sbrtvgliy7] {
  background-color: var(--ka-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 0.5rem;
}

/* ── SECTION LABELS ── */
.ka-section-label[b-sbrtvgliy7] {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ka-muted);
  padding: 1.2rem 1rem 0.4rem;
  border-bottom: 1px solid var(--ka-border);
  margin: 0 0.6rem 0.4rem;
}

/* ── LINKS ── */
.ka-link[b-sbrtvgliy7] {
  display: flex;
  align-items: center;
  color: var(--ka-text);
  background-color: var(--ka-link-bg);
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  height: 2.6rem;
  width: calc(100% - 1.2rem);
  padding: 0 1rem;
  margin: 0.2rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    transform 0.12s;
  cursor: pointer;
  text-align: left;
}

.ka-link:hover[b-sbrtvgliy7] {
  background-color: var(--ka-hover-bg);
  color: var(--ka-hover-text);
  border-color: transparent;
  border-radius: 10px;
  transform: translateX(3px);
  text-decoration: none;
  font-weight: 600;
}

.ka-link.active[b-sbrtvgliy7] {
  background-color: var(--ka-active-bg);
  color: var(--ka-active-text);
  border-color: transparent;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.ka-link.active:hover[b-sbrtvgliy7] {
  background-color: #fff;
  color: var(--ka-active-text);
  transform: translateX(3px);
}

/* ── BOTTOM SECTION ── */
.ka-bottom[b-sbrtvgliy7] {
  margin-top: auto;
  padding: 0.6rem 0 1rem;
  border-top: 1px solid var(--ka-border);
}

/* ── LOGOUT ── */
.ka-logout[b-sbrtvgliy7] {
  display: flex;
  align-items: center;
  background-color: var(--ka-logout-bg);
  border: 1px solid var(--ka-logout-border);
  border-radius: 8px;
  color: var(--ka-logout-text);
  height: 2.6rem;
  width: calc(100% - 1.2rem);
  padding: 0 1rem;
  margin: 0.2rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    border-radius 0.15s;
  cursor: pointer;
  text-align: left;
}

.ka-logout:hover[b-sbrtvgliy7] {
  background-color: var(--ka-logout-hover);
  color: #fff;
  border-color: transparent;
  border-radius: 10px;
  text-decoration: none;
}

/* ── SCROLLABLE WRAPPER ── */
.nav-scrollable[b-sbrtvgliy7] {
  display: none;
  background-color: var(--ka-bg);
}

.navbar-toggler:checked ~ .nav-scrollable[b-sbrtvgliy7] {
  display: block;
}

/* ── RESPONSIVE ── */
@media (min-width: 641px) {
  .navbar-toggler[b-sbrtvgliy7] {
    display: none;
  }

  .nav-scrollable[b-sbrtvgliy7] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
  }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-vku1z6lhps],
.components-reconnect-repeated-attempt-visible[b-vku1z6lhps],
.components-reconnect-failed-visible[b-vku1z6lhps],
.components-pause-visible[b-vku1z6lhps],
.components-resume-failed-visible[b-vku1z6lhps],
.components-rejoining-animation[b-vku1z6lhps] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vku1z6lhps],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vku1z6lhps],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vku1z6lhps],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vku1z6lhps],
#components-reconnect-modal.components-reconnect-retrying[b-vku1z6lhps],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vku1z6lhps],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vku1z6lhps],
#components-reconnect-modal.components-reconnect-failed[b-vku1z6lhps],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vku1z6lhps] {
    display: block;
}


#components-reconnect-modal[b-vku1z6lhps] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-vku1z6lhps 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-vku1z6lhps 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-vku1z6lhps 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-vku1z6lhps]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-vku1z6lhps 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-vku1z6lhps {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-vku1z6lhps {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-vku1z6lhps {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-vku1z6lhps] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-vku1z6lhps] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-vku1z6lhps] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-vku1z6lhps] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-vku1z6lhps] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-vku1z6lhps] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-vku1z6lhps] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-vku1z6lhps 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-vku1z6lhps] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-vku1z6lhps {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/DashboardPages/Index.razor.rz.scp.css */
.dash-welcome[b-zdvt1orvn4] {
  margin-bottom: 2rem;
}

.dash-welcome h2[b-zdvt1orvn4] {
  font-size: 1.6rem;
  font-weight: 600;
  color: #1a1714;
  margin: 0 0 0.25rem;
}

.dash-welcome p[b-zdvt1orvn4] {
  color: #6b6560;
  font-size: 0.95rem;
  margin: 0;
}

.dash-empty[b-zdvt1orvn4] {
  padding: 2rem;
  border: 1px dashed #cdc5bc;
  border-radius: 10px;
  color: #6b6560;
  font-size: 0.95rem;
  text-align: center;
  background: #faf7f4;
}

.dash-section-title[b-zdvt1orvn4] {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9c9089;
  margin: 0 0 1rem;
}

/* ── Instructor profile card ── */
.instructor-profile[b-zdvt1orvn4] {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid #e0d9d2;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  max-width: 420px;
}

.instructor-avatar[b-zdvt1orvn4] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #e0d9d2;
}

.instructor-info h3[b-zdvt1orvn4] {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
  color: #1a1714;
}

.instructor-info p[b-zdvt1orvn4] {
  font-size: 0.85rem;
  color: #6b6560;
  margin: 0;
}

.instructor-stats[b-zdvt1orvn4] {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.6rem;
}

.instructor-stats span[b-zdvt1orvn4] {
  font-size: 0.8rem;
  color: #9c9089;
}

.instructor-stats strong[b-zdvt1orvn4] {
  color: #1a1714;
}

/* ── Class cards grid ── */
.class-grid[b-zdvt1orvn4] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.class-card[b-zdvt1orvn4] {
  background: #fff;
  border: 1px solid #e0d9d2;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}

.class-card:hover[b-zdvt1orvn4] {
  border-color: #9c9089;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.class-card-name[b-zdvt1orvn4] {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1714;
}

.class-card-meta[b-zdvt1orvn4] {
  font-size: 0.8rem;
  color: #9c9089;
}

.class-card-action[b-zdvt1orvn4] {
  margin-top: auto;
  padding-top: 0.75rem;
}

.class-card-action a[b-zdvt1orvn4] {
  display: block;
  text-align: center;
  padding: 0.5rem;
  border-radius: 8px;
  background: #6b6560;
  color: #f0ebe3;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.class-card-action a:hover[b-zdvt1orvn4] {
  background: #57514c;
  color: #f0ebe3;
  text-decoration: none;
}
/* /Components/Shared/CourseDetailsHeaderComponent.razor.rz.scp.css */
.course-header[b-nc126i5a30] {
  background: #fff;
  border: 1px solid #e0d9d2;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.course-header-info h2[b-nc126i5a30] {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a1714;
  margin: 0 0 0.4rem;
}

.course-header-meta[b-nc126i5a30] {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.course-header-meta span[b-nc126i5a30] {
  font-size: 0.85rem;
  color: #6b6560;
}

.course-header-actions[b-nc126i5a30] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.course-header-actions a[b-nc126i5a30],
.course-header-actions button[b-nc126i5a30] {
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.btn-taupe[b-nc126i5a30] {
  background: #6b6560;
  color: #f0ebe3;
  border-color: #57514c;
}

.btn-taupe:hover[b-nc126i5a30] {
  background: #57514c;
  color: #f0ebe3;
}

.btn-outline[b-nc126i5a30] {
  background: transparent;
  color: #6b6560;
  border-color: #cdc5bc;
}

.btn-outline:hover[b-nc126i5a30] {
  background: #f5f0eb;
  border-color: #9c9089;
}
/* /Components/Shared/ListModuleAndModuleItems.razor.rz.scp.css */
.ar-module-block[b-f15ttenrb5] {
  background: #fff;
  border: 1px solid #e0d9d2;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.ar-module-header[b-f15ttenrb5] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #faf7f4;
  border-bottom: 1px solid #e0d9d2;
}

.ar-module-title[b-f15ttenrb5] {
  font-weight: 600;
  font-size: 14px;
  color: #1a1714;
}

.ar-module-meta[b-f15ttenrb5] {
  font-size: 11px;
  color: #9c9089;
  margin-top: 2px;
}

.ar-no-items[b-f15ttenrb5] {
  padding: 12px 16px;
  font-size: 12px;
  color: #9c9089;
}

.ar-item-row[b-f15ttenrb5] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid #f0ebe3;
  transition: background 0.15s;
}

.ar-item-row:last-child[b-f15ttenrb5] {
  border-bottom: none;
}

.ar-item-row:hover[b-f15ttenrb5] {
  background: #faf7f4;
}

.ar-item-icon[b-f15ttenrb5] {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ar-ic-lesson[b-f15ttenrb5] {
  background: #f0f0f5;
}
.ar-ic-reading[b-f15ttenrb5] {
  background: #f0ebe3;
}
.ar-ic-quiz[b-f15ttenrb5] {
  background: #faf3e0;
}
.ar-ic-lab[b-f15ttenrb5] {
  background: #f5f0f5;
}
.ar-ic-assignment[b-f15ttenrb5] {
  background: #eef5ee;
}

.ar-item-info[b-f15ttenrb5] {
  flex-shrink: 0;
  min-width: 160px;
}

.ar-item-name[b-f15ttenrb5] {
  font-size: 13px;
  font-weight: 600;
  color: #1a1714;
}

.ar-item-type[b-f15ttenrb5] {
  font-size: 11px;
  color: #9c9089;
  margin-top: 2px;
}

.ar-item-resources[b-f15ttenrb5] {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ar-no-res[b-f15ttenrb5] {
  font-size: 11px;
  color: #9c9089;
}

.ar-chip[b-f15ttenrb5] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0ebe3;
  border: 1px solid #cdc5bc;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #57514c;
  max-width: 180px;
}

.ar-chip-remove[b-f15ttenrb5] {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.ar-chip-remove:hover[b-f15ttenrb5] {
  opacity: 1;
}

.ar-item-actions[b-f15ttenrb5] {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
}

.ar-btn[b-f15ttenrb5] {
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ar-btn:disabled[b-f15ttenrb5] {
  opacity: 0.4;
  cursor: not-allowed;
}

.ar-btn-primary[b-f15ttenrb5] {
  background: #6b6560;
  color: #f0ebe3;
  border-color: #57514c;
}

.ar-btn-primary:hover:not(:disabled)[b-f15ttenrb5] {
  background: #57514c;
}

.ar-btn-ghost[b-f15ttenrb5] {
  background: transparent;
  color: #6b6560;
  border-color: #cdc5bc;
}

.ar-btn-ghost:hover:not(:disabled)[b-f15ttenrb5] {
  background: #f5f0eb;
  border-color: #9c9089;
}

.ar-btn-danger[b-f15ttenrb5] {
  background: transparent;
  color: #b85c5c;
  border-color: #e0c4c4;
}

.ar-btn-danger:hover:not(:disabled)[b-f15ttenrb5] {
  background: #fdf0f0;
}

.ar-btn-sm[b-f15ttenrb5] {
  font-size: 11px;
  padding: 4px 10px;
}

.ar-badge[b-f15ttenrb5] {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ar-badge-taupe[b-f15ttenrb5] {
  background: #f0ebe3;
  color: #57514c;
  border: 1px solid #cdc5bc;
}
.ar-badge-green[b-f15ttenrb5] {
  background: #eef5ee;
  color: #3d7a3d;
  border: 1px solid #b8d9b8;
}

/* ── Modal ── */
.ar-modal-bg[b-f15ttenrb5] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.ar-modal[b-f15ttenrb5] {
  background: #fff;
  border-radius: 14px;
  width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0d9d2;
  overflow: hidden;
}

.ar-modal-hdr[b-f15ttenrb5] {
  background: #faf7f4;
  border-bottom: 1px solid #e0d9d2;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.ar-modal-hdr h5[b-f15ttenrb5] {
  font-size: 14px;
  font-weight: 600;
  color: #1a1714;
  margin: 0;
}

.ar-modal-close[b-f15ttenrb5] {
  background: none;
  border: none;
  font-size: 20px;
  color: #9c9089;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.ar-modal-close:hover[b-f15ttenrb5] {
  color: #1a1714;
}

.ar-modal-body[b-f15ttenrb5] {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

.ar-modal-footer[b-f15ttenrb5] {
  padding: 12px 18px;
  border-top: 1px solid #e0d9d2;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.ar-context-banner[b-f15ttenrb5] {
  background: #f5f0eb;
  border: 1px solid #cdc5bc;
  border-radius: 8px;
  padding: 10px 13px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ar-context-title[b-f15ttenrb5] {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #1a1714;
}

.ar-context-sub[b-f15ttenrb5] {
  font-size: 11px;
  color: #9c9089;
}

.ar-modal-section-label[b-f15ttenrb5] {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9c9089;
  margin-bottom: 10px;
}

.ar-pdf-card[b-f15ttenrb5] {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e0d9d2;
  border-radius: 10px;
  padding: 10px 13px;
  margin-bottom: 8px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.ar-pdf-card:hover[b-f15ttenrb5] {
  border-color: #9c9089;
  background: #faf7f4;
}

.ar-pdf-card.ar-selected[b-f15ttenrb5] {
  border-color: #6b6560;
  background: #f5f0eb;
}

.ar-pdf-icon[b-f15ttenrb5] {
  width: 36px;
  height: 36px;
  background: #faf7f4;
  border-radius: 8px;
  border: 1px solid #e0d9d2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ar-pdf-info[b-f15ttenrb5] {
  flex: 1;
  min-width: 0;
}

.ar-pdf-name[b-f15ttenrb5] {
  font-size: 13px;
  font-weight: 500;
  color: #1a1714;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ar-pdf-meta[b-f15ttenrb5] {
  display: flex;
  gap: 5px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.ar-pdf-check[b-f15ttenrb5] {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #cdc5bc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.ar-check-active[b-f15ttenrb5] {
  background: #6b6560;
  border-color: #6b6560;
}

.ar-modal-empty[b-f15ttenrb5] {
  text-align: center;
  padding: 28px 16px;
  color: #9c9089;
  font-size: 13px;
}

.ar-empty[b-f15ttenrb5] {
  padding: 2rem;
  text-align: center;
  font-size: 13px;
  color: #9c9089;
  border: 1px dashed #cdc5bc;
  border-radius: 10px;
  background: #faf7f4;
}

.ar-error[b-f15ttenrb5] {
  background: #fdf0f0;
  border-left: 4px solid #b85c5c;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #7a3333;
  margin-bottom: 12px;
}
/* /Components/Shared/UploadContentComponent.razor.rz.scp.css */
.upload-btn[b-9nru20hfey] {
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid #8a7060;
  background: #a0856e;
  color: #faf7f4;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.upload-btn:hover[b-9nru20hfey] {
  background: #8a7060;
  border-color: #6e5a4c;
}

.modal-backdrop[b-9nru20hfey] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-box[b-9nru20hfey] {
  background: #fff;
  border: 1px solid #e0d9d2;
  border-radius: 14px;
  width: 480px;
  max-width: 95vw;
  overflow: hidden;
}

.modal-header[b-9nru20hfey] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #faf7f4;
  border-bottom: 1px solid #e0d9d2;
}

.modal-title[b-9nru20hfey] {
  font-size: 14px;
  font-weight: 600;
  color: #1a1714;
  margin: 0;
}

.modal-close[b-9nru20hfey] {
  background: none;
  border: none;
  font-size: 20px;
  color: #9c9089;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.modal-close:hover[b-9nru20hfey] {
  color: #1a1714;
}

.modal-body[b-9nru20hfey] {
  padding: 18px;
}
/* /Components/Shared/ViewAssignments.razor.rz.scp.css */
:root[b-qzrd1zzvs2] {
  /* ── Core Palette ──────────────────────────────── */
  --color-taupe-gray: #8b8589;
  --color-eggshell: #f0ead6;
  --color-taupe-dark: #4a4649;
  --color-taupe-muted: #d8d3c5;

  /* ── Backgrounds ───────────────────────────────── */
  --color-background-primary: #ffffff; /* Cards and Inputs */
  --color-background-secondary: var(
    --color-eggshell
  ); /* Detail Panels / Shell */
  --color-background-tertiary: #e8e4d8; /* Icons / Toggles */

  /* ── Typography ────────────────────────────────── */
  --color-text-primary: var(--color-taupe-dark);
  --color-text-secondary: #6b676a; /* Muted Taupe */
  --color-text-tertiary: #8b8589; /* Labels */

  /* ── Borders ───────────────────────────────────── */
  --color-border-primary: var(--color-taupe-gray);
  --color-border-secondary: var(--color-taupe-muted);
  --color-border-tertiary: #e0ddd0;

  /* ── Status Colors (Semantic) ──────────────────── */
  --color-background-success: #e7e9e1;
  --color-text-success: #5e6946;

  --color-background-danger: #f8e8e8;
  --color-text-danger: #a34f4f;

  --color-background-warning: #f8f1e4;
  --color-text-warning: #9b7e4b;

  --color-background-info: #e4ebf0;
  --color-text-info: #557a95;

  /* ── Shared Constants ──────────────────────────── */
  --border-radius-md: 6px;
  --border-radius-lg: 10px;
}

/* Applying the base background to the shell */
.va-shell[b-qzrd1zzvs2] {
  background-color: var(--color-background-secondary);
  min-height: 100vh;
  padding: 1.5rem;
}

/* ── Shell ─────────────────────────────────────── */
.va-shell[b-qzrd1zzvs2] {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: "DM Sans", system-ui, sans-serif;
}

/* ── Header ────────────────────────────────────── */
.va-header[b-qzrd1zzvs2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1rem;
}
.va-header-left[b-qzrd1zzvs2] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.va-header-right[b-qzrd1zzvs2] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.va-heading[b-qzrd1zzvs2] {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

/* ── Controls ──────────────────────────────────── */
.va-select[b-qzrd1zzvs2] {
  padding: 6px 10px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  font-size: 13px;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  cursor: pointer;
}
.va-select--full[b-qzrd1zzvs2] {
  width: 100%;
}
.va-chip-clear[b-qzrd1zzvs2] {
  padding: 4px 10px;
  border-radius: 20px;
  border: 0.5px solid var(--color-border-secondary);
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  font-size: 12px;
  cursor: pointer;
}

/* ── Buttons ───────────────────────────────────── */
.va-btn[b-qzrd1zzvs2] {
  padding: 7px 14px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  transition: background 0.1s;
}
.va-btn:hover[b-qzrd1zzvs2] {
  background: var(--color-background-secondary);
}
.va-btn:disabled[b-qzrd1zzvs2] {
  opacity: 0.5;
  cursor: not-allowed;
}
.va-btn-primary[b-qzrd1zzvs2] {
  background: var(--color-taupe-dark);
  color: var(--color-eggshell);
  border: 1px solid var(--color-taupe-dark);
  font-weight: 600;
}

.va-btn-primary:hover[b-qzrd1zzvs2] {
  background: var(--color-taupe-gray);
  border-color: var(--color-taupe-gray);
}

.va-btn-ghost[b-qzrd1zzvs2] {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-primary);
  color: var(--color-text-secondary);
  padding: 4px 10px;
}

.va-btn-ghost:hover[b-qzrd1zzvs2] {
  background: var(--color-background-tertiary);
  border-color: var(--color-border-primary);
}
.va-btn-danger[b-qzrd1zzvs2] {
  color: var(--color-text-danger);
  border: 0.5px solid var(--color-text-danger);
  background: var(--color-background-danger);
}

.va-btn-danger:hover[b-qzrd1zzvs2] {
  background: #f0d0d0;
}
.va-btn-row[b-qzrd1zzvs2] {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── State ─────────────────────────────────────── */
.va-state[b-qzrd1zzvs2] {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.va-warn[b-qzrd1zzvs2] {
  color: var(--color-text-warning);
}

/* ── Pills ─────────────────────────────────────── */
.va-pill[b-qzrd1zzvs2] {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.va-pill--published[b-qzrd1zzvs2],
.va-pill--graded[b-qzrd1zzvs2] {
  background: var(--color-background-success);
  color: var(--color-text-success);
}
.va-pill--draft[b-qzrd1zzvs2],
.va-pill--pending[b-qzrd1zzvs2] {
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
}
.va-pill--closed[b-qzrd1zzvs2],
.va-pill--missing[b-qzrd1zzvs2] {
  background: var(--color-background-danger);
  color: var(--color-text-danger);
}
.va-pill--submitted[b-qzrd1zzvs2] {
  background: var(--color-background-info);
  color: var(--color-text-info);
}
.va-pill--late[b-qzrd1zzvs2] {
  background: var(--color-background-warning);
  color: var(--color-text-warning);
}

/* ── Assignment List ───────────────────────────── */
.va-list[b-qzrd1zzvs2] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.va-card[b-qzrd1zzvs2] {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.va-card:hover[b-qzrd1zzvs2] {
  border-color: var(--color-border-secondary);
}
.va-card--selected[b-qzrd1zzvs2] {
  border-color: var(--color-border-primary);
  border-width: 1px;
}
.va-card-top[b-qzrd1zzvs2] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.va-card-title[b-qzrd1zzvs2] {
  font-size: 14px;
  font-weight: 500;
}
.va-card-meta[b-qzrd1zzvs2] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.va-card-actions[b-qzrd1zzvs2] {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--color-border-tertiary);
}
.va-grade-chip[b-qzrd1zzvs2] {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-success);
  margin-top: 6px;
}

/* ── Detail Panel ──────────────────────────────── */
.va-detail[b-qzrd1zzvs2] {
  margin-top: 16px;
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.va-detail-header[b-qzrd1zzvs2] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.va-detail-title[b-qzrd1zzvs2] {
  font-size: 16px;
  font-weight: 500;
}
.va-detail-sub[b-qzrd1zzvs2] {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 3px;
}
.va-detail-desc[b-qzrd1zzvs2] {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.65;
}
.va-close[b-qzrd1zzvs2] {
  background: var(--color-background-tertiary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  font-size: 16px;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 2px 8px;
  line-height: 1.4;
}

.va-close:hover[b-qzrd1zzvs2] {
  background: var(--color-background-danger);
  color: var(--color-text-danger);
}
.va-info-banner[b-qzrd1zzvs2] {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--border-radius-md);
  background: var(--color-background-info);
  color: var(--color-text-info);
}
.va-section-label[b-qzrd1zzvs2] {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: 6px;
}

/* ── Attachments ───────────────────────────────── */
.va-attachments[b-qzrd1zzvs2] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.va-attachment[b-qzrd1zzvs2] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  background: var(--color-background-primary);
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}
.va-attachment:hover[b-qzrd1zzvs2] {
  border-color: var(--color-border-secondary);
}
.va-file-icon[b-qzrd1zzvs2] {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-background-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.va-file-name[b-qzrd1zzvs2] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.va-file-size[b-qzrd1zzvs2] {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

/* ── Submission List (instructor) ──────────────── */
.va-sub-list[b-qzrd1zzvs2] {
  display: flex;
  flex-direction: column;
}
.va-sub-row[b-qzrd1zzvs2] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.va-sub-row:last-child[b-qzrd1zzvs2] {
  border-bottom: none;
}
.va-sub-info[b-qzrd1zzvs2] {
  flex: 1;
}
.va-sub-name[b-qzrd1zzvs2] {
  font-size: 13px;
  font-weight: 500;
  display: block;
}
.va-sub-time[b-qzrd1zzvs2] {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

/* ── Submit Area (student) ─────────────────────── */
.va-submit-area[b-qzrd1zzvs2] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 0.5px solid var(--color-border-tertiary);
  padding-top: 14px;
}
.va-textarea[b-qzrd1zzvs2] {
  width: 100%;
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 10px 12px;
  font-size: 13px;
  resize: vertical;
  min-height: 80px;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: inherit;
}
.va-textarea:focus[b-qzrd1zzvs2] {
  outline: none;
  border-color: var(--color-border-secondary);
}
.va-upload-zone[b-qzrd1zzvs2] {
  border: 0.5px dashed var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.va-upload-zone:hover[b-qzrd1zzvs2] {
  background: var(--color-background-secondary);
}
.va-feedback-block[b-qzrd1zzvs2] {
  border: 0.5px solid var(--color-border-success);
  border-radius: var(--border-radius-md);
  background: var(--color-background-success);
  padding: 12px 14px;
}
.va-feedback-header[b-qzrd1zzvs2] {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-success);
  margin-bottom: 4px;
}
.va-feedback-body[b-qzrd1zzvs2] {
  font-size: 13px;
  color: var(--color-text-success);
  opacity: 0.85;
}

/* ── Modal / Overlay ───────────────────────────── */
.va-overlay[b-qzrd1zzvs2] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.va-modal[b-qzrd1zzvs2] {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  width: 480px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.va-modal--sm[b-qzrd1zzvs2] {
  width: 380px;
}
.va-modal-header[b-qzrd1zzvs2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  font-size: 15px;
  font-weight: 500;
}
.va-form-body[b-qzrd1zzvs2] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.va-modal-footer[b-qzrd1zzvs2] {
  padding: 14px 18px;
  border-top: 0.5px solid var(--color-border-tertiary);
}
.va-form-group[b-qzrd1zzvs2] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.va-form-row[b-qzrd1zzvs2] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.va-label[b-qzrd1zzvs2] {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.va-input[b-qzrd1zzvs2] {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 7px 10px;
  font-size: 13px;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: inherit;
  width: 100%;
}
.va-input:focus[b-qzrd1zzvs2] {
  outline: none;
  border-color: var(--color-border-secondary);
}
.va-switch-row[b-qzrd1zzvs2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.va-switch-label[b-qzrd1zzvs2] {
  font-size: 13px;
  font-weight: 500;
}
.va-switch-hint[b-qzrd1zzvs2] {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.va-toggle[b-qzrd1zzvs2] {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-background-tertiary);
  border: 0.5px solid var(--color-border-secondary);
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
  flex-shrink: 0;
}
.va-toggle--on[b-qzrd1zzvs2] {
  background: var(--color-text-primary);
}
.va-toggle-knob[b-qzrd1zzvs2] {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-background-primary);
  transition: left 0.15s;
}
.va-toggle--on .va-toggle-knob[b-qzrd1zzvs2] {
  left: 19px;
}
.va-form-error[b-qzrd1zzvs2] {
  margin: 0 18px 12px;
  font-size: 12px;
  color: var(--color-text-danger);
  background: var(--color-background-danger);
  padding: 8px 10px;
  border-radius: var(--border-radius-md);
}
.va-delete-msg[b-qzrd1zzvs2] {
  padding: 16px 18px;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.va-delete-msg strong[b-qzrd1zzvs2] {
  color: var(--color-text-primary);
}