/* ------------------------------------------------------------------
   pages/schools/schools.css
   School screens: explore bar, school header (Groups-style), school
   information sheet, class list, section list, creation flow.
   Everything here reuses the shared tokens in styles/variables.css so
   these screens read as the same Android app as Messages/Groups.
------------------------------------------------------------------ */

/* ---------------- EXPLORE / SEARCH BAR ---------------- */

.explore-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface);
    border-radius: 18px; padding: 11px 14px;
    box-shadow: var(--shadow-sm);
    margin: 2px 0 14px;
}
.explore-bar .material-symbols-rounded { color: var(--muted); font-size: 22px; }
.explore-bar input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: .95rem; color: var(--text);
}
.explore-bar .explore-clear {
    border: 0; background: none; padding: 0; display: grid; place-items: center;
    color: var(--muted); cursor: pointer;
}
.explore-results { margin: 0 0 14px; }
.explore-hint { color: var(--muted); font-size: .82rem; padding: 10px 2px; }

/* ---------------- SCHOOL HEADER (mirrors .chat-topbar) ---------------- */

/* The school topbar mirrors .app-header geometry, so it reuses the same
   circular 40px controls at both ends. */
.school-topbar .back-btn,
.school-topbar .header-action {
    width: 40px; height: 40px; flex: 0 0 auto;
    border: none; border-radius: 50%; padding: 0;
    background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text);
    display: grid; place-items: center; cursor: pointer;
}
.school-topbar .back-btn:active,
.school-topbar .header-action:active { transform: scale(.92); }
.school-topbar .back-btn .material-symbols-rounded,
.school-topbar .header-action .material-symbols-rounded { font-size: 22px; line-height: 1; }

.school-topbar {
    min-height: var(--header-height);
    margin: 0 -16px 8px;
    padding: max(6px, env(safe-area-inset-top)) 16px 8px;
    display: flex; align-items: center; gap: 10px;
    background: var(--bg);
    position: sticky; top: 0; z-index: 50;
}
.school-identity {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    border: 0; background: transparent; padding: 2px;
    text-align: left; cursor: pointer;
}
.school-identity .avatar { flex: 0 0 auto; }
.school-identity-text { min-width: 0; display: flex; flex-direction: column; }
.school-identity-text strong {
    font-size: 1.02rem; font-weight: 700; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.school-identity-text span {
    color: var(--muted); font-size: .72rem; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- SCHOOL INFORMATION SHEET ---------------- */

.school-info-sheet { padding-bottom: 4px; }
.school-info-hero { display: flex; align-items: center; gap: 14px; padding: 2px 0 16px; }
.school-info-hero .avatar { flex: 0 0 auto; }
.school-info-hero-copy { flex: 1 1 auto; min-width: 0; }
.school-info-hero-copy h2 { margin: 0 0 6px; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.school-info-hero-copy .role-pill { margin: 0; }
.school-avatar-edit { position: relative; border: 0; background: none; padding: 0; cursor: pointer; }
.school-avatar-edit .avatar-edit-badge {
    position: absolute; right: -2px; bottom: -2px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary-btn-from); color: var(--on-primary);
    display: grid; place-items: center; border: 2px solid var(--surface);
}
.school-avatar-edit .avatar-edit-badge .material-symbols-rounded { font-size: 13px; }
.school-avatar-edit.uploading { opacity: .55; pointer-events: none; }

.school-info-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.school-info-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 2px;
}
.school-info-item > .material-symbols-rounded {
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px;
    display: grid; place-items: center; font-size: 20px;
    background: var(--primary-soft); color: var(--primary);
}
.school-info-item-copy { flex: 1 1 auto; min-width: 0; }
.school-info-item-copy strong { display: block; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.school-info-item-copy span { display: block; color: var(--muted); font-size: .74rem; margin-top: 2px; }
.school-info-item.tappable { cursor: pointer; border-radius: var(--radius-md); }
.school-info-item.tappable:active { background: var(--surface-alt); }
.school-info-item > .school-info-chevron { align-self: center; color: var(--muted); font-size: 20px; }

.school-action-stack { display: flex; flex-direction: column; gap: 8px; }
.school-action-stack .btn { margin: 0; }

/* ---------------- CLASS + SECTION LISTS ---------------- */

.entity-list { display: flex; flex-direction: column; gap: 9px; }
.entity-row {
    width: 100%; display: flex; align-items: center; gap: 12px;
    background: var(--surface);
    border-radius: 20px; padding: 14px;
    text-align: left; box-shadow: var(--shadow-sm); cursor: pointer;
}
.entity-row:active { transform: scale(.99); }
.entity-badge {
    width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
    font-weight: 800; font-size: .95rem;
}
.entity-badge .material-symbols-rounded { font-size: 22px; }
.entity-badge.is-long { font-size: .78rem; letter-spacing: -.01em; }
/* Single-label section headings must not pick up the count pill styling
   that the messages page defines for `span:last-child`. */
.section-label span:only-child { background: none; padding: 0; min-width: 0; text-align: left; }
.entity-copy { flex: 1 1 auto; min-width: 0; }
.entity-copy strong { display: block; font-size: 1rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entity-copy span { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entity-row > .material-symbols-rounded.entity-chevron { flex: 0 0 auto; color: var(--muted); font-size: 20px; }

.school-row-avatar { position: relative; flex: 0 0 auto; }
.school-row-avatar .grid-tile-badge {
    position: absolute; right: -3px; bottom: -3px; top: auto; left: auto;
    width: 18px; height: 18px; font-size: 10px;
    border-radius: 50%; background: var(--surface-alt); color: var(--text);
    display: grid; place-items: center; border: 2px solid var(--surface);
    font-weight: 800;
}
.school-row-avatar .grid-tile-badge.badge-owner { background: var(--warning-bg); color: var(--warning-text); border-color: var(--surface); }

/* ---------------- SUBJECT + CHAPTER LISTS ---------------- */
/* Same simple row shape as .entity-row/.card-row — subjects/chapters
   used to be square grid tiles; reverted to the app's normal list look. */

.subjects-list, .chapters-list { display: flex; flex-direction: column; gap: 9px; }
.subject-row-icon, .chapter-row-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--primary-soft); color: var(--primary);
    display: grid; place-items: center;
}
.subject-row-icon .material-symbols-rounded, .chapter-row-icon .material-symbols-rounded { font-size: 22px; }

/* ---------------- CREATION FLOW ---------------- */

.create-steps {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px;
}
.create-step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .74rem; font-weight: 700; }
.create-step-dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface-alt); color: var(--muted);
    display: grid; place-items: center; font-size: .7rem; font-weight: 800;
}
.create-step.active { color: var(--primary); }
.create-step.active .create-step-dot { background: var(--primary-btn-from); color: var(--on-primary); }
.create-step-line { flex: 1 1 auto; height: 2px; background: var(--border); border-radius: 2px; }

