:root {
    --sipras-primary: #0f7a5c;
    --sipras-primary-dark: #0a5e47;
    --sipras-primary-soft: #e9f7f2;
    --sipras-accent: #f3b63f;
    --sipras-bg: #f5f7f9;
    --sipras-text: #24312d;
    --sipras-muted: #6b7a75;
    --sipras-border: #e1e8e5;
    --sidebar-width: 270px;
}

* { box-sizing: border-box; }
body {
    background: var(--sipras-bg);
    color: var(--sipras-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    min-height: 100vh;
}
a { text-decoration: none; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: linear-gradient(165deg, var(--sipras-primary) 0%, var(--sipras-primary-dark) 100%);
    color: #fff;
    z-index: 1030;
    overflow-y: auto;
    box-shadow: 8px 0 30px rgba(12, 78, 58, .10);
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255,255,255,.15);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    border: 1px solid rgba(255,255,255,.18);
}
.brand-title { font-weight: 800; line-height: 1.1; }
.brand-subtitle { font-size: .74rem; color: rgba(255,255,255,.72); margin-top: 3px; }
.sidebar-user {
    margin: 18px 16px 8px;
    padding: 14px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
}
.user-avatar {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: grid;
    place-items: center;
    font-weight: 800;
}
.sidebar .nav-label {
    color: rgba(255,255,255,.52);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .67rem;
    font-weight: 700;
    margin: 22px 22px 8px;
}
.sidebar-nav { padding: 0 12px 24px; }
.sidebar-nav .nav-link {
    color: rgba(255,255,255,.80);
    padding: 11px 13px;
    margin: 3px 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: .2s ease;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,.14);
    transform: translateX(2px);
}
.sidebar-nav .nav-link i { width: 21px; text-align: center; font-size: 1.05rem; }
.main-wrapper { margin-left: var(--sidebar-width); min-height: 100vh; }
.topbar {
    height: 72px;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--sipras-border);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.page-content { padding: 28px; }
