/* =====================================================================
   SLAC Grading System - shared layout & admin sidebar
   Extends the existing green portal identity (portal-styles.css).
   ===================================================================== */

:root {
    --primary-green: #28a745;
    --dark-green: #1e7e34;
    --sidebar-width: 260px;
    --navbar-height: 78px;
}

body {
    font-family: "Poppins", sans-serif;
    background-color: #f5f7f6;
}

/* Offset all content below the fixed-top navbar. */
body { padding-top: var(--navbar-height); }

/* Pin the fixed navbar to a consistent height so the offset always matches. */
.navbar.fixed-top {
    min-height: var(--navbar-height);
    display: flex;
    align-items: center;
}

.navbar .avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    color: #fff;
    font-weight: 600;
}

/* ---- Admin app shell with sidebar ---- */
.app-shell { display: flex; min-height: calc(100vh - var(--navbar-height)); }

.app-sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: #ffffff;
    border-right: 1px solid #e6e9e8;
    position: fixed;
    top: var(--navbar-height);
    bottom: 0;
    left: 0;
    overflow-y: auto;
    z-index: 1020;
    transition: transform .25s ease;
}

.app-content {
    margin-left: var(--sidebar-width);
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sb-nav { padding: .75rem 0 2rem; }

.sb-section {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9aa2a0;
    font-weight: 600;
    padding: 1rem 1.25rem .35rem;
}

.sb-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1.25rem;
    color: #40514d;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease;
}
.sb-link i { width: 20px; text-align: center; color: #7d8a86; }
.sb-link:hover { background: #f0f7f2; color: var(--dark-green); }
.sb-link:hover i { color: var(--primary-green); }
.sb-link.active {
    background: #e8f5ec;
    color: var(--dark-green);
    border-left-color: var(--primary-green);
    font-weight: 600;
}
.sb-link.active i { color: var(--primary-green); }

/* ---- Admin page header bar ---- */
.page-header-bar {
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    color: #fff;
    padding: 1.75rem 0;
    margin-bottom: .5rem;
}

/* Ensure the main content region always has comfortable top breathing room
   under the header bar, regardless of the first child's own margins. */
.app-content > main { padding-top: 1.5rem; }

/* Public (non-sidebar) page header should not hug the fixed navbar. */
.page-header { padding: 2rem 0; }

/* ---- Cards / tables shared polish ---- */
.stat-card { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.stat-card .stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.card { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.card-header { border-radius: 12px 12px 0 0 !important; }
.table thead.table-success th { white-space: nowrap; }

.notif-list { max-height: 320px; overflow-y: auto; }
.notif-item { padding: .6rem 1rem; border-bottom: 1px solid #f1f1f1; }
.notif-item.unread { background: #f0f7f2; }
.notif-item .notif-title { font-weight: 600; font-size: .85rem; }
.notif-item .notif-msg { font-size: .8rem; color: #6c757d; }
.notif-item .notif-time { font-size: .72rem; color: #9aa2a0; }

/* Status badges (extends portal-styles). */
.badge-status { font-weight: 500; padding: .4em .7em; }

/* ---- Responsive sidebar ---- */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: 0 0 30px rgba(0,0,0,.15); }
    .app-sidebar.open { transform: translateX(0); }
    .app-content { margin-left: 0; }
}

/* Login / auth pages */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    padding: 2rem 1rem;
}
.auth-card { width: 100%; max-width: 440px; border-radius: 16px; }
.auth-logo { width: 72px; height: 72px; object-fit: contain; }

/* ---- Avatars used across dashboards / profiles ---- */
.avatar-lg {
    width: 64px; height: 64px; font-size: 1.5rem; font-weight: 600;
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
}
.avatar-xl {
    width: 90px; height: 90px; font-size: 2.25rem; font-weight: 700;
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
}

/* Subtle success surfaces (fallback for older Bootstrap builds) */
.bg-success-subtle { background-color: #e8f5ec !important; }
.text-success { color: var(--dark-green) !important; }

/* Print helpers */
@media print {
    .navbar, .app-sidebar, .page-header, .page-header-bar, footer, .no-print { display: none !important; }
    body { padding-top: 0; }
    .app-content { margin-left: 0; }
}