/* School ERP – panel styles (admin, school staff, parent, student, affiliate) on top of Bootstrap 5.
   Same design language as the public site (site.css): indigo → purple → cyan gradient, Plus Jakarta Sans. */
:root {
    --erp-primary: #4f46e5;
    --erp-primary-dark: #4338ca;
    --erp-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #06b6d4 100%);
    --erp-ink: #0f172a;
    --erp-body: #475569;
    --erp-muted: #64748b;
    --erp-line: #e6e8f2;
    --erp-sidebar-bg: #0b1024;
    --erp-sidebar-text: #aab1d6;
    --erp-body-bg: #f5f7ff;
    --erp-sidebar-width: 264px;
    --erp-radius: 16px;
    --erp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -18px rgba(79, 70, 229, .25);
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338ca;
    --bs-primary-bg-subtle: #eef0ff;
    --bs-primary-border-subtle: #c7cbf5;
    --bs-primary-text-emphasis: #3730a3;
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-border-radius: 10px;
}

body { background: var(--erp-body-bg); font-size: .925rem; color: var(--erp-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--erp-ink); letter-spacing: -.01em; }

/* ---------- Buttons & form controls ---------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { background: var(--erp-grad); border: 0; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; box-shadow: 0 8px 20px -10px rgba(79, 70, 229, .7); }
.btn-primary:hover, .btn-primary:focus { background: var(--erp-grad); filter: brightness(1.06); }
.btn-primary:disabled, .btn-primary.disabled { background: var(--erp-grad); opacity: .6; }
.btn-outline-primary { --bs-btn-color: var(--erp-primary); --bs-btn-border-color: #c7cbf5; --bs-btn-hover-bg: var(--erp-primary); --bs-btn-hover-border-color: var(--erp-primary); --bs-btn-active-bg: var(--erp-primary-dark); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--erp-line); --bs-btn-hover-bg: #f5f6ff; --bs-btn-hover-border-color: #c7cbf5; }
.text-primary { color: var(--erp-primary) !important; }
.bg-primary { background-color: var(--erp-primary) !important; }
.form-control, .form-select { border-radius: 10px; border-color: var(--erp-line); }
.form-control:focus, .form-select:focus { border-color: var(--erp-primary); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); }
.form-label { font-weight: 600; color: var(--erp-ink); font-size: .88rem; }
.form-check-input:checked { background-color: var(--erp-primary); border-color: var(--erp-primary); }
.input-group-text { border-color: var(--erp-line); background: #f8f9ff; }

/* ---------- App shell ---------- */
.erp-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--erp-sidebar-width);
    background: radial-gradient(420px 260px at 0% 0%, rgba(124, 58, 237, .28), transparent 70%), var(--erp-sidebar-bg);
    color: var(--erp-sidebar-text); overflow-y: auto; z-index: 1045; transition: transform .25s ease;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.erp-sidebar .brand { display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.25rem; color: #fff; font-weight: 800; font-size: 1.05rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.07); }
.erp-sidebar .brand img { width: 38px; height: 38px; object-fit: contain; border-radius: 10px; background: #fff; }
.erp-sidebar .brand .brand-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--erp-grad); display: grid; place-items: center; font-size: 1.15rem; box-shadow: 0 8px 20px -8px rgba(124, 58, 237, .8); flex-shrink: 0; }
.erp-sidebar .nav { padding: 0 .75rem; }
.erp-sidebar .nav-section { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(170, 177, 214, .55); padding: 1.1rem .75rem .4rem; }
.erp-sidebar .nav-link { color: var(--erp-sidebar-text); padding: .55rem .75rem; display: flex; align-items: center; gap: .75rem; border-radius: 10px; font-weight: 500; margin-bottom: 2px; transition: background .15s, color .15s; }
.erp-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.erp-sidebar .nav-link.active { color: #fff; background: var(--erp-grad); box-shadow: 0 10px 24px -12px rgba(124, 58, 237, .9); font-weight: 600; }
.erp-sidebar .nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.erp-backdrop { display: none; }

.erp-main { margin-left: var(--erp-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.erp-topbar { background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--erp-line); padding: .65rem 1.5rem; position: sticky; top: 0; z-index: 1030; }
.erp-topbar .btn-light { border-radius: 12px; }
.erp-content { padding: 1.75rem; flex: 1; min-width: 0; }
.erp-footer { padding: 1rem 1.75rem; color: var(--erp-muted); font-size: .8rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--erp-grad); color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.avatar-lg { width: 96px; height: 96px; font-size: 1.8rem; object-fit: cover; }

@media (max-width: 991.98px) {
    .erp-sidebar { transform: translateX(-100%); }
    .erp-sidebar.show { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.35); }
    .erp-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(11, 16, 36, .45); z-index: 1040; }
    .erp-main { margin-left: 0; }
    .erp-content { padding: 1rem; }
    .erp-topbar { padding: .55rem 1rem; }
}