.page-title { font-weight: 800; margin: 0; letter-spacing: -.02em; }
.page-subtitle { color: var(--sipras-muted); margin-top: 4px; }
.card {
    border: 1px solid var(--sipras-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(27, 68, 54, .05);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--sipras-border);
    padding: 18px 20px;
}
.card-body { padding: 20px; }
.stat-card {
    overflow: hidden;
    position: relative;
    height: 100%;
}
.stat-card::after {
    content: "";
    position: absolute;
    right: -25px;
    top: -28px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--sipras-primary-soft);
}
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--sipras-primary-soft);
    color: var(--sipras-primary);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    position: relative;
    z-index: 2;
}
.stat-value { font-weight: 800; font-size: 1.65rem; margin-top: 14px; line-height: 1; }
.stat-label { color: var(--sipras-muted); font-size: .87rem; margin-top: 6px; }
.btn-primary {
    --bs-btn-bg: var(--sipras-primary);
    --bs-btn-border-color: var(--sipras-primary);
    --bs-btn-hover-bg: var(--sipras-primary-dark);
    --bs-btn-hover-border-color: var(--sipras-primary-dark);
    --bs-btn-active-bg: var(--sipras-primary-dark);
    --bs-btn-active-border-color: var(--sipras-primary-dark);
    border-radius: 10px;
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--sipras-primary);
    --bs-btn-border-color: var(--sipras-primary);
    --bs-btn-hover-bg: var(--sipras-primary);
    --bs-btn-hover-border-color: var(--sipras-primary);
    border-radius: 10px;
}
.btn { border-radius: 10px; }
.form-control, .form-select {
    border-radius: 10px;
    border-color: #d8e2de;
    padding: .68rem .85rem;
}
.form-control:focus, .form-select:focus {
    border-color: #5eb396;
    box-shadow: 0 0 0 .22rem rgba(15,122,92,.12);
}
.form-label { font-weight: 650; font-size: .88rem; }
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .85rem .75rem; border-bottom-color: #e8edeb; }
.table thead th {
    color: var(--sipras-muted);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
}
.badge { padding: .45rem .62rem; font-weight: 650; border-radius: 999px; }
.badge-soft-success { background: #e6f7ef; color: #0a7750; }
.badge-soft-warning { background: #fff4d9; color: #936100; }
.badge-soft-danger { background: #fde9e8; color: #b22f2a; }
.badge-soft-info { background: #e7f3fb; color: #17658f; }
.badge-soft-secondary { background: #edf0ef; color: #53615d; }
.badge-soft-primary { background: var(--sipras-primary-soft); color: var(--sipras-primary-dark); }
.report-photo {
    width: 100%;
    height: 170px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--sipras-border);
}
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #dce7e2;
}
.timeline-item { position: relative; padding-bottom: 19px; }
.timeline-dot {
    position: absolute;
    left: -26px;
    top: 5px;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--sipras-primary);
    box-shadow: 0 0 0 2px #b6d9cd;
}
.empty-state { text-align: center; padding: 44px 20px; color: var(--sipras-muted); }
.empty-icon {
    width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 20px;
    background: var(--sipras-primary-soft); color: var(--sipras-primary);
    display: grid; place-items: center; font-size: 1.8rem;
}
.filter-panel { background: #fbfcfc; border: 1px solid var(--sipras-border); border-radius: 14px; padding: 16px; }
.notification-dot {
    width: 8px; height: 8px; background: #e44545; border-radius: 50%;
    display: inline-block; position: absolute; right: 4px; top: 3px;
}
.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(54, 180, 139, .20), transparent 28%),
        radial-gradient(circle at 85% 75%, rgba(243, 182, 63, .15), transparent 26%),
        linear-gradient(135deg, #ecf9f4, #f7faf9 48%, #eff6f3);
}
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }
.login-visual {
    padding: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(145deg, var(--sipras-primary), var(--sipras-primary-dark));
    color: white;
    position: relative;
    overflow: hidden;
}
.login-visual::before, .login-visual::after {
    content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
}
.login-visual::before { width: 420px; height: 420px; right: -180px; top: -100px; }
.login-visual::after { width: 280px; height: 280px; left: -130px; bottom: -90px; }
.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 42px; }
.login-card { width: 100%; max-width: 460px; }
.login-logo {
    width: 62px; height: 62px; border-radius: 18px; background: var(--sipras-primary);
    color: white; display: grid; place-items: center; font-size: 1.7rem;
    box-shadow: 0 12px 30px rgba(15,122,92,.24);
}
.mobile-menu-button { display: none; }
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .sidebar.show { transform: translateX(0); }
    .main-wrapper { margin-left: 0; }
    .mobile-menu-button { display: inline-flex; }
    .page-content { padding: 20px 16px; }
    .topbar { padding: 0 16px; }
    .login-shell { grid-template-columns: 1fr; }
    .login-visual { display: none; }
}
@media (max-width: 575.98px) {
    .topbar { height: 64px; }
    .page-title { font-size: 1.35rem; }
    .card-body { padding: 16px; }
    .login-form-wrap { padding: 24px 18px; }
}
@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
    .main-wrapper { margin-left: 0 !important; }
    .page-content { padding: 0 !important; }
    body { background: #fff !important; }
    .card { box-shadow: none !important; border-color: #ddd !important; }
}

.brand-mark-logo { background:#fff; overflow:hidden; padding:5px; }
.brand-mark-logo img { width:100%; height:100%; object-fit:contain; border-radius:9px; }
.login-logo img { width:100%; height:100%; object-fit:contain; padding:7px; border-radius:16px; }
.school-logo-preview { width:150px; height:150px; margin-inline:auto; border-radius:24px; border:1px dashed var(--sipras-border); background:#fff; display:grid; place-items:center; overflow:hidden; }
.school-logo-preview img { width:100%; height:100%; object-fit:contain; padding:10px; }
.school-logo-placeholder { width:100%; height:100%; display:grid; place-items:center; font-size:3.4rem; color:var(--sipras-primary); background:var(--sipras-primary-soft); }
.form-control-color { min-height:46px; padding:.35rem; }
.min-w-0 { min-width:0; }