/* ============================================================
   EduJA — My Account page (account.html / js/account.js).
   Reuses .admin-content/.admin-gate/.admin-status/.admin-header-row/
   .admin-sub from admin.css and .assign-submit-btn/.assign-form input
   styling from teacher.css (both loaded alongside this file) so the
   page matches the rest of the staff/account UI instead of
   introducing a third visual language.
   ============================================================ */
.account-content { padding: 16px; color: #f5e7c8; max-width: 560px; margin: 0 auto; }
.account-content h1 { color: #FDB827; font-size: 1.5rem; margin-bottom: 4px; }

.account-card {
    background: #16211a;
    border: 1px solid #2a3a2a;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}
.account-card h2 { font-size: 1rem; color: #FDB827; margin-bottom: 10px; }

.avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatar-preview {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #1e2a1e;
    border: 2px solid #3a4a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-preview span { font-size: 1.4rem; font-weight: 800; color: #00cc66; }
.avatar-actions { display: flex; flex-direction: column; gap: 8px; flex: 1 1 160px; }
.avatar-actions button { width: 100%; }

.account-form { display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.account-form input {
    background: #1e2a1e;
    color: #f5e7c8;
    border: 1px solid #3a4a3a;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.85rem;
}

/* Small round avatar thumbnails used in the Teacher Portal roster and
   Admin dashboard user list — see js/teacher.js / js/admin.js. */
.avatar-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid #3a4a3a;
    background: #1e2a1e;
    flex-shrink: 0;
}
.avatar-thumb-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1e2a1e;
    border: 1px solid #3a4a3a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: #00cc66;
    vertical-align: middle;
    margin-right: 8px;
    flex-shrink: 0;
}
.user-name-row { display: flex; align-items: center; }

/* Small avatar shown next to "Welcome, <name>" in the top bar once
   signed in — index.html/js/app.js, teacher.html/js/teacher.js,
   admin.html/js/admin.js. Reuses .avatar-thumb/.avatar-thumb-fallback
   above; this just adds the flex row wrapper. */
.welcome-msg-row { display: flex; align-items: center; gap: 0; }
.welcome-msg-row .avatar-thumb,
.welcome-msg-row .avatar-thumb-fallback { width: 28px; height: 28px; font-size: 0.65rem; }