/* ---------- Components ---------- */
.card { border: 1px solid var(--erp-line); border-radius: var(--erp-radius); box-shadow: var(--erp-shadow); }
.card > .card-header:first-child { border-radius: var(--erp-radius) var(--erp-radius) 0 0; }
.card-header { background: #fff; border-bottom: 1px solid #eef0f8; font-weight: 700; color: var(--erp-ink); padding: .95rem 1.15rem; }
.card-footer { background: #fff; border-top: 1px solid #eef0f8; }
.stat-card { transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px -20px rgba(79, 70, 229, .4); }
.stat-card .stat-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.stat-card .stat-label, .stat-card .stat-value { overflow-wrap: anywhere; }
.stat-card .stat-value { font-size: 1.55rem; font-weight: 800; line-height: 1.2; color: var(--erp-ink); letter-spacing: -.02em; }
.stat-card .stat-label { color: var(--erp-muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.page-header h1 { font-size: 1.55rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.page-header p, .page-header .text-muted { color: var(--erp-muted) !important; }
.table { --bs-table-hover-bg: #f7f8ff; }
.table > :not(caption) > * > * { padding: .7rem .8rem; border-color: #eef0f8; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--erp-muted); background: #f8f9ff; font-weight: 700; white-space: nowrap; }
.table-responsive { border-radius: 0 0 var(--erp-radius) var(--erp-radius); }
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .38em .7em; }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { font-weight: 600; }
.nav-pills .nav-link.active { background: var(--erp-grad); }
.pagination { --bs-pagination-active-bg: var(--erp-primary); --bs-pagination-active-border-color: var(--erp-primary); --bs-pagination-border-radius: 10px; }
.dropdown-menu { border: 1px solid var(--erp-line); border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .35); padding: .4rem; }
.dropdown-item { border-radius: 8px; }
.alert { border-radius: 12px; }
.modal-content { border: 0; border-radius: 18px; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--erp-muted); }
.empty-state i { font-size: 2.5rem; opacity: .4; display: block; margin-bottom: .75rem; }
.required::after { content: " *"; color: #dc3545; }
.btn-loading { pointer-events: none; opacity: .75; }

/* ---------- Small screens ---------- */
@media (max-width: 575.98px) {
    .page-header { flex-direction: column; align-items: flex-start !important; gap: .75rem; }
    .page-header h1 { font-size: 1.3rem; }
    .stat-card .card-body { flex-direction: column; align-items: flex-start !important; gap: .65rem !important; }
    .stat-card .stat-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem; }
    .stat-card .stat-value { font-size: 1.2rem; }
    .stat-card .stat-label { font-size: .68rem; }
    .card-body { padding: 1rem; }
    .table > :not(caption) > * > * { padding: .55rem .6rem; }
}

/* ---------- Legacy public classes (older pages) ---------- */
.public-nav { background: #fff; border-bottom: 1px solid #eef0f4; }
.hero { background: var(--erp-grad); color: #fff; padding: 5rem 0 4rem; }
.hero h1 { font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); }
.feature-icon { width: 52px; height: 52px; border-radius: 14px; background: #eef2ff; color: var(--erp-primary); display: grid; place-items: center; font-size: 1.5rem; }
.price-card .price { font-size: 2.5rem; font-weight: 700; }
.section { padding: 4rem 0; }
.public-footer { background: #0b1024; color: #9ca3af; padding: 3rem 0 1.5rem; }
.public-footer a { color: #d1d5db; text-decoration: none; }
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, #eef2ff, #f5f6fa); padding: 2rem 0; }

/* ---------- Print ---------- */
@media print {
    .erp-sidebar, .erp-topbar, .erp-footer, .erp-backdrop, .no-print, .btn { display: none !important; }
    .erp-main { margin-left: 0; }
    .erp-content { padding: 0; }
    .card { border: none; box-shadow: none; }
    body { background: #fff; }
}