/* assets/shell.css
   Shared shell/layout/card/modal/toggle primitives for the school portal.
   Linked from every page that requires a school login. Page-specific
   widgets (results charts, upload dropzones, activation tables) stay in
   each page's own <style> block — only what was genuinely duplicated
   (and drifting) across pages lives here. */

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Lato', Arial, sans-serif;
    margin: 0;
    background: #E6F0FA;
}

/* ── Page shell: header (sticky, 64px) + row of [sidebar, content] ── */
body.has-shell { margin: 0; }
.ea-shell { display: flex; flex-direction: row; align-items: stretch; flex: 1; min-height: calc(100vh - 64px); }

.page-wrap { flex: 1; min-width: 0; max-width: 1280px; margin: 0 auto; padding: 32px 28px 40px; }
.page-wrap.page-wrap-narrow { max-width: 1180px; }
.page-title { font-size: 22px; font-weight: 700; color: #2c3e50; margin: 0 0 24px; }

/* ── Cards ── */
.card { background: #fff; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); overflow: hidden; margin-bottom: 24px; }
.card:last-child { margin-bottom: 0; }
.card-header { background: #2c3e50; padding: 16px 24px; display: flex; align-items: center; gap: 10px; }
.card-header h2 { margin: 0; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.card-header i { font-size: 14px; color: rgba(255,255,255,0.6); }
.card-header .step-badge { margin-left: auto; background: rgba(255,255,255,0.15); border-radius: 980px; padding: 2px 12px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.9); }
.card-body { padding: 24px; }

/* ── Modals ── */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.45); align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal-box { background: #fff; border-radius: 16px; box-shadow: 0 12px 48px rgba(0,0,0,0.22); width: 100%; max-width: 420px; overflow: hidden; }
.modal-head { background: #2c3e50; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { margin: 0; color: #fff; font-size: 15px; font-weight: 700; }
.modal-close { all: unset; cursor: pointer; color: rgba(255,255,255,0.6); font-size: 18px; line-height: 1; transition: color 0.15s; }
.modal-close:hover { color: #fff; }
/* A modal taller than the window used to be unusable: .modal-overlay centres it
   and .modal-box clips with overflow:hidden, so the excess was cut off equally
   top and bottom and the buttons at the end simply could not be reached or
   scrolled to. Capping and scrolling the BODY fixes that while leaving
   .modal-box alone — deliberately, because results.php and students.php define
   their own .modal-box variants with a different internal structure (bare
   h3/p children, and one at height:80vh) that a flex-column would disturb.
   Neither of those pages uses .modal-body, so this rule cannot reach them.
   The subtraction is the overlay's 24px padding top+bottom, plus the ~60px
   .modal-head that sits above this element. */
.modal-body { padding: 28px 24px; overflow-y: auto; max-height: calc(100vh - 48px - 60px); }
.modal-field { margin-bottom: 18px; }
.modal-field label { display: block; font-size: 13px; font-weight: 600; color: #2c7a4b; margin-bottom: 6px; }
.modal-field input { width: 100%; padding: 11px 14px; border: 1px solid #dde1e7; border-radius: 9px; font-size: 15px; color: #2c3e50; background: #fafbfc; transition: border-color 0.2s, box-shadow 0.2s; }
.modal-field input:focus { outline: none; border-color: #27ae60; box-shadow: 0 0 0 3px rgba(39,174,96,0.15); background: #fff; }
.modal-flash { display: none; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 9px; font-size: 13px; font-weight: 500; margin-bottom: 18px; }
.modal-flash.error   { display: flex; background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.modal-flash.success { display: flex; background:#dcfce7; color:#166534; border:1px solid #86efac; }
.modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.modal-actions .btn-save-pw { flex: 1; width: auto; }

.btn-save-pw {
    all: unset; box-sizing: border-box;
    display: block; width: 100%; padding: 13px;
    background: #27ae60; color: #fff;
    text-align: center; border-radius: 10px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.btn-save-pw:hover  { background: #219653; }
.btn-save-pw:active { transform: scale(0.98); }
.btn-save-pw:disabled { background: #a0c4a8; cursor: default; }

/* ── Toggle switch ── */
.ea-toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.ea-toggle input { opacity: 0; width: 0; height: 0; }
.ea-toggle-slider { position: absolute; inset: 0; background: #d1d9e0; border-radius: 999px; cursor: pointer; transition: background 0.2s; }
.ea-toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.2s; }
.ea-toggle input:checked + .ea-toggle-slider { background: #27ae60; }
.ea-toggle input:checked + .ea-toggle-slider::before { transform: translateX(20px); }
.ea-toggle input:disabled + .ea-toggle-slider { opacity: 0.6; cursor: default; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 36px 24px; color: #8e8e93; font-size: 14px; }
.empty-state i { font-size: 30px; opacity: 0.3; display: block; margin-bottom: 10px; }