/* ============================================================
   STUDENT PORTAL — SENIOR-FOCUSED OVERRIDES
   Loads AFTER student.css. Only overrides visual rules —
   no IDs/classes that student.js depends on are touched.
   ============================================================ */

:root {
    --spacing: 22px;
    --radius: 18px;
    /* higher-contrast text than the original palette */
    --text-primary: #14261f;
    --text-secondary: #3d4f45;
    --border-color: #d8e6de;
}
[data-theme="dark"] {
    --text-primary: #f3f7f4;
    --text-secondary: #d3e0d8;
}

/* Base type: bump everything up a step and raise line-height */
body {
    font-size: 18px;
    line-height: 1.65;
}

/* ---------- Login screen ---------- */

.login-card h2 {
    font-size: 26px;
}
.login-card p.sub {
    font-size: 16px;
}
.field-group label {
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}
.field-group input {
    padding: 16px 16px;
    font-size: 20px;
    border-radius: 14px;
    border-width: 2px;
    min-height: 56px;
}
.login-btn {
    min-height: 58px;
    font-size: 19px;
    border-radius: 14px;
}
.login-error {
    font-size: 16px;
}
/* the tiny fine-print policy line under the login card */
#loginOverlay > .login-card > div[style*="font-size:11px"] {
    font-size: 15px !important;
    opacity: 0.85 !important;
}
#loginOverlay a[href="admin-login.html"] {
    font-size: 15px !important;
}

/* ---------- Sidebar (desktop) ---------- */
.sidebar-brand .logo-icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
}
.sidebar-brand h1 {
    font-size: 21px;
}
.nav-item .nav-link {
    padding: 16px 16px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 14px;
    gap: 16px;
}
.nav-item .nav-link i {
    font-size: 20px;
    width: 24px;
}

/* ---------- Header ---------- */
.header {
    padding: 18px var(--spacing);
    border-width: 2px;
}
.header-left .menu-toggle {
    font-size: 26px;
    min-width: 48px;
    min-height: 48px;
}
.header-left .breadcrumb {
    font-size: 18px;
    font-weight: 600;
}
.header-right .theme-toggle {
    font-size: 22px;
    padding: 8px;
}
.user-profile .avatar {
    width: 44px;
    height: 44px;
    font-size: 18px;
}
.user-profile .username {
    font-size: 17px;
    font-weight: 600;
}

/* ---------- Bottom nav (mobile): bigger, labeled, thumb-friendly ---------- */
.bottom-nav {
    padding: 10px 6px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top-width: 2px;
}
.bottom-nav .nav-link {
    font-size: 14px;
    font-weight: 700;
    padding: 10px 4px;
    gap: 4px;
    min-height: 64px;
    justify-content: center;
}
.bottom-nav .nav-link i {
    font-size: 24px;
}
.bottom-nav .nav-link.active {
    background: var(--primary-light);
    border-radius: 14px;
}

/* ---------- Greeting banner ---------- */
.greeting-banner h3 {
    font-size: 24px;
}
.greeting-banner p {
    font-size: 17px;
}

/* ---------- Quick links / dashboard rows ---------- */
.quick-link-row {
    padding: 18px 16px;
    min-height: 72px;
    gap: 16px;
}
.quick-link-icon {
    width: 52px;
    height: 52px;
    font-size: 20px;
}
.quick-link-label {
    font-size: 18px;
    font-weight: 700;
}
.quick-link-value {
    font-size: 17px;
    font-weight: 700;
}
.quick-link-arrow {
    font-size: 18px;
}

/* ---------- KPI cards (attendance / grades stats) ---------- */
.kpi-card {
    padding: 20px 16px;
}
.kpi-title {
    font-size: 14px;
    font-weight: 700;
}
.kpi-value {
    font-size: 30px;
}
.kpi-sub {
    font-size: 14px;
}

/* ---------- Cards / tables generally ---------- */
.card-header {
    font-size: 18px;
    font-weight: 700;
    padding: 16px 18px;
}
.card-body {
    font-size: 17px;
    padding: 18px;
}
table {
    font-size: 17px;
}
th, td {
    padding: 12px 10px !important;
}

