/* LINKS LMS — theme tokens (toggle via data-theme on ) */ html[data-theme="dark"] { color-scheme: dark; --bg: #0f1419; --bg-elevated: #161d27; --surface: #1c2633; --border: rgba(255, 255, 255, 0.08); --text: #e8edf4; --muted: #8b9aaf; --accent: #5b8cff; --accent-dim: #3d6fd6; --success: #3ecf8e; --danger: #f07178; --radius: 12px; --radius-sm: 8px; --font: "DM Sans", system-ui, sans-serif; --font-display: var(--font); --shadow: 0 18px 50px rgba(0, 0, 0, 0.45); --nav-bg: rgba(15, 20, 25, 0.85); --nav-border: rgba(255, 255, 255, 0.08); --body-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(91, 140, 255, 0.12), transparent), radial-gradient(800px 400px at 100% 0%, rgba(62, 207, 142, 0.06), transparent); --input-bg: rgba(0, 0, 0, 0.25); --input-border: var(--border); --login-page-bg: #13161c; --login-card-bg: #1a1d24; --login-card-border: rgba(255, 255, 255, 0.06); --login-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); --login-input-bg: #12151a; --login-input-border: rgba(255, 255, 255, 0.1); --login-placeholder: #5c6570; --login-alt-bg: rgba(0, 0, 0, 0.2); --login-or-line: rgba(255, 255, 255, 0.1); --login-icon: #6b7689; --login-label: #c4cad4; --login-check: #9aa3b2; } html[data-theme="light"] { color-scheme: light; --bg: #edf0f6; --bg-elevated: #ffffff; --surface: #ffffff; --border: rgba(20, 23, 29, 0.1); --text: #14171d; --muted: #5c6678; --accent: #2d62d8; --accent-dim: #2560c4; --success: #059669; --danger: #dc2626; --radius: 12px; --radius-sm: 8px; --font: "DM Sans", system-ui, sans-serif; --font-display: var(--font); --shadow: 0 18px 50px rgba(20, 23, 29, 0.1); --nav-bg: rgba(255, 255, 255, 0.92); --nav-border: rgba(20, 23, 29, 0.08); --body-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(91, 140, 255, 0.12), transparent), radial-gradient(800px 400px at 100% 0%, rgba(62, 207, 142, 0.08), transparent); --input-bg: #f3f5f9; --input-border: rgba(20, 23, 29, 0.12); --login-page-bg: #e8ecf4; --login-card-bg: #ffffff; --login-card-border: rgba(20, 23, 29, 0.1); --login-card-shadow: 0 24px 60px rgba(20, 23, 29, 0.12); --login-input-bg: #f3f5f9; --login-input-border: rgba(20, 23, 29, 0.12); --login-placeholder: #8b95a5; --login-alt-bg: rgba(20, 23, 29, 0.04); --login-or-line: rgba(20, 23, 29, 0.12); --login-icon: #6b7689; --login-label: #3d4550; --login-check: #5c6678; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; /* Fallback; admin-nav.js overwrites on mobile to match #admin-header-stack height (single-row header) */ --admin-mobile-header-offset: 4.25rem; } body.app-body { margin: 0; min-height: 100vh; font-family: var(--font); background: var(--body-gradient), var(--bg); color: var(--text); line-height: 1.55; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 5.5rem; } /* Top nav */ .topnav { border-bottom: 1px solid var(--nav-border); background: var(--nav-bg); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; } .topnav__inner { max-width: 1100px; margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; } .brand:hover { text-decoration: none; color: var(--text); } .brand__mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), #8b5cf6); box-shadow: 0 4px 14px rgba(91, 140, 255, 0.35); } .brand__text { font-size: 1.05rem; } .topnav__links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; } .topnav__links a { color: var(--muted); } .topnav__links a:hover { color: var(--text); } .topnav__user { color: var(--muted); font-size: 0.9rem; } .topnav__links .topnav__notify { margin-right: 0.25rem; } .pagination-nav { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; align-items: flex-start; } .pagination-nav__summary { margin: 0; font-size: 0.9rem; } .pagination-nav__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; } .pagination-nav__page { font-size: 0.9rem; } /* Hero / landing */ .hero { padding: 1rem 0 2rem; } .hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: start; } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } } .hero__title { font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 2.85rem); font-weight: 400; line-height: 1.15; margin: 0.5rem 0 1rem; letter-spacing: -0.02em; } .hero__lead { color: var(--muted); font-size: 1.05rem; max-width: 46ch; margin: 0 0 1.5rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--accent); margin: 0; font-weight: 600; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.5rem; } .card--elevated { background: var(--bg-elevated); box-shadow: var(--shadow); } .card__title { font-size: 1.15rem; margin: 0 0 0.75rem; font-weight: 600; } .feature-list { margin: 0; padding-left: 1.1rem; color: var(--muted); } .feature-list li { margin-bottom: 0.6rem; } .feature-list strong { color: var(--text); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: 0.95rem; cursor: pointer; font-family: inherit; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn:hover { text-decoration: none; } .btn--primary { background: linear-gradient(135deg, var(--accent) 0%, #7c5cff 55%, #8b5cf6 100%); color: #fff; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 6px 20px rgba(91, 140, 255, 0.22); } .btn--primary:hover { filter: brightness(1.06); color: #fff; } .btn--secondary { background: var(--surface); border-color: var(--border); color: var(--text); } .btn--secondary:hover { border-color: rgba(255, 255, 255, 0.2); } .btn--ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.04); } .btn--danger { background: rgba(240, 113, 120, 0.12); border-color: rgba(240, 113, 120, 0.35); color: #ffb4b8; } .btn--danger:hover { background: rgba(240, 113, 120, 0.2); } .btn--sm { padding: 0.35rem 0.75rem; font-size: 0.85rem; } .btn--block { width: 100%; } /* Forms */ .form { display: flex; flex-direction: column; gap: 1rem; } .form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } } .form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; color: var(--muted); } .input { padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 1rem; } .input:focus { outline: 2px solid rgba(91, 140, 255, 0.45); outline-offset: 1px; } .input--inline { width: auto; min-width: 8rem; } .textarea { min-height: 100px; resize: vertical; } .checkbox { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--text); } /* Page */ .page { animation: fade 0.35s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .page--narrow { max-width: 480px; margin: 0 auto; } .page-head { margin-bottom: 1.5rem; } .page-head--split { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .page-head__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 400; margin: 0 0 0.35rem; letter-spacing: -0.02em; } .h2 { font-size: 1.2rem; margin: 0 0 0.75rem; font-weight: 600; } .h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; font-weight: 600; color: var(--muted); } .muted { color: var(--muted); margin: 0; } /* Alerts */ .alert { padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.92rem; } .alert--success { background: rgba(62, 207, 142, 0.12); border: 1px solid rgba(62, 207, 142, 0.35); color: #9cf0c9; } .alert--error { background: rgba(240, 113, 120, 0.1); border: 1px solid rgba(240, 113, 120, 0.35); color: #ffc9cc; } .alert--warning { background: rgba(245, 200, 90, 0.12); border: 1px solid rgba(245, 200, 90, 0.4); color: #f5e6a8; } /* Auth */ .auth-card .h1 { margin-bottom: 0.75rem; } /* Stats */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat { padding: 1.25rem; } .stat__label { display: block; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .stat__value { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; } /* Tables */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .table th, .table td { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); } .table th { color: var(--muted); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } .table--compact td { padding: 0.45rem 0.5rem; } .stack-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .inline-form { display: inline; } /* Teacher class grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .class-card__desc { color: var(--muted); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Parent */ .section { margin-bottom: 1.5rem; } .child-block__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .pill { display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(91, 140, 255, 0.12); border: 1px solid rgba(91, 140, 255, 0.25); font-size: 0.88rem; } .empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); } .danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--border); } /* Footer */ .site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.5rem 1.25rem; color: var(--muted); font-size: 0.85rem; } .site-footer__inner { max-width: 1100px; margin: 0 auto; } .site-footer p { margin: 0; } /* ---------- Theme FAB (avatar gradient, all pages) ---------- */ .theme-fab { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; width: 52px; height: 52px; padding: 0; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #7c5cff 100%); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); opacity: 0.4; transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease; } .theme-fab:hover { opacity: 1; transform: scale(1.06); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } .theme-fab:active { transform: scale(0.98); } .theme-fab:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 3px; } .theme-fab__icon { display: none; flex-shrink: 0; font-size: 1.35rem; line-height: 1; } html[data-theme="dark"] .theme-fab__icon--sun { display: block; } html[data-theme="light"] .theme-fab__icon--moon { display: block; } /* ---------- Login screen (centered card, reference layout) ---------- */ body.app-body:has(.login-page), body.app-body:has(.register-page) { background: var(--login-page-bg); } body.app-body:has(.login-page) .topnav, body.app-body:has(.login-page) .site-footer, body.app-body:has(.register-page) .topnav, body.app-body:has(.register-page) .site-footer { display: none; } body.app-body:has(.login-page) .main, body.app-body:has(.register-page) .main { max-width: none; margin: 0; padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-page { width: 100%; padding: 2rem 1.25rem 3rem; display: flex; justify-content: center; align-items: center; } .login-card { width: 100%; max-width: 420px; background: var(--login-card-bg); border: 1px solid var(--login-card-border); border-radius: 16px; padding: 2rem 1.75rem 1.75rem; box-shadow: var(--login-card-shadow); } .register-card { max-width: 460px; } .login-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .login-field--span2 { grid-column: 1 / -1; } .login-optional { font-weight: 400; color: var(--muted); font-size: 0.88em; } .login-input--select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7689' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.25rem; } .register-student-fields { display: flex; flex-direction: column; gap: 1rem; } .register-student-fields[hidden] { display: none !important; } @media (max-width: 520px) { .login-name-grid { grid-template-columns: 1fr; } .login-field--span2 { grid-column: auto; } } .login-brand { display: flex; justify-content: center; align-items: center; margin: 0 auto 1.25rem; } .login-brand__icon { font-size: 2.75rem; line-height: 1; color: var(--accent); filter: drop-shadow(0 6px 18px rgba(91, 140, 255, 0.35)); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .login-card__head { text-align: center; margin-bottom: 1.5rem; } .login-card__title { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .login-card__subtitle { margin: 0; font-size: 0.9rem; color: var(--muted); } .login-alert { padding: 0.65rem 0.85rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.88rem; } .login-alert--success { background: rgba(62, 207, 142, 0.12); border: 1px solid rgba(62, 207, 142, 0.35); color: #9cf0c9; } .login-alert--error { background: rgba(240, 113, 120, 0.1); border: 1px solid rgba(240, 113, 120, 0.35); color: #ffc9cc; } .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-field__label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--login-label); margin-bottom: 0.4rem; } .login-input-wrap { position: relative; display: flex; align-items: center; } .login-input__icon { position: absolute; left: 0.85rem; color: var(--login-icon); display: flex; pointer-events: none; } .login-input { width: 100%; padding: 0.7rem 0.85rem 0.7rem 2.65rem; border-radius: 10px; border: 1px solid var(--login-input-border); background: var(--login-input-bg); color: var(--text); font-size: 0.95rem; font-family: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .login-input.login-input--with-toggle { padding-right: 2.75rem; } .login-input::placeholder { color: var(--login-placeholder); } .login-input:focus { border-color: rgba(91, 140, 255, 0.55); box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.12); } .login-input__toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0.35rem; color: var(--login-icon); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; } .login-input__toggle:hover { color: var(--muted); background: rgba(128, 128, 128, 0.12); } .login-row--split { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: -0.25rem; } .login-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--login-check); cursor: pointer; user-select: none; } .login-check input { width: 1rem; height: 1rem; accent-color: var(--accent); } .login-link-forgot { font-size: 0.85rem; color: var(--accent); font-weight: 500; text-decoration: none; } .login-link-forgot:hover { text-decoration: underline; } .login-btn-primary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin-top: 0.25rem; padding: 0.85rem 1.25rem; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; font-family: inherit; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent) 0%, #7c5cff 55%, #8b5cf6 100%); box-shadow: 0 8px 24px rgba(91, 140, 255, 0.28); transition: transform 0.12s, filter 0.12s; } .login-btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); } .login-btn-primary:active { transform: translateY(0); } .login-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.35rem 0; } .login-or__line { flex: 1; height: 1px; background: var(--login-or-line); } .login-or__text { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--login-icon); } .login-alt-actions { display: flex; flex-direction: column; gap: 0.6rem; } .login-alt-btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.85rem; border-radius: 10px; border: 1px solid var(--border); background: var(--login-alt-bg); color: inherit; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .login-alt-btn:hover { background: rgba(128, 128, 128, 0.1); border-color: var(--border); text-decoration: none; } .login-alt-btn__icon { flex-shrink: 0; color: var(--muted); display: flex; } .login-alt-btn__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; text-align: left; } .login-alt-btn__title { font-size: 0.92rem; font-weight: 600; color: var(--text); } .login-alt-btn__sub { font-size: 0.78rem; color: var(--muted); line-height: 1.3; } .login-alt-btn__chev { flex-shrink: 0; color: var(--login-icon); } .login-footer-line { text-align: center; margin: 1.5rem 0 0; font-size: 0.9rem; color: var(--muted); } .login-footer-line a { color: var(--accent); font-weight: 600; text-decoration: none; } .login-footer-line a:hover { text-decoration: underline; } @media (max-width: 400px) { .login-card { padding: 1.5rem 1.15rem; } } /* Registration notice */ .login-card__notice { margin: 1rem 0 0; padding: 0.85rem 1rem; font-size: 0.88rem; line-height: 1.45; color: var(--text); background: rgba(91, 140, 255, 0.1); border: 1px solid rgba(91, 140, 255, 0.25); border-radius: var(--radius-sm); } html[data-theme="light"] .login-card__notice { background: rgba(45, 98, 216, 0.08); border-color: rgba(45, 98, 216, 0.2); } .login-card__notice--warn { background: rgba(255, 160, 100, 0.12); border-color: rgba(255, 160, 100, 0.35); } /* Admin shell (sidebar layout) */ body.app-body--admin { background: var(--bg); } body.app-body--admin .main { max-width: none; margin: 0; padding: 0; } body.app-body--teacher { background: var(--bg); } body.app-body--teacher .main { max-width: none; margin: 0; padding: 0; } body.app-body--student { background: var(--bg); } body.app-body--student .main { max-width: none; margin: 0; padding: 0; } body.app-body--parent { background: var(--bg); } body.app-body--parent .main { max-width: none; margin: 0; padding: 0; } .parent-dash__link-copy { margin-top: 0; } .parent-dash__link-form { margin-top: 1rem; } .parent-child-panel { margin-top: 1.25rem; } .parent-child-panel__head { align-items: flex-start; } .parent-child-panel__email { margin: 0.35rem 0 0; } .parent-child-panel__body { margin-top: 0.75rem; } .parent-child-panel__subhead { font-size: 1rem; margin-bottom: 0.5rem; } .parent-dash__empty-banner { margin-top: 1.25rem; } .teacher-topbar__fill { flex: 1; min-width: 0; min-height: 2.5rem; } .teacher-class-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; justify-content: flex-end; } .teacher-class-list { list-style: none; margin: 0; padding: 0; } .teacher-class-list__item { border-bottom: 1px solid var(--border); } .teacher-class-list__item:last-child { border-bottom: none; } .teacher-class-list__link { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0; text-decoration: none; color: inherit; } .teacher-class-list__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .teacher-class-list__grades { flex-shrink: 0; font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none; } .teacher-class-list__grades:hover { text-decoration: underline; } .teacher-class-list__link:hover { color: var(--accent); text-decoration: none; } .teacher-class-list__title { font-weight: 600; } .teacher-class-list__meta { font-size: 0.85rem; color: var(--muted); } .teacher-roster-list { list-style: none; margin: 0; padding: 0; } .teacher-roster-list__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); } .teacher-roster-list__row:last-child { border-bottom: none; } .teacher-roster-list__name { display: block; font-weight: 600; } .teacher-roster-list__email { font-size: 0.85rem; } .teacher-enroll-panel .teacher-enroll-block { margin-bottom: 1.25rem; } .teacher-enroll-hint { font-size: 0.85rem; margin: 0.35rem 0 0; } .teacher-enroll-search-results { margin-top: 0.75rem; max-height: 16rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); } .teacher-enroll-search-results[hidden] { display: none !important; } .teacher-enroll-search-list { list-style: none; margin: 0; padding: 0; } .teacher-enroll-search-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); } .teacher-enroll-search-list__item:last-child { border-bottom: none; } .teacher-enroll-search-list__item--disabled { opacity: 0.85; } .teacher-enroll-search-list__main { font-weight: 600; flex: 1 1 140px; min-width: 0; } .teacher-enroll-search-list__meta { flex: 2 1 180px; font-size: 0.85rem; min-width: 0; word-break: break-all; } .teacher-enroll-search-add { margin-left: auto; } .teacher-enroll-search-empty { margin: 0; padding: 0.75rem; font-size: 0.9rem; } .teacher-enroll-form { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .teacher-enroll-csv { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 600px) { .teacher-enroll-csv { flex-direction: row; align-items: flex-end; flex-wrap: wrap; } .teacher-enroll-csv .label { flex: 1; min-width: 200px; margin-bottom: 0; } } @media (min-width: 600px) { .teacher-enroll-form { flex-direction: row; align-items: flex-end; flex-wrap: wrap; } .teacher-enroll-form .label { flex: 1; min-width: 200px; margin-bottom: 0; } } .teacher-danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); } .teacher-record-table { font-size: 0.9rem; } .class-record-table th, .class-record-table td { vertical-align: top; } .class-record-th { min-width: 7.5rem; } .class-record-th__title { display: block; font-weight: 600; } .class-record-th__cat { display: block; font-size: 0.7rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; } .class-record-th__max { font-size: 0.75rem; } .class-record-td { min-width: 5.5rem; } .class-record-score { width: 100%; min-width: 3.25rem; margin-bottom: 0.35rem; } .class-record-note { width: 100%; min-width: 4rem; font-size: 0.8rem; } .input.input--sm { padding: 0.35rem 0.5rem; font-size: 0.85rem; } .class-record-table--solo th[scope="row"] { max-width: 12rem; } /* Class record — add column modal */ .class-record-column-modal .class-record-column-modal__card { width: min(440px, 100%); max-height: min(90vh, 720px); } .class-record-column-modal .admin-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } /* Class record — student details modal */ .class-record-student-modal .class-record-student-modal__card { width: min(640px, 100%); max-height: min(92vh, 900px); } /* Scrollbar hidden until hover, focus-within, or active scroll (see JS: --scroll-active) */ .class-record-student-modal__body { max-height: min(78vh, 760px); overflow-y: auto; overflow-x: hidden; padding: 0.15rem 0.35rem 0.15rem 0.15rem; scrollbar-width: none; } .class-record-student-modal__body::-webkit-scrollbar { width: 0; height: 0; } .class-record-student-modal__body:hover, .class-record-student-modal__body:focus-within, .class-record-student-modal__body.class-record-student-modal__body--scroll-active { scrollbar-width: thin; scrollbar-color: rgba(124, 92, 255, 0.55) rgba(255, 255, 255, 0.06); } .class-record-student-modal__body:hover::-webkit-scrollbar, .class-record-student-modal__body:focus-within::-webkit-scrollbar, .class-record-student-modal__body.class-record-student-modal__body--scroll-active::-webkit-scrollbar { width: 9px; } .class-record-student-modal__body:hover::-webkit-scrollbar-track, .class-record-student-modal__body:focus-within::-webkit-scrollbar-track, .class-record-student-modal__body.class-record-student-modal__body--scroll-active::-webkit-scrollbar-track { margin: 6px 0; background: rgba(255, 255, 255, 0.04); border-radius: 100px; } .class-record-student-modal__body:hover::-webkit-scrollbar-thumb, .class-record-student-modal__body:focus-within::-webkit-scrollbar-thumb, .class-record-student-modal__body.class-record-student-modal__body--scroll-active::-webkit-scrollbar-thumb { border-radius: 100px; background: linear-gradient(180deg, rgba(124, 92, 255, 0.65) 0%, rgba(59, 130, 246, 0.55) 100%); border: 2px solid transparent; background-clip: padding-box; } .class-record-student-modal__body:hover::-webkit-scrollbar-thumb:hover, .class-record-student-modal__body:focus-within::-webkit-scrollbar-thumb:hover, .class-record-student-modal__body.class-record-student-modal__body--scroll-active::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(139, 92, 246, 0.85) 0%, rgba(59, 130, 246, 0.75) 100%); background-clip: padding-box; } .class-record-panel-hero { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.85rem; } .class-record-panel-avatar { width: 96px; height: 96px; min-width: 96px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(124, 92, 255, 0.38) 0%, rgba(59, 130, 246, 0.22) 100%); border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5); overflow: hidden; } .class-record-panel-avatar--photo { padding: 0; background: var(--bg-elevated); } .class-record-panel-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .class-record-panel-avatar-initials { font-size: 1.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); line-height: 1; } .class-record-panel-hero-text { min-width: 0; flex: 1; padding-top: 0.15rem; } .class-record-panel-hero-hint { margin: 0.25rem 0 0; font-size: 0.8rem; line-height: 1.35; } .class-record-panel-subtitle { margin: 1rem 0 0.5rem; font-size: 0.95rem; font-weight: 600; } .class-record-panel-layout { display: flex; flex-direction: column; gap: 1rem; } .class-record-panel-card { margin: 0; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; } .class-record-panel-card-title { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 650; letter-spacing: -0.01em; } .class-record-panel-card-desc { margin: 0 0 0.85rem; font-size: 0.8rem; line-height: 1.4; } .class-record-panel-card--profile .class-record-panel-hero { margin-bottom: 0.75rem; } .class-record-panel-card--points .class-record-panel-card-desc { margin-bottom: 0.65rem; } .class-record-panel-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .class-record-panel-stat { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.65rem 0.75rem; border-radius: 10px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.06); } .class-record-panel-stat__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .class-record-panel-stat__value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.15; } .class-record-panel-card--grades .class-record-panel-card-desc { margin-bottom: 0.75rem; } .class-record-panel-card--empty .class-record-panel-no-cols { margin: 0; line-height: 1.45; } .class-record-student-modal .class-record-panel-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .class-record-student-modal .class-record-panel-footer .admin-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.625rem; width: 100%; margin: 0; box-sizing: border-box; } .class-record-panel-hero-text .class-record-panel-subtitle { margin: 0 0 0.15rem; } .class-record-panel-hero-text .class-record-panel-card-title { margin: 0 0 0.15rem; } .class-record-panel-dl { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.35rem 0.85rem; font-size: 0.88rem; margin: 0; } .class-record-panel-dl dt { margin: 0; color: var(--muted); font-weight: 500; } .class-record-panel-dl dd { margin: 0; } .class-record-panel-grade-row { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .class-record-panel-grade-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .class-record-panel-grade-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.65rem; margin-bottom: 0.45rem; font-size: 0.82rem; } .class-record-panel-grade-title { font-weight: 600; } .class-record-panel-grade-cat { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .class-record-panel-cell__scoreline { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .class-record-panel-cell__input { width: 4rem; font-weight: 600; color: var(--accent); text-align: right; } .class-record-panel-cell__slash { color: var(--muted); } .class-record-panel-cell__track { margin: 0.35rem 0 0.25rem; height: 6px; border-radius: 6px; background: rgba(128, 128, 128, 0.2); overflow: hidden; } .class-record-panel-cell__fill { height: 100%; border-radius: 6px; transition: width 0.12s ease, background 0.12s ease; } .class-record-panel-cell__fill.is-partial { background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%); } .class-record-panel-cell__fill.is-full { background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%); } .class-record-panel-cell__fill.is-empty { background: transparent; } .class-record-panel-loading { margin: 1rem 0; } .class-record-panel-no-cols { margin: 0.75rem 0 0; } /* Teacher class record dashboard (grades table) */ .class-record-page { max-width: 100%; } .class-record-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.25rem; padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; } .class-record-toolbar__start { flex: 1 1 200px; min-width: 0; } .class-record-toolbar__brand { display: flex; align-items: flex-start; gap: 0.65rem; } .class-record-toolbar__brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: linear-gradient(135deg, rgba(124, 92, 255, 0.35) 0%, rgba(59, 130, 246, 0.25) 100%); color: var(--accent); flex-shrink: 0; } .class-record-toolbar__brand-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .class-record-toolbar__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .class-record-toolbar__back { font-size: 0.82rem; text-decoration: none; } .class-record-toolbar__back:hover { color: var(--accent); } .class-record-toolbar__class { flex: 1 1 200px; min-width: 160px; max-width: 320px; } .class-record-toolbar__select { width: 100%; font-size: 0.88rem; } .class-record-toolbar__search-wrap { flex: 2 1 220px; display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0 0.35rem 0 0.35rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated); } .class-record-toolbar__search-icon { padding-left: 0.65rem; color: var(--muted); flex-shrink: 0; } .class-record-toolbar__search { flex: 1; min-width: 0; border: none; background: transparent; box-shadow: none; } .class-record-toolbar__search:focus { outline: none; } .class-record-toolbar__actions { flex: 0 0 auto; margin-left: auto; } .class-record-toolbar__add .fa-plus { margin-right: 0.35rem; } .class-record-empty { padding: 1.5rem; } .class-record-table-shell { padding: 0; overflow: hidden; } .class-record-table-wrap { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(124, 92, 255, 0.55) rgba(255, 255, 255, 0.06); } .class-record-table-wrap::-webkit-scrollbar { height: 9px; } .class-record-table-wrap::-webkit-scrollbar-track { margin: 0 6px; background: rgba(255, 255, 255, 0.04); border-radius: 100px; } .class-record-table-wrap::-webkit-scrollbar-thumb { border-radius: 100px; background: linear-gradient(90deg, rgba(124, 92, 255, 0.65) 0%, rgba(59, 130, 246, 0.55) 100%); border: 2px solid transparent; background-clip: padding-box; } .class-record-table-wrap::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, rgba(139, 92, 246, 0.85) 0%, rgba(59, 130, 246, 0.75) 100%); background-clip: padding-box; } .class-record-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, 0.08); } .class-record-pager--bottom { border-bottom: none; border-top: 1px solid var(--border); margin-top: 0; } .class-record-pager__meta { margin: 0; font-size: 0.82rem; } .class-record-pager__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .class-record-pager__per-label { font-size: 0.78rem; margin: 0; } .class-record-pager__per { min-width: 4.5rem; padding: 0.35rem 0.5rem; } .class-record-pager__disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; } .class-record-table { font-size: 0.88rem; min-width: 720px; } .class-record-table thead th { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); padding: 0.65rem 0.5rem; vertical-align: bottom; } .class-record-th-student { min-width: 14rem; max-width: 18rem; } .class-record-th-block { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; } .class-record-th-eyebrow { font-size: 0.68rem; } .class-record-th-sub { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .class-record-sort-btn { margin: 0; padding: 0.15rem 0.35rem; border: none; border-radius: 8px; background: rgba(128, 128, 128, 0.12); color: var(--text); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; } .class-record-sort-btn:hover { background: rgba(124, 92, 255, 0.2); color: var(--accent); } .class-record-th-meta { min-width: 5.5rem; } .class-record-table thead th.class-record-th-score { vertical-align: top; } /* Score columns: actions float over the label (no extra horizontal width). */ .class-record-th-score { position: relative; min-width: 7.5rem; text-align: left; } .class-record-th-score__head { position: relative; display: block; min-height: 2.25rem; } .class-record-th-score__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 0; padding-right: 0.15rem; } .class-record-th-score__actions { position: absolute; top: 0; right: 0; z-index: 2; display: inline-flex; gap: 0.1rem; opacity: 0; pointer-events: none; transition: opacity 0.14s ease; } @media (hover: hover) and (pointer: fine) { .class-record-th-score:hover .class-record-th-score__actions, .class-record-th-score:focus-within .class-record-th-score__actions { opacity: 1; pointer-events: auto; } } @media (hover: none), (pointer: coarse) { .class-record-th-score__actions { opacity: 1; pointer-events: auto; } } .class-record-th-score__actions .btn { min-width: 1.5rem; min-height: 1.5rem; padding: 0.15rem; line-height: 1; font-size: 0.72rem; border-radius: 8px; background: rgba(12, 16, 28, 0.82); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .class-record-th-score__actions .btn:hover { background: rgba(124, 92, 255, 0.22); border-color: rgba(124, 92, 255, 0.35); } .class-record-th-score__title { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; color: var(--text); } .class-record-th-score__cat { display: block; margin-top: 0.2rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; } .class-record-th-score__max { display: block; margin-top: 0.15rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em; text-transform: none; color: var(--muted); } .class-record-th-score__rule { display: block; margin-top: 0.12rem; font-size: 0.62rem; font-weight: 500; line-height: 1.25; } .class-record-category-points { margin-bottom: 1.25rem; } .class-record-category-points__hint { font-size: 0.88rem; line-height: 1.45; } .class-record-cat-tier-details { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); margin-bottom: 0.65rem; padding: 0.5rem 0.85rem; background: rgba(0, 0, 0, 0.12); } .class-record-cat-tier-summary { cursor: pointer; font-weight: 600; list-style: none; } .class-record-cat-tier-details[open] .class-record-cat-tier-summary { margin-bottom: 0.65rem; } .class-record-tier-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; } .class-record-tier-row .class-record-tier-type { min-width: 9rem; } .class-record-tier-row .class-record-tier-min { width: 5.5rem; } .class-record-tier-row .class-record-tier-pts { width: 5rem; } .class-record-tier-actions { margin-top: 0.65rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .class-record-panel-grade-rule { display: block; margin-top: 0.2rem; font-size: 0.72rem; } .class-record-student { padding: 0.65rem 0.5rem; vertical-align: top; } .class-record-student__name { font-weight: 600; font-size: 0.92rem; line-height: 1.3; } .class-record-student__id { margin-top: 0.2rem; font-size: 0.78rem; } .class-record-student__details { margin-top: 0.45rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(124, 92, 255, 0.45); background: transparent; color: var(--accent); text-decoration: none; border-radius: 8px; } .class-record-student__details:hover { background: rgba(124, 92, 255, 0.12); } .class-record-meta { font-size: 0.86rem; vertical-align: middle; } .class-record-td { padding: 0.5rem; vertical-align: top; } .class-record-cell__scoreline { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.25rem; } .class-record-cell__input { width: 3.75rem; min-width: 2.75rem; padding: 0.35rem 0.45rem; font-size: 0.88rem; font-weight: 600; color: var(--accent); text-align: right; } .class-record-cell__slash { color: var(--muted); font-size: 0.85rem; } .class-record-cell__max { font-size: 0.8rem; color: var(--muted); white-space: nowrap; } .class-record-cell__track { margin-top: 0.35rem; height: 6px; border-radius: 6px; background: rgba(128, 128, 128, 0.2); overflow: hidden; } .class-record-cell__fill { height: 100%; border-radius: 6px; transition: width 0.15s ease, background 0.15s ease; } .class-record-cell__fill.is-empty { background: transparent; } .class-record-cell__fill.is-partial { background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%); } .class-record-cell__fill.is-full { background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%); } .class-record-cell .class-record-note { margin-top: 0.35rem; width: 100%; max-width: 9rem; } .class-record-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem 1rem; border-top: 1px solid var(--border); background: rgba(0, 0, 0, 0.12); } .class-record-form__hint { margin: 0; font-size: 0.82rem; max-width: 42rem; } .class-record-legacy { border-style: dashed; } @media (max-width: 900px) { .class-record-toolbar__actions { width: 100%; margin-left: 0; } .class-record-toolbar__add { width: 100%; justify-content: center; } } .admin-quick-tile--disabled { opacity: 0.45; pointer-events: none; cursor: default; } .admin-panel__title i { margin-right: 0.4rem; color: var(--accent); opacity: 0.9; } .admin-shell { display: flex; min-height: 100vh; align-items: stretch; } .admin-nav-backdrop { display: none; } .admin-topbar__menu-btn { display: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); cursor: pointer; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; } .admin-topbar__menu-btn:hover { background: rgba(128, 128, 128, 0.12); border-color: var(--border); } .admin-sidebar__close { display: none; align-items: center; justify-content: center; margin-left: auto; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0; } .admin-sidebar__close:hover { background: rgba(128, 128, 128, 0.12); color: var(--text); } .admin-sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; min-height: 0; height: 100vh; max-height: 100vh; position: sticky; top: 0; align-self: flex-start; overflow: hidden; background: var(--surface); border-right: 1px solid var(--border); padding: 1.25rem 0 1rem; } .admin-sidebar__head { flex-shrink: 0; } .admin-sidebar__brand { position: relative; display: flex; align-items: center; gap: 0.65rem; padding: 0 1.1rem 1.25rem; border-bottom: 1px solid var(--border); } .admin-sidebar__mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent) 0%, #7c5cff 100%); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; line-height: 1; } .admin-sidebar__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: -0.02em; } .admin-sidebar__profile { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); } .admin-sidebar__avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #7c5cff 100%); border: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; font-weight: 700; } .admin-sidebar__avatar--photo { padding: 0; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); } .admin-sidebar__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .admin-sidebar__profile-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .admin-sidebar__name { font-weight: 600; font-size: 0.95rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .admin-sidebar__role { font-size: 0.78rem; color: var(--muted); } .admin-sidebar__nav { flex: 1 1 auto; min-height: 0; padding: 0.5rem 0.65rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .admin-sidebar__section { margin: 0.85rem 0.5rem 0.35rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .admin-sidebar__link { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; margin-bottom: 0.15rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 0.92rem; } .admin-sidebar__link:hover { background: var(--bg-elevated); text-decoration: none; } .admin-sidebar__link.is-active { background: rgba(91, 140, 255, 0.12); color: var(--accent); } .admin-sidebar__link i { width: 1.1rem; text-align: center; opacity: 0.85; } .admin-sidebar__badge { margin-left: auto; min-width: 1.35rem; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--danger); color: #fff; } .admin-sidebar__footer { flex-shrink: 0; padding: 0.75rem 1rem 0; border-top: 1px solid var(--border); } .admin-sidebar__logout { width: 100%; justify-content: center; } .admin-main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); } /* Admin header: one row — menu | search | bell + profile (all breakpoints) */ .admin-header-stack { position: sticky; top: 0; z-index: 110; display: flex; flex-direction: row; align-items: center; padding: 0.55rem 0.65rem 0.55rem 0.75rem; gap: 0.45rem; background: var(--nav-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } @media (min-width: 901px) { .admin-header-stack { padding: 0.85rem 1.5rem; gap: 1rem; } } .admin-topbar__search-wrap { flex: 1; min-width: 0; display: flex; align-items: center; } @media (min-width: 901px) { .admin-topbar__search-wrap .admin-topbar__search { max-width: 520px; width: 100%; } } .admin-topbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.45rem; flex: 1; width: 100%; min-width: 0; padding: 0; background: transparent; } @media (min-width: 901px) { .admin-topbar { gap: 0.75rem 1rem; } } .admin-topbar__search { flex: 1; min-width: 0; max-width: none; width: 100%; display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.85rem 0.45rem 0.65rem; border-radius: 999px; border: 1px solid var(--border); background: var(--input-bg); transition: border-color 0.15s, box-shadow 0.15s; } .admin-topbar__search:focus-within { border-color: rgba(91, 140, 255, 0.45); box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.12); } .admin-topbar__search-icon { color: var(--muted); font-size: 0.9rem; flex-shrink: 0; } .admin-topbar__search-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font: inherit; font-size: 0.92rem; outline: none; } .admin-topbar__search-input::placeholder { color: var(--muted); } @media (max-width: 900px) { .admin-topbar__search { padding: 0.38rem 0.65rem 0.38rem 0.55rem; gap: 0.5rem; } .admin-topbar__search-input { font-size: 0.88rem; } } .admin-topbar__right { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; margin-left: auto; } .admin-topbar__icon-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--text); border: 1px solid transparent; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .admin-topbar__icon-btn:hover { background: rgba(128, 128, 128, 0.1); border-color: var(--border); text-decoration: none; } .admin-topbar__bell-badge { position: absolute; top: 0.25rem; right: 0.25rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800; line-height: 1.1rem; text-align: center; background: var(--danger); color: #fff; } .admin-topbar__account { position: relative; } .admin-topbar__account > summary { list-style: none; cursor: pointer; } .admin-topbar__account > summary::-webkit-details-marker { display: none; } .admin-topbar__profile { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.5rem 0.35rem 0.35rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); user-select: none; } .admin-topbar__profile:hover { border-color: rgba(91, 140, 255, 0.35); } .admin-topbar__avatar { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #7c5cff 100%); color: #fff; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .admin-topbar__avatar--photo { padding: 0; overflow: hidden; background: var(--bg-elevated); border: 1px solid rgba(255, 255, 255, 0.08); } .admin-topbar__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .admin-topbar__profile-name { font-size: 0.88rem; font-weight: 600; line-height: 1.3; min-width: 0; max-width: none; white-space: normal; overflow: visible; overflow-wrap: anywhere; word-break: break-word; } .admin-topbar__chev { font-size: 0.65rem; color: var(--muted); margin-right: 0.15rem; } .admin-topbar__dropdown { position: absolute; right: 0; top: calc(100% + 0.35rem); min-width: 200px; padding: 0.35rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.1rem; } .admin-topbar__dropdown a { display: block; padding: 0.5rem 0.65rem; border-radius: 6px; color: var(--text); font-size: 0.9rem; text-decoration: none; } .admin-topbar__dropdown a:hover { background: var(--bg-elevated); text-decoration: none; } .admin-topbar__dropdown-danger { color: var(--danger) !important; font-weight: 600; } .admin-filter-hint { margin: 0 0 1rem; padding: 0.65rem 0.85rem; font-size: 0.88rem; color: var(--muted); background: rgba(91, 140, 255, 0.08); border: 1px solid rgba(91, 140, 255, 0.2); border-radius: var(--radius-sm); } .admin-filter-hint a { font-weight: 600; } .admin-main { flex: 1; padding: 1.75rem 1.5rem 5rem; max-width: 1200px; width: 100%; margin: 0 auto; } .admin-page__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .admin-notifications__total { margin-top: 0.35rem; font-size: 0.9rem; } .admin-notifications__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } .admin-notifications__action-form { margin: 0; } .admin-page__title { font-family: var(--font-display); font-size: 2rem; font-weight: 400; margin: 0 0 0.35rem; letter-spacing: -0.02em; } .admin-page__welcome { margin: 0; color: var(--muted); font-size: 0.95rem; } .admin-page__date { margin: 0.35rem 0 0; font-size: 0.88rem; } .admin-stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .admin-stat { padding: 1.1rem 1.15rem; } .admin-stat__label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; } .admin-stat__value { font-size: 1.85rem; font-weight: 700; line-height: 1.2; } .admin-stat__value--sm { font-size: 1rem; font-weight: 600; } .admin-stat__link { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 600; } .admin-stat--accent { border: 1px solid rgba(91, 140, 255, 0.35); } /* Admin dashboard (reference layout: metric row + overview + quick grid + full-width log) */ .admin-page__date { display: inline-flex; align-items: center; gap: 0.5rem; } .admin-page__date-inner { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; } .admin-metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } @media (max-width: 1100px) { .admin-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .admin-metric-row { grid-template-columns: 1fr; } } .admin-metric { position: relative; padding: 1.15rem 1.2rem 1.2rem; border: 1px solid var(--border); background: linear-gradient(165deg, rgba(255, 255, 255, 0.03) 0%, var(--surface) 48%); } .admin-metric__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.65rem; min-height: 2.5rem; } .admin-metric__icon { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; flex-shrink: 0; } .admin-metric--users .admin-metric__icon { background: linear-gradient(135deg, #7c5cff 0%, #5b8cff 100%); } .admin-metric--classes .admin-metric__icon { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } .admin-metric--pending .admin-metric__icon { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); } .admin-metric--activity .admin-metric__icon { background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); } .admin-metric__pill { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 999px; line-height: 1.2; } .admin-metric__pill--live { background: rgba(34, 197, 94, 0.18); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.35); } .admin-metric__pill--alert { background: rgba(234, 179, 8, 0.2); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.4); } .admin-metric__label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; } .admin-metric__value { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .admin-metric__sub { display: block; margin-top: 0.35rem; font-size: 0.8rem; font-weight: 600; color: #4ade80; } .admin-metric__link { display: inline-block; margin-top: 0.45rem; font-size: 0.82rem; font-weight: 600; } .admin-overview__title { display: flex; align-items: center; gap: 0.5rem; } .admin-overview__title-icon { display: inline-flex; color: var(--accent); opacity: 0.9; } .admin-overview__empty { padding: 0.5rem 0 1rem; text-align: center; } .admin-overview__empty-text { margin: 0 0 0.35rem; font-weight: 600; font-size: 0.95rem; } .admin-overview__empty-hint { margin: 0; font-size: 0.85rem; max-width: 22rem; margin-left: auto; margin-right: auto; } .admin-overview__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .admin-overview__legend-row { display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; } .admin-overview__dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; flex-shrink: 0; } .admin-overview__dot--ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); } .admin-overview__dot--warn { background: #eab308; box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.22); } .admin-overview__dot--info { background: #5b8cff; box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.22); } .admin-overview__legend-label { flex: 1; color: var(--muted); } .admin-overview__legend-value { font-weight: 700; font-variant-numeric: tabular-nums; } .admin-dash__mid { margin-bottom: 1.5rem; } .admin-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } @media (max-width: 520px) { .admin-quick-grid { grid-template-columns: 1fr; } } .admin-quick-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; min-height: 5.5rem; padding: 1rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.88rem; text-align: center; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease; } .admin-quick-tile:hover { background: rgba(128, 128, 128, 0.1); border-color: rgba(91, 140, 255, 0.35); text-decoration: none; transform: translateY(-1px); } .admin-quick-tile__icon { width: 2.75rem; height: 2.75rem; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--accent); background: rgba(91, 140, 255, 0.12); border: 1px solid rgba(91, 140, 255, 0.22); } .admin-quick-tile__text { line-height: 1.25; max-width: 9rem; } .admin-log-block__title-icon { margin-right: 0.4rem; color: var(--accent); } .admin-log-block__empty { text-align: center; padding: 2.25rem 1rem 1.5rem; } .admin-log-block__empty-icon { font-size: 3rem; color: var(--muted); opacity: 0.45; margin-bottom: 0.75rem; } .admin-log-block__empty-title { margin: 0 0 0.35rem; font-weight: 600; font-size: 1rem; } .admin-log-block__empty-text { margin: 0; font-size: 0.9rem; max-width: 22rem; margin-left: auto; margin-right: auto; } .admin-feed--flush .admin-feed__item:first-child { padding-top: 0; } .admin-main:has(.admin-dash) { max-width: 1280px; } .admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 900px) { .admin-two-col { grid-template-columns: 1fr; } .admin-nav-backdrop { display: block; position: fixed; top: var(--admin-mobile-header-offset, 7.5rem); left: 0; right: 0; bottom: 0; z-index: 95; margin: 0; padding: 0; border: none; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; cursor: pointer; } .admin-shell--nav-open .admin-nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; } .admin-shell { flex-direction: column; } .admin-sidebar { position: fixed; top: var(--admin-mobile-header-offset, 7.5rem); left: 0; bottom: 0; width: min(288px, 86vw); max-width: 100%; height: auto; max-height: none; z-index: 100; padding: 0.75rem 0 1rem; flex-direction: column; flex-wrap: nowrap; align-items: stretch; box-shadow: 8px 0 36px rgba(0, 0, 0, 0.4); transform: translateX(-102%); transition: transform 0.26s ease; overflow: hidden; align-self: stretch; } .admin-shell--nav-open .admin-sidebar { transform: translateX(0); } .admin-sidebar__close { display: inline-flex; } .admin-sidebar__profile { display: flex; } .admin-sidebar__nav { display: block; flex: 1 1 auto; min-height: 0; padding: 0.5rem 0.65rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .admin-sidebar__section { display: block; } .admin-sidebar__link { margin-bottom: 0.15rem; } .admin-sidebar__footer { border-top: 1px solid var(--border); padding: 0.75rem 1rem 0; } .admin-sidebar__logout { width: 100%; } .admin-topbar__menu-btn { display: inline-flex; } .admin-topbar__profile-name, .admin-topbar__chev { display: none; } .admin-topbar__profile { gap: 0; padding: 0.15rem; justify-content: center; border-radius: 50%; } } @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .admin-sidebar, .admin-nav-backdrop { transition: none; } } .admin-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .admin-panel__title { margin: 0; font-size: 1.05rem; font-weight: 600; } .admin-panel__empty { margin: 0; font-size: 0.92rem; } .admin-feed { list-style: none; margin: 0; padding: 0; } .admin-feed__item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .admin-feed__item:last-child { border-bottom: none; } .admin-feed__time { font-size: 0.75rem; color: var(--muted); } .admin-quick-actions { display: grid; grid-template-columns: 1fr; gap: 0.65rem; } .admin-quick-actions__btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); text-decoration: none; font-weight: 500; transition: background 0.15s, border-color 0.15s; } .admin-quick-actions__btn:hover { background: rgba(128, 128, 128, 0.08); text-decoration: none; } .admin-quick-actions__btn i { color: var(--accent); width: 1.25rem; text-align: center; } .admin-form-card { margin-bottom: 1.5rem; padding: 1.25rem 1.35rem; } .admin-form-card__title { margin: 0 0 0.35rem; font-size: 1.1rem; } .admin-form-card__hint { margin: 0 0 1rem; font-size: 0.88rem; } .admin-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.85rem 1rem; } .admin-form-grid .admin-field--full { grid-column: 1 / -1; } .admin-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); } .admin-field span { font-weight: 600; } .admin-form-actions { margin: 1.15rem 0 0; } .admin-settings-form__row { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.75rem; } .admin-settings-form__row span { line-height: 1.4; padding-top: 0.1rem; } /* Admin profile (modern layout) */ .admin-profile-page__hero { margin-bottom: 1.25rem; } .admin-profile-page__title { margin-bottom: 0.35rem; } .admin-profile-page__subtitle { margin: 0; font-size: 0.95rem; } .admin-profile-layout { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; } @media (max-width: 900px) { .admin-profile-layout { grid-template-columns: 1fr; } } .admin-profile-lower { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 380px); gap: 1.25rem; align-items: start; } @media (max-width: 900px) { .admin-profile-lower { grid-template-columns: 1fr; } } .admin-profile-card { margin-bottom: 0; } .admin-profile-card__head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .admin-profile-card__head-icon { color: var(--accent); font-size: 0.95rem; opacity: 0.95; } .admin-profile-card__title { margin: 0; font-size: 1.05rem; font-weight: 600; } .admin-profile-card__alert { margin-bottom: 0.75rem; } .admin-profile-card--photo .admin-profile-card__head { justify-content: center; } .admin-profile-photo-block { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 1rem; width: 100%; text-align: center; } .admin-profile-photo-block__preview { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-elevated); border: 2px solid var(--border); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); } .admin-profile-photo-block__img { width: 100%; height: 100%; object-fit: cover; display: block; } .admin-profile-photo-block__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 700; color: #fff; background: linear-gradient(145deg, var(--accent) 0%, #7c5cff 55%, #5b8cff 100%); } .admin-profile-photo-block__actions { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 0; width: 100%; } .admin-profile-photo-form__pick { cursor: pointer; gap: 0.4rem; } .admin-profile-photo-remove-form { margin: 0; display: flex; justify-content: center; width: 100%; } .admin-profile-photo-form { display: flex; justify-content: center; width: 100%; } .admin-profile-photo-remove { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; border: none; background: none; color: var(--danger); font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; } .admin-profile-photo-remove:hover { text-decoration: underline; } .admin-profile-photo-hint { margin: 0.25rem auto 0; font-size: 0.78rem; max-width: 18rem; text-align: center; } .admin-profile-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 640px) { .admin-profile-form-grid { grid-template-columns: 1fr; } } .admin-profile-form-actions { display: flex; justify-content: flex-end; margin-top: 1.25rem; } .admin-profile-form-actions .btn { gap: 0.45rem; } .admin-profile-password-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 960px) { .admin-profile-password-grid { grid-template-columns: 1fr; } } .admin-field__hint { display: block; margin-top: 0.25rem; font-size: 0.78rem; font-weight: 400; } .admin-profile-meta { margin: 0; } .admin-profile-meta__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .admin-profile-meta__row:last-child { border-bottom: none; } .admin-profile-meta dt { margin: 0; color: var(--muted); font-weight: 500; } .admin-profile-meta dd { margin: 0; text-align: right; font-weight: 600; color: var(--text); } .admin-user-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .admin-pending-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* Bell dropdown (latest activity) */ .admin-topbar__notify { position: relative; } .admin-topbar__notify > summary { list-style: none; cursor: pointer; } .admin-topbar__notify > summary::-webkit-details-marker { display: none; } .admin-topbar__notify-btn { pointer-events: none; } .admin-topbar__notify-panel { position: absolute; right: 0; top: calc(100% + 0.35rem); width: min(360px, calc(100vw - 2rem)); max-height: min(70vh, 420px); display: flex; flex-direction: column; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); z-index: 120; } /* Narrow screens: panel was anchored to the narrow bell wrapper + wide min-width, so it overflowed left. Pin to the viewport below the sticky admin header instead. */ @media (max-width: 900px) { .admin-topbar__notify-panel { position: fixed; left: max(0.75rem, env(safe-area-inset-left)); right: max(0.75rem, env(safe-area-inset-right)); top: var(--admin-mobile-header-offset, 7.5rem); width: auto; max-height: min(70vh, calc(100vh - var(--admin-mobile-header-offset, 7.5rem) - 1.25rem)); max-height: min(70vh, calc(100dvh - var(--admin-mobile-header-offset, 7.5rem) - 1.25rem)); z-index: 125; } } .admin-topbar__notify-head { padding: 0.65rem 0.85rem; font-weight: 600; font-size: 0.9rem; border-bottom: 1px solid var(--border); } .admin-topbar__notify-empty { margin: 0; padding: 1rem 0.85rem; font-size: 0.88rem; } .admin-topbar__notify-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; } .admin-topbar__notify-list li { border-bottom: 1px solid var(--border); } .admin-topbar__notify-list li:last-child { border-bottom: none; } .admin-topbar__notify-item { display: block; padding: 0.55rem 0.85rem; text-decoration: none; color: var(--text); transition: background 0.12s; } .admin-topbar__notify-item:hover { background: var(--bg-elevated); text-decoration: none; } .admin-topbar__notify-item-meta { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.2rem; } .admin-topbar__notify-item-text { font-size: 0.85rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .admin-topbar__notify-all { display: block; padding: 0.6rem 0.85rem; text-align: center; font-size: 0.88rem; font-weight: 600; color: var(--accent); text-decoration: none; border-top: 1px solid var(--border); background: var(--bg-elevated); } .admin-topbar__notify-all:hover { text-decoration: none; filter: brightness(1.08); } /* Push opt-in modal (admin) */ body.admin-push-modal-open { overflow: hidden; } .admin-push-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem; } .admin-push-modal[hidden] { display: none !important; } .admin-push-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); cursor: pointer; } .admin-push-modal__card { position: relative; z-index: 1; width: min(420px, 100%); padding: 1.35rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } .admin-push-modal__title { margin: 0 0 0.65rem; font-size: 1.15rem; font-weight: 600; } .admin-push-modal__text { margin: 0 0 0.75rem; font-size: 0.92rem; line-height: 1.5; color: var(--text); } .admin-push-modal__hint { margin: 0 0 1rem; font-size: 0.82rem; line-height: 1.45; } .admin-push-modal__hint code { font-size: 0.78rem; } .admin-push-modal__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } /* Admin users modals (add user + bulk import) */ body.admin-modal-open { overflow: hidden; } .admin-page__head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .admin-modal-open__icon { margin-right: 0.4rem; } .admin-modal { position: fixed; inset: 0; z-index: 301; display: flex; align-items: center; justify-content: center; padding: 1rem; } .admin-modal[hidden] { display: none !important; } .admin-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 12, 24, 0.62); backdrop-filter: blur(4px); cursor: pointer; } .admin-modal__card { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(960px, 100%); max-height: min(92vh, 900px); padding: 1.25rem 1.35rem 1.35rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); outline: none; } .admin-modal__card--elevated { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 24px 48px -12px rgba(0, 0, 0, 0.45); } .admin-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; flex-shrink: 0; margin-bottom: 0.35rem; } .admin-modal__head-text { min-width: 0; } .admin-modal__title { margin: 0 0 0.35rem; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; } .admin-modal__hint { margin: 0; font-size: 0.88rem; line-height: 1.45; } .admin-modal__close { flex-shrink: 0; min-width: 2.5rem; padding: 0.45rem 0.5rem; line-height: 1; border-radius: 10px; } .admin-modal__body { overflow-y: auto; flex: 1; min-height: 0; padding-right: 0.15rem; } .admin-modal__body .admin-form-actions { margin-bottom: 0; } /* Bulk import modal — modern header + download strip */ .admin-modal__card--bulk { width: min(520px, 100%); max-height: min(88vh, 720px); padding: 0; overflow: hidden; } .admin-bulk-modal__hero { display: flex; align-items: flex-start; gap: 1rem; padding: 1.35rem 1.35rem 1rem; background: linear-gradient( 135deg, rgba(91, 140, 255, 0.14) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(15, 23, 42, 0) 100% ); border-bottom: 1px solid var(--border); } .admin-bulk-modal__hero-icon { flex-shrink: 0; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.35rem; color: var(--accent); background: rgba(91, 140, 255, 0.12); border: 1px solid rgba(91, 140, 255, 0.22); } .admin-bulk-modal__hero-text { flex: 1; min-width: 0; } .admin-bulk-modal__hero .admin-modal__close { margin-left: auto; align-self: flex-start; } .admin-bulk-modal__hero .admin-modal__title { margin-bottom: 0.4rem; } .admin-bulk-modal__hero .admin-modal__hint { font-size: 0.9rem; opacity: 0.92; } .admin-modal__body--bulk { padding: 1.25rem 1.35rem 1.35rem; } .admin-bulk-modal__download { margin-bottom: 1.25rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px dashed rgba(128, 128, 128, 0.35); background: rgba(128, 128, 128, 0.06); } .admin-bulk-modal__download-btn { display: inline-flex; align-items: center; gap: 0.45rem; } .admin-bulk-modal__download-note { margin: 0.75rem 0 0; font-size: 0.82rem; line-height: 1.5; } .admin-bulk-modal__download-note strong { font-weight: 600; color: var(--text); } .admin-field--file .admin-bulk-modal__file { padding: 0.55rem 0.65rem; } .admin-bulk-modal__actions { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .admin-bulk-modal__actions .btn i { margin-right: 0.35rem; } /* Notifications feed */ .admin-notifications-list { list-style: none; margin: 0; padding: 0; } .admin-notifications-list__item { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); scroll-margin-top: 5rem; } .admin-notifications-list__item:last-child { border-bottom: none; } .admin-notifications-list__time { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.35rem; } .admin-notifications-list__action { display: inline-block; margin-bottom: 0.35rem; } .admin-notifications-list__summary { margin: 0; font-size: 0.92rem; line-height: 1.45; } .admin-user-form { flex-wrap: wrap; } .inline-form { display: inline; } .admin-empty { padding: 2rem 1.5rem; text-align: center; } .admin-empty__p { padding: 1rem 1.25rem; margin: 0; text-align: left; } .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .badge--ok { background: rgba(62, 207, 142, 0.15); color: var(--success); } .badge--warn { background: rgba(240, 113, 120, 0.12); color: var(--danger); } .badge--muted { background: rgba(128, 128, 128, 0.12); color: var(--muted); } .activity-code { font-size: 0.78rem; padding: 0.15rem 0.4rem; border-radius: 4px; background: var(--bg-elevated); border: 1px solid var(--border); } .nowrap { white-space: nowrap; } .table--activity td { vertical-align: top; } /* Class points — teacher scanner + student QR */ .class-points-qr-wrap { width: 100%; max-width: min(420px, 100%); margin: 0 auto; border-radius: 12px; overflow: hidden; background: #0a0a12; border: 1px solid var(--border); aspect-ratio: 1; min-height: 200px; max-height: min(85vw, 420px); } .class-points-qr { width: 100% !important; height: 100% !important; min-height: 200px; } .class-points-qr video { width: 100% !important; height: 100% !important; object-fit: cover; } .class-points-qr canvas { max-width: 100% !important; } .class-points-preview { margin-top: 0.75rem; font-size: 0.95rem; } .class-points-preview--ok { color: var(--ok, #2d8a56); } .class-points-preview--err { color: var(--danger, #c44); } .student-id-qr { margin-top: 1rem; } .student-id-qr img { display: block; } .class-points-id-display code { font-size: 1.1rem; } .admin-inline-id-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .admin-student-id-input { min-width: 8rem; max-width: 12rem; } @media (max-width: 900px) { .admin-student-id-input { max-width: 100%; } } /* Teacher class points page */ .class-points-page__head { flex-wrap: wrap; } .class-points-pool-banner { margin-bottom: 1.25rem; } .class-points-pool-banner__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; justify-content: space-between; } .class-points-pool-banner__label { margin: 0 0 0.25rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .class-points-pool-banner__value { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; } .class-points-pool-banner__hint { margin: 0.5rem 0 0; font-size: 0.85rem; max-width: 42rem; } .class-points-scan-card { margin-bottom: 1.25rem; } .class-points-form__grid { width: 100%; } @media (min-width: 720px) { .class-points-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-field--full { grid-column: 1 / -1; } } .class-points-form__actions { flex-wrap: wrap; gap: 0.5rem; } .class-points-scan-actions { margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .table--compact td, .table--compact th { padding: 0.45rem 0.65rem; font-size: 0.88rem; } /* Scan modal (teacher class points) */ body.cp-scan-modal-open { overflow: hidden; } .cp-scan-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: max(0.75rem, env(safe-area-inset-bottom)); } .cp-scan-modal[hidden] { display: none !important; } .cp-scan-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); cursor: pointer; } .cp-scan-modal__card { position: relative; z-index: 1; width: min(440px, 100%); max-height: min(90vh, 760px); overflow-y: auto; padding: 1.35rem 1.4rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); margin: auto; } .cp-scan-modal__hero { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.1rem; } .cp-scan-modal__avatar { flex-shrink: 0; width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text); background: linear-gradient(145deg, rgba(124, 92, 255, 0.35), rgba(124, 92, 255, 0.12)); border: 1px solid rgba(124, 92, 255, 0.35); } .cp-scan-modal__identity { min-width: 0; flex: 1; } .cp-scan-modal__title { margin: 0 0 0.25rem; font-size: 1.2rem; font-weight: 700; line-height: 1.25; } .cp-scan-modal__email { margin: 0 0 0.6rem; font-size: 0.88rem; word-break: break-word; } .cp-scan-modal__pool-badge { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.65rem; padding: 0.4rem 0.65rem; border-radius: 8px; background: var(--bg-elevated); border: 1px solid var(--border); font-size: 0.82rem; } .cp-scan-modal__pool-label { color: var(--muted); font-weight: 500; } .cp-scan-modal__pool-value { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.95rem; } .cp-scan-modal__profile-block { margin-bottom: 1rem; } .cp-scan-modal__profile-block[hidden] { display: none !important; } .cp-scan-modal__details { display: grid; gap: 0.5rem; padding: 0.65rem 0.75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated); } .cp-scan-modal__detail-row { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: 0.5rem 0.75rem; align-items: start; font-size: 0.86rem; line-height: 1.35; } @media (max-width: 400px) { .cp-scan-modal__detail-row { grid-template-columns: 1fr; gap: 0.15rem; } .cp-scan-modal__detail-label { font-size: 0.72rem; } } .cp-scan-modal__detail-label { color: var(--muted); font-weight: 600; } .cp-scan-modal__detail-value { word-break: break-word; color: var(--text); } .cp-scan-modal__section-label { margin: 0 0 0.45rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; } .cp-scan-modal__table { margin: 0; } .cp-scan-modal__table-wrap { margin-bottom: 1.1rem; max-height: 36vh; overflow: auto; border-radius: 8px; border: 1px solid var(--border); } .cp-scan-modal__table-wrap .table { margin: 0; } #cp-modal-class-wrap[hidden] { display: none !important; } .cp-scan-modal__form .admin-field { margin-bottom: 0.75rem; } .cp-scan-modal__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; } @media (max-width: 520px) { .class-points-qr-wrap { max-width: none; max-height: min(92vw, 100vw); border-radius: 10px; } .class-points-qr { min-height: min(72vw, 320px); } .cp-scan-modal__actions { flex-direction: column; align-items: stretch; } .cp-scan-modal__actions .btn { width: 100%; justify-content: center; } } .admin-teacher-pool { font-weight: 600; margin-right: 0.35rem; } .admin-teacher-pool-grant { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.35rem; } .admin-teacher-pool-grant__input { width: 5.5rem; min-width: 0; } /* Admin users — modern data table */ .admin-users-panel.card { padding: 0; overflow: hidden; } .admin-users-panel__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.35rem 1.5rem 1rem; border-bottom: 1px solid var(--border); } .admin-users-panel__intro { flex: 1 1 12rem; min-width: 0; } .admin-users-panel__search-shell { flex: 1 1 14rem; max-width: 22rem; min-width: min(100%, 12rem); } .admin-users-panel__title { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; } .admin-users-panel__lead { margin: 0; font-size: 0.88rem; line-height: 1.45; max-width: 40rem; } .admin-users-panel__empty { margin: 0; padding: 2rem 1.5rem; text-align: center; } .admin-users-panel__pagination { padding: 1rem 1.5rem 1.35rem; border-top: 1px solid var(--border); } .admin-users-panel__pagination .pagination-nav { margin-top: 0; } .admin-users-panel__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; } .admin-users-panel__scroll .table { margin: 0; } .table--admin-users { min-width: 780px; font-size: 0.9rem; line-height: 1.45; } .table--admin-users th, .table--admin-users td { padding: 0.8rem 1rem; vertical-align: middle; border-bottom: 1px solid rgba(128, 128, 128, 0.18); } .table--admin-users thead th { position: sticky; top: 0; z-index: 1; padding-top: 0.75rem; padding-bottom: 0.75rem; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100% ); background-color: var(--bg-elevated); box-shadow: 0 1px 0 var(--border); color: var(--muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; } .table--admin-users tbody tr { transition: background-color 0.14s ease; } .table--admin-users tbody tr:hover { background: rgba(91, 140, 255, 0.06); } .table--admin-users tbody tr:focus-within { background: rgba(91, 140, 255, 0.08); } .table--admin-users tbody tr:last-child td { border-bottom: none; } .admin-users-panel__name { font-weight: 500; color: var(--text); } .admin-users-panel__email-text { word-break: break-word; } .table--admin-users .nowrap { white-space: normal; } @media (min-width: 1100px) { .table--admin-users td:nth-child(3) { white-space: nowrap; } } .admin-users-panel__actions-cell { vertical-align: middle; width: 1%; white-space: nowrap; } .admin-user-toolbar { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.35rem; border-radius: 12px; background: rgba(128, 128, 128, 0.08); border: 1px solid rgba(128, 128, 128, 0.2); } .admin-user-toolbar__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; padding: 0; border: none; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .admin-user-toolbar__btn:hover { background: rgba(91, 140, 255, 0.12); color: var(--text); } .admin-user-toolbar__btn--key:hover { background: rgba(234, 179, 8, 0.15); color: #fbbf24; } .admin-user-toolbar__btn--danger:hover { background: rgba(220, 38, 38, 0.15); color: #f87171; } .admin-users-panel__pending-inline { margin-top: 0.45rem; display: flex; flex-wrap: wrap; gap: 0.35rem; } .admin-modal--user-actions { z-index: 302; } .admin-modal__card--wide-edit { width: min(960px, 100%); max-height: min(92vh, 900px); } .admin-modal__card--user-profile { width: min(520px, 100%); } .admin-user-view { margin: 0; } .admin-user-view__hero { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.15rem; padding: 1.1rem 1rem 1.15rem; border-radius: 12px; border: 1px solid rgba(128, 128, 128, 0.2); background: linear-gradient( 135deg, rgba(91, 140, 255, 0.12) 0%, rgba(139, 92, 246, 0.08) 45%, rgba(15, 23, 42, 0) 100% ); } .admin-user-view__avatar { width: 5.5rem; height: 5.5rem; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent) 0%, #7c5cff 100%); color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45); } .admin-user-view__avatar--photo { padding: 0; overflow: hidden; background: var(--bg-elevated); border: 2px solid rgba(255, 255, 255, 0.1); } .admin-user-view__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .admin-user-view__identity { min-width: 0; flex: 1; } .admin-user-view__name { margin: 0 0 0.45rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; word-break: break-word; } .admin-user-view__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; } .admin-user-view__role-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; text-transform: capitalize; letter-spacing: 0.03em; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); } .admin-user-view-dl { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: 0.5rem 1rem; margin: 0; font-size: 0.9rem; } .admin-user-view__dl.admin-user-view-dl { padding-top: 0.15rem; } .admin-user-view-dl dt { margin: 0; color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .admin-user-view-dl dd { margin: 0; word-break: break-word; } .admin-user-delete__warn { margin: 0 0 1rem; line-height: 1.5; color: var(--text); } .admin-edit-teacher-pool { margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid var(--border); } .admin-edit-teacher-pool__title { margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .admin-edit-teacher-pool__hint { margin: 0 0 0.75rem; font-size: 0.82rem; line-height: 1.45; } .admin-edit-teacher-pool__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; } .admin-edit-teacher-pool__row .admin-teacher-pool { font-size: 1.1rem; font-weight: 600; min-width: 4rem; } .admin-edit-teacher-pool__grant.admin-teacher-pool-grant { margin-top: 0; }