/* staffdata_style.css - shared styles for the staffdata portal. No bold: emphasis by size only. */

:root {
    --sd-purple: #2c1b4d;
    --sd-purple-2: #3d276b;
    --sd-purple-muted: #5f4b8b;
    --sd-yellow: #f1c40f;
    --sd-yellow-2: #f39c12;
    --sd-grey: #7f8c8d;
}

body {
    background: #f5f6fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
b, strong, label, .btn, .form-label, .badge, .alert {
    font-weight: 400;
}

/* Layout */
.sd-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sd-login  { width: 100%; max-width: 420px; }
.sd-page   { max-width: 820px; }

.card { border: none; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); }

.sd-header {
    background: var(--sd-purple);
    color: #fff;
    border-radius: 12px;
    border-bottom: 4px solid var(--sd-yellow);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.sd-header .sd-sub { color: rgba(255, 255, 255, 0.65); }

/* Text */
.sd-yellow { color: var(--sd-yellow) !important; }
.sd-purple { color: var(--sd-purple) !important; }
.sd-label  { color: var(--sd-purple-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.8px; }
.sd-section { color: var(--sd-purple-muted); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; }

/* Buttons */
.sd-btn-primary { background: var(--sd-purple); color: #fff; border: 1px solid var(--sd-purple); }
.sd-btn-primary:hover, .sd-btn-primary:focus { background: var(--sd-purple-2); color: var(--sd-yellow); border-color: var(--sd-purple-2); }

.sd-btn-accent { background: var(--sd-yellow); color: var(--sd-purple); border: 1px solid var(--sd-yellow); }
.sd-btn-accent:hover, .sd-btn-accent:focus { background: var(--sd-yellow-2); color: var(--sd-purple); border-color: var(--sd-yellow-2); }

.sd-btn-outline { color: var(--sd-yellow); border: 1px solid var(--sd-yellow); background: transparent; }
.sd-btn-outline:hover, .sd-btn-outline:focus { background: var(--sd-yellow); color: var(--sd-purple); }

/* Option toggles (admin, editable) */
.sd-opt { border: 1px solid #dee2e6; background: #fff; color: var(--sd-grey); }
.sd-opt:hover { color: var(--sd-purple); border-color: var(--sd-purple-muted); background: #fff; }
.btn-check:checked + .sd-opt { background: var(--sd-purple); color: var(--sd-yellow); border-color: var(--sd-purple); }
.btn-check:focus-visible + .sd-opt { box-shadow: 0 0 0 0.2rem rgba(241, 196, 15, 0.5); }

/* Option chips (teacher, read-only) */
.sd-chip { text-align: center; padding: 0.45rem 0.75rem; border-radius: 0.375rem; border: 1px solid #dee2e6; }
.sd-chip-on  { background: var(--sd-purple); color: var(--sd-yellow); border-color: var(--sd-purple); }
.sd-chip-off { background: #fff; color: var(--sd-grey); opacity: 0.75; }

/* Hub cards */
.sd-hub-card { transition: transform 0.2s, box-shadow 0.2s; }
.sd-hub-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(44, 27, 77, 0.12); }
.sd-icon { width: 55px; height: 55px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.sd-icon-purple { background: rgba(44, 27, 77, 0.1); color: var(--sd-purple); }
.sd-icon-green  { background: #d1e7dd; color: #146c43; }