/* ---------- Buttons everywhere ---------- */
.btn {
    font-size: 17px;
    padding: 14px 20px;
    min-height: 52px;
    border-radius: 14px;
    font-weight: 700;
}

/* ---------- Forms in modals (change pin, complaint) ---------- */
.form-control {
    font-size: 18px;
    padding: 14px 14px;
    min-height: 52px;
    border-radius: 12px;
}
.form-group label {
    font-size: 15px;
    font-weight: 700;
}

/* ---------- News / announcements ---------- */
.news-item-title {
    font-size: 18px;
    font-weight: 700;
}
.news-item-excerpt {
    font-size: 16px;
}
.news-badge, .news-link {
    font-size: 15px;
}

/* ---------- Help tooltips: make the (?) itself tappable at size ---------- */
.help-tip {
    font-size: 18px;
    padding: 4px;
}

/* ---------- Visible keyboard focus everywhere (accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
.quick-link-row:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   GURIGA (HOME / DASHBOARD) — rebuilt to match the calm,
   uncluttered look of the standalone demo: one accent palette
   instead of a rainbow of icon colors, flat cards, no gradients.
   Scoped to #section-dashboard so no other page is affected.
   ============================================================ */
#section-dashboard .greeting-banner {
    background: #EFF4EE;
    border: 2px solid #CFE0CB;
    border-radius: 20px;
    padding: 22px 24px;
}
#section-dashboard .greeting-banner h3 {
    font-size: 26px;
    font-weight: 800;
    color: #1B4332;
}
#section-dashboard .greeting-banner h3 i {
    display: none; /* drop the bulb icon — the wave emoji already carries it */
}
#section-dashboard .greeting-banner p {
    font-size: 17px;
    color: #4a4a45;
    margin-top: 6px;
}

/* Section label, matching the demo's "WAXA AAD RABTO INAAD EEGTO" eyebrow */
.dashboard-section-label {
    margin: 24px 2px 10px;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a82;
    font-weight: 700;
}

/* Quick links: flat cards, demo's exact per-category pastel icons */
#section-dashboard .quick-links-card {
    border: 2px solid var(--border-color);
    border-radius: 20px;
    box-shadow: none;
    margin-top: 4px;
}
#section-dashboard .quick-link-row {
    padding: 20px 18px;
    min-height: 78px;
    gap: 18px;
}
#section-dashboard .quick-link-row:active {
    background: #F1EFE7;
}
#section-dashboard .quick-link-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 24px;
}
#section-dashboard .quick-link-icon-fees {
    background: #E4EEFB;
    color: #1D4E89;
}
#section-dashboard .quick-link-icon-att {
    background: #E4F1E7;
    color: #1B4332;
}
#section-dashboard .quick-link-icon-grades {
    background: #F5EBDA;
    color: #B8862E;
}
#section-dashboard .quick-link-icon-timetable {
    background: #EDEAE3;
    color: #555;
}
#section-dashboard .quick-link-label {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0;
}
#section-dashboard .quick-link-value {
    font-size: 17px;
    font-weight: 700;
    color: #1B4332;
}
#section-dashboard .quick-link-arrow {
    font-size: 22px;
    opacity: 1;
    color: #b7b3a6;
}

/* News card: quiet, one accent color, no bright badge colors */
#section-dashboard .news-card {
    border: 2px solid var(--border-color);
    border-radius: 20px;
    box-shadow: none;
    margin-top: 18px;
}
#section-dashboard .news-header {
    background: #F5F3EC;
    padding: 16px 18px;
}
#section-dashboard .news-badge {
    background: #1D4E89;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 8px;
}
#section-dashboard .news-link {
    font-size: 16px;
    color: #1D4E89;
}
#section-dashboard .news-item {
    padding: 18px;
}
#section-dashboard .news-item-title {
    font-size: 18px;
}
#section-dashboard .news-item-excerpt {
    font-size: 16px;
    line-height: 1.55;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}
#section-dashboard .news-item-date {
    font-size: 14px;
}