/* Minimal styling - swap for your district's brand colors / a real framework as you like */
* { box-sizing: border-box; }
body { font-family: Segoe UI, Arial, sans-serif; margin: 0; background: #f4f6f8; color: #222; }

.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-box { background: #fff; padding: 32px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.1); width: 340px; }
.login-logo { display: block; height: 64px; max-height: 64px; width: auto; max-width: 64px; margin: 0 auto 16px; }
.login-box h1 { font-size: 20px; margin: 0 0 4px; }
.subtitle { color: #666; margin: 0 0 20px; font-size: 13px; }

.topbar { background: #1b3a57; color: #fff; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.topbar .district-logo { height: 36px; max-height: 36px; width: auto; max-width: 40px; background: #fff; padding: 2px; border-radius: 4px; display: block; }
.topbar .brand { font-weight: 600; }
.topbar nav a { color: #fff; text-decoration: none; margin-right: 16px; }
.topbar .user-info { margin-left: auto; font-size: 13px; }
.topbar a { color: #cfe3f5; }

.content { padding: 24px; max-width: 1100px; margin: 0 auto; }
.content-wide { max-width: 1600px; }

.field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.field label, .field span { font-size: 13px; font-weight: 600; color: #444; }
.field input, .field textarea, .field select { padding: 8px; border: 1px solid #ccd3d8; border-radius: 4px; font-size: 14px; }
.field-hint { font-size: 12px; color: #777; font-weight: normal; margin: -2px 0 2px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: 14px; color: #222; padding-top: 8px; }
.toolbar-checkbox { padding-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.field-wide { grid-column: 1 / -1; }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.page-actions { margin-bottom: 16px; }
.toolbar-label { font-size: 13px; color: #555; }
.data-grid { width: 100%; border-collapse: collapse; background: #fff; }
.data-grid th { background: #eef2f5; text-align: left; padding: 10px; font-size: 13px; }
.data-grid td { padding: 10px; border-top: 1px solid #eee; font-size: 14px; }

.app-icon { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; display: block; }
.icon-preview { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; margin-bottom: 4px; }
.modal-icon { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; vertical-align: middle; margin-right: 10px; }

.data-grid th a { color: #1b3a57; text-decoration: none; }
.data-grid th a:hover { text-decoration: underline; }
.parent-row { background: #ffffff; }
.child-row { background: #d9f2df; }
.status-retired { background: #fdeaea; color: #a12626; font-weight: 600; }
.toggle-icon { cursor: pointer; display: inline-block; width: 14px; font-size: 11px; color: #555; user-select: none; }
.nested-indent { color: #8a97a3; margin-right: 4px; }

.grade-checkboxes { font-size: 13px; }
.grade-checkboxes td { padding: 2px 10px 2px 0; }

.school-checkboxes { font-size: 13px; }
.school-checkboxes td { padding: 2px 16px 2px 0; }

.sso-radio td { padding: 2px 14px 2px 0; }

.btn-primary { display: inline-block; background: #1b6fd6; color: #fff; border: none; padding: 10px 18px; border-radius: 4px; cursor: pointer; font-size: 14px; text-decoration: none; }
.btn-secondary { display: inline-block; margin-left: 10px; color: #555; text-decoration: none; }
.error-message { display: block; background: #fdeaea; color: #a12626; padding: 8px 10px; border-radius: 4px; margin-bottom: 12px; font-size: 13px; }
.validation-error { color: #a12626; font-size: 12px; }

.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.modal-box {
    background: #fff; padding: 24px 28px; border-radius: 8px;
    max-width: 480px; width: 90%;
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.modal-box h3 { margin: 0 0 12px; }
.modal-box p { margin: 6px 0; font-size: 14px; }