#main-grid {
    grid-template-columns: 1fr 2fr;
    gap: 0;
    align-items: start;
}

#main-grid>.container:first-child {
    background-color: var(--color-canvas);
    width: 100%;
}

/* اسکرولِ ستون لیست (سمت راست) و ستون جزئیات آزمون (سمت چپ) باید از هم
   جدا باشد: هر کدام زیر هدر سایت می‌چسبد و اگر محتوایش بلندتر از فضای
   باقی‌مانده‌ی صفحه بود، خودش به‌صورت مستقل اسکرول می‌کند، نه با هم. */
@media only screen and (min-width: 801px) {
    #main-grid > .container {
        position: sticky;
        top: var(--attend-header-offset, 0px);
        max-height: calc(100vh - var(--attend-header-offset, 0px));
        overflow-y: auto;
    }
    /* بدون این، آیتم‌های فلکس (فرم فیلتر و هر کارتِ آزمون) داخل ستونِ
       محدود‌شده جمع می‌شدن (flex-shrink پیش‌فرض 1) و چون .card خودش
       overflow:hidden داره، متن‌شون به‌جای اسکرول شدن قطع/مخفی می‌شد.
       flex-shrink:0 یعنی هر آیتم اندازه‌ی واقعی خودش رو نگه می‌داره و
       به‌جاش کل ستون اسکرول می‌کنه. */
    #main-grid > .container > * {
        flex-shrink: 0;
    }
}

form .tile {
    padding: 0;
}

form .input {
    background-color: var(--color-body-bg) !important;
    width: 100%;
}

#main-grid>.container:first-child .card {
    background-color: white;
    padding: 2rem;
}

.quiz {
    display: flex;
    flex-direction: column;
}

.quiz.locked {
    cursor: not-allowed
}

.quiz .tile {
    background-color: var(--color-canvas);
    border-radius: var(--radius);
}

.quiz.selected {
    border: thin solid var(--color-primary);
}

.selected-quiz {
    justify-self: center;
    width: 100%;
}

.selected-quiz .grid {
    align-items: center;
    gap: 3rem;
    grid-template-columns: 1fr;
}

@media only screen and (max-width: 1023px) {
    .selected-quiz .grid {
        grid-template-columns: 1fr;
    }
}

.selected-quiz img {
    width: 100%;
    aspect-ratio: 1;
    max-width: 400px;
    justify-self: center;
    object-fit: contain;
    border-radius: var(--radius);
}

.selected-quiz .content>.tile:first-child {
    padding: 0;
}

.selected-quiz .content>.tile:first-child .chip {
    width: fit-content;
}

.selected-quiz .content>.tile:first-child hr {
    flex: 1;
    height: 0;
    border-color: transparent;
}

.selected-quiz .content .tile>.tile .material-symbols-rounded {
    vertical-align: middle;
}



.selected-quiz hr {
    margin: 2rem 0;
}

.selected-quiz .btn-group a:first-child {
    min-width: 200px;
}




.selected-quiz .records .record .material-symbols-rounded {
    vertical-align: middle;
}

.selected-quiz .records .record-summary {
    align-items: center;
    gap: 1rem;
}

.selected-quiz .records .record hr {
    flex: 1
}
.selected-quiz .records .record table {
    table-layout: fixed;
    width: 100%;
}

.selected-quiz .records .record td,
.selected-quiz .records .record th {
    border: 1px solid var(--color-divider);
    padding: 8px;
    width: 50%;
    overflow: auto;

}

.selected-quiz .records .record tr {
    background-color: var(--color-divider);
    text-align: center;
}
.selected-quiz .records .tile:last-child {
    justify-self: end;
}
.quiz-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 2rem 0;
  grid-column: 1 / -1;
}

/* چیپ‌های وضعیت آزمون: سطح دشواری و رایگان/پولی */
.chip--sm {
  font-size: 1.1rem;
  padding: 0.2rem 0.8rem;
}

.chip--free {
  color: #0f7b3f;
  border-color: #0f7b3f;
  background: rgba(15, 123, 63, 0.08);
}

/* گروه فیلتر سطح دشواری (به‌جای select) */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-group__label {
  font-size: 1.2rem;
  color: var(--color-text-secondary, #666);
  font-weight: 600;
}

.chip-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip-select__btn {
  border: thin solid var(--color-divider);
  background: var(--color-body-bg);
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text-secondary, #666);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.chip-select__btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* دکمه‌ی تک‌آیکونِ مرتب‌سازی (به‌جای select/دو دکمه‌ی متنی) */
.sort-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  height: auto;
  align-self: stretch;
  border: thin solid var(--color-primary);
  background: transparent;
  border-radius: var(--radius);
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.sort-toggle-btn:hover {
  background: var(--color-canvas);
}

.sort-toggle-btn .material-symbols-rounded {
  font-size: 1.8rem;
  transition: transform 0.15s;
}

/* ردیفِ روبه‌روی دکمه‌ی سورت (سمت راست) و دکمه‌های فیلتر/حذف فیلتر */
.filter-form__actions {
  display: flex;
  align-items: stretch;
  gap: 0.8rem;
}

.filter-form__submit {
  display: flex;
  align-items: stretch;
  gap: 0.8rem;
  flex: 1;
}

.filter-form__submit .btn {
  margin: 0;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.filter-form__submit .btn--primary {
  flex: 1;
  width: 100%;
}