.icon-picker { display: flex; justify-content: center; margin: 2px 0 18px; }
.icon-picker button {
    position: relative; border: 0; background: none; padding: 0; cursor: pointer;
    display: grid; place-items: center;
}
.icon-picker .icon-picker-ring {
    width: 92px; height: 92px; border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    display: grid; place-items: center; overflow: hidden;
    color: var(--primary);
}
.icon-picker .icon-picker-ring img { width: 100%; height: 100%; object-fit: cover; }
.icon-picker .icon-picker-ring .material-symbols-rounded { font-size: 30px; }
.icon-picker .avatar-edit-badge {
    position: absolute; right: -2px; bottom: -2px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--primary-btn-from); color: var(--on-primary);
    display: grid; place-items: center; border: 2px solid var(--surface);
}
.icon-picker .avatar-edit-badge .material-symbols-rounded { font-size: 15px; }
.icon-picker-label { text-align: center; color: var(--muted); font-size: .76rem; margin: -12px 0 16px; }

.class-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.class-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 999px; padding: 8px 10px 8px 13px;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary); font-size: .8rem; font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}
.class-chip button {
    border: 0; background: none; padding: 0; color: inherit;
    display: grid; place-items: center; cursor: pointer;
}
.class-chip button .material-symbols-rounded { font-size: 16px; }

.limit-note {
    display: flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: .76rem; margin: -6px 0 14px;
}
.limit-note .material-symbols-rounded { font-size: 17px; }
.limit-note.warn { color: var(--warning-text); }

.field-hint { color: var(--muted); font-size: .74rem; margin-top: -10px; margin-bottom: 16px; }
.field-row { display: flex; gap: 10px; }
.field-row > .field { flex: 1 1 0; min-width: 0; }