/* BHS theme on top of Bootstrap 5.3. Light/dark come from data-bs-theme on <html>. */
:root {
    --bhs-radius: .875rem;
    --bhs-sidebar-w: 16rem;
    --bhs-sidebar-w-collapsed: 4.75rem;
    --bhs-sidebar-bg: #1e1b4b;
    --bhs-sidebar-fg: rgba(255, 255, 255, .78);
    --bhs-accent: #0d9488;
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4338ca;
    --bs-link-hover-color: #3730a3;
    --bs-border-radius: .625rem;
    --bs-body-font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-bs-theme="dark"] {
    --bhs-sidebar-bg: #0f0d2e;
    --bs-primary: #818cf8;
    --bs-primary-rgb: 129, 140, 248;
    --bs-link-color: #a5b4fc;
    --bs-link-hover-color: #c7d2fe;
    --bs-body-bg: #111827;
    --bs-body-bg-rgb: 17, 24, 39;
    --bs-tertiary-bg: #1f2937;
    --bs-tertiary-bg-rgb: 31, 41, 55;
}

body { background: var(--bs-tertiary-bg); }
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -.01em; }

/* buttons: Bootstrap hard-codes .btn-primary colours, so set its variables */
.btn-primary {
    --bs-btn-bg: #4f46e5; --bs-btn-border-color: #4f46e5;
    --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
    --bs-btn-disabled-bg: #4f46e5; --bs-btn-disabled-border-color: #4f46e5;
}
.btn-outline-primary {
    --bs-btn-color: #4f46e5; --bs-btn-border-color: #4f46e5;
    --bs-btn-hover-bg: #4f46e5; --bs-btn-hover-border-color: #4f46e5;
    --bs-btn-active-bg: #4338ca; --bs-btn-active-border-color: #4338ca;
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #a5b4fc; --bs-btn-border-color: #6366f1; }
.btn, .form-control, .form-select { min-height: 2.5rem; }
.btn-sm { min-height: 2.25rem; min-width: 2.25rem; }

.card { border: 0; border-radius: var(--bhs-radius); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .05); }
[data-bs-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.card-footer { background: transparent; border-top-color: var(--bs-border-color-translucent); }
.offcanvas, .modal-content { border-radius: var(--bhs-radius) 0 0 var(--bhs-radius); }
.modal-content { border-radius: var(--bhs-radius); }

/* ---- shell ---- */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar {
    /* !important: Bootstrap's .offcanvas-lg makes the background transparent from the lg breakpoint up, which left the menu text unreadable on the light page */
    background: var(--bhs-sidebar-bg) !important; color: var(--bhs-sidebar-fg);
    --bs-offcanvas-bg: var(--bhs-sidebar-bg); --bs-offcanvas-color: var(--bhs-sidebar-fg); --bs-offcanvas-width: 17rem;
}
@media (min-width: 992px) {
    .sidebar { width: var(--bhs-sidebar-w); flex: 0 0 var(--bhs-sidebar-w); position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: width .15s ease; }
    html.sidebar-collapsed .sidebar { width: var(--bhs-sidebar-w-collapsed); flex-basis: var(--bhs-sidebar-w-collapsed); }
    html.sidebar-collapsed .sidebar .label { display: none; }
    html.sidebar-collapsed .sidebar .sidebar-head { justify-content: center; }
    html.sidebar-collapsed .sidebar .nav-link { justify-content: center; padding-inline: 0; }
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; }
.sidebar .brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.sidebar .brand .bi { font-size: 1.5rem; color: #5eead4; }
.sidebar-nav { padding: .25rem .75rem 1.5rem; display: flex; flex-direction: column; gap: .15rem; }
.nav-heading { margin: 1.1rem .5rem .35rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.sidebar .nav-link {
    display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .5rem .75rem;
    color: var(--bhs-sidebar-fg); border-radius: .6rem; text-decoration: none;
}
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar .nav-link.active { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 3px 0 0 #5eead4; }
.sidebar .nav-link .bi { font-size: 1.1rem; }

.topbar {
    position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color-translucent);
}
.btn-icon { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--bs-body-color); border-radius: 50%; }
.btn-icon:hover { background: var(--bs-secondary-bg); }
.btn-icon-text { display: inline-flex; align-items: center; gap: .5rem; border: 0; background: transparent; color: var(--bs-body-color); min-height: 2.75rem; }
.avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--bhs-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.page { padding: 1.5rem 1rem 3rem; max-width: 80rem; width: 100%; margin: 0 auto; }
@media (min-width: 768px) { .page { padding: 2rem 2rem 3rem; } }

[data-bs-theme="light"] .theme-icon-dark, [data-bs-theme="dark"] .theme-icon-light { display: none; }

/* ---- cards used on the dashboard ---- */
.quick-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; color: inherit; text-decoration: none; height: 100%; transition: transform .12s ease, box-shadow .12s ease; }
.quick-card:hover { transform: translateY(-2px); color: inherit; box-shadow: 0 8px 24px rgba(79, 70, 229, .18); }
.quick-icon { width: 3rem; height: 3rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); flex: 0 0 auto; }

/* ---- tables: card view on phones ---- */
@media (max-width: 575.98px) {
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
    .table-cards tr { border: 1px solid var(--bs-border-color); border-radius: .75rem; margin-bottom: .75rem; padding: .25rem .75rem; }
    .table-cards td { border: 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right !important; padding: .4rem 0; }
    .table-cards td::before { content: attr(data-label); font-weight: 600; color: var(--bs-secondary-color); text-align: left; }
}

.search-box { max-width: 28rem; }
.col-check { width: 3rem; }

/* ---- attendance and results ---- */
.att-grid th, .att-grid td { padding: .15rem .25rem; min-width: 1.75rem; font-size: .8rem; }
.marks-input { min-width: 5.5rem; max-width: 8rem; }
.result-card { max-width: 52rem; margin: 0 auto; }

/* ---- people ---- */
.profile-photo { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; background: var(--bs-secondary-bg); }
.profile-photo-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); }
.id-card { width: 85.6mm; min-height: 54mm; border: 1px solid #1e1b4b; border-radius: 3mm; overflow: hidden; background: #fff; color: #111; margin: 0 auto; }
.id-card-head { background: #1e1b4b; color: #fff; text-align: center; padding: 1.5mm; font-weight: 700; letter-spacing: .05em; }
.id-card-body { display: flex; gap: 3mm; padding: 3mm; }
.id-card-photo { width: 22mm; height: 28mm; object-fit: cover; border: 1px solid #ccc; flex: 0 0 auto; }
.id-card-photo-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; color: #888; }
.id-card-info { font-size: 3mm; line-height: 1.35; }
.id-card-name { font-weight: 700; font-size: 3.6mm; margin-bottom: 1mm; }
.form-narrow { max-width: 32rem; }
.rights-matrix th, .rights-matrix td { white-space: nowrap; }

/* ---- login ---- */
.login-split { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.login-brand { display: none; background: linear-gradient(145deg, #312e81 0%, #4f46e5 55%, #0d9488 100%); color: #fff; padding: 3rem; align-items: center; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--bs-body-bg); }
.login-card { width: 100%; max-width: 24rem; }
@media (min-width: 992px) {
    .login-split { grid-template-columns: 1.1fr 1fr; }
    .login-brand { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    .sidebar, .topbar, .btn, .pagination, .d-print-none, .toast-container { display: none !important; }
    .page { padding: 0; max-width: none; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}

/* School branding: sidebar logo, document head logo, sign-in logo */
.school-brand { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.school-logo { height: 2.2rem; width: auto; max-width: 3rem; object-fit: contain; border-radius: .35rem; background: #fff; padding: .1rem; }
.school-brand .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.school-doc-logo { max-height: 4.5rem; max-width: 9rem; width: auto; object-fit: contain; }
.login-logo { max-height: 6rem; max-width: 14rem; width: auto; background: #fff; border-radius: .75rem; padding: .4rem; }
.id-card-head .school-logo { height: 1.6rem; }

/* Fee challan: three copies (bank, school, student) side by side */
.challan-sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; background: #e8edf3; padding: 1rem; border-radius: .75rem; }
.challan-copy { background: #fff; color: #1b2733; border: 2px solid #2b3a4a; border-radius: .6rem; padding: 1rem; font-size: .82rem; break-inside: avoid; }
.challan-school { display: flex; justify-content: center; align-items: center; gap: .4rem; font-weight: 700; font-size: 1rem; color: #064e3b; text-transform: uppercase; }
.challan-logo { height: 1.8rem; width: auto; max-width: 2.6rem; object-fit: contain; }
.challan-sub { font-size: .7rem; color: #5b6b7c; }
.challan-badge { display: table; margin: .4rem auto 0; padding: .1rem .7rem; border-radius: .3rem; background: #064e3b; color: #fff; font-size: .65rem; font-weight: 700; text-transform: uppercase; }
.challan-copy hr { margin: .6rem 0; border-color: #cbd5df; opacity: 1; }
.challan-rows { display: grid; grid-template-columns: auto 1fr; gap: .25rem .5rem; margin: 0; }
.challan-rows dt { font-weight: 400; color: #64748b; }
.challan-rows dd { margin: 0; text-align: right; font-weight: 700; }
.challan-mono { font-family: var(--bs-font-monospace); }
.challan-mono dt { color: #1b2733; }
.challan-title { font-size: .65rem; font-weight: 700; text-transform: uppercase; color: #475569; margin-bottom: .4rem; }
.challan-green { color: #064e3b; }
.challan-red, .challan-rows dt.challan-red { color: #d0021b; }
.challan-total { margin-top: .7rem; padding: .5rem .6rem; background: #f1f5f9; border: 1px solid #cbd5df; border-radius: .4rem; font-family: var(--bs-font-monospace); }
.challan-total div { display: flex; justify-content: space-between; }
.challan-sign { display: flex; justify-content: space-between; margin-top: 1.6rem; font-size: .68rem; color: #64748b; }
.challan-sign span { border-top: 1px solid #94a3b8; padding-top: .2rem; min-width: 5rem; text-align: center; }
.challan-foot { margin-top: .6rem; text-align: center; font-size: .62rem; color: #64748b; }
@media print {
    @page { size: A4 landscape; margin: 8mm; }
    .challan-sheet { grid-template-columns: repeat(3, 1fr); background: none; padding: 0; gap: .5rem; }
    .challan-copy { border-width: 1px; }
}
.challan-pay { text-align: center; padding: .5rem; margin-bottom: .6rem; background: #f1f5f9; border: 1px solid #cbd5df; border-radius: .4rem; }
.challan-payid { font-family: var(--bs-font-monospace); font-weight: 700; font-size: 1.05rem; color: #064e3b; letter-spacing: .03em; }
.challan-mono { font-family: var(--bs-font-monospace); }
.challan-small { font-size: .7rem; }

/* Timetable grids (class and teacher) */
.timetable th, .timetable td { min-width: 7.5rem; vertical-align: middle; }
.timetable .timetable-period { min-width: 6.5rem; background: var(--bs-tertiary-bg); }
.timetable-cell { padding: .25rem .5rem; color: inherit; border-radius: .25rem; }
a.timetable-cell:hover { background: var(--bs-tertiary-bg); }
@media print {
    .timetable th, .timetable td { min-width: 0; font-size: .8rem; }
    @page { size: A4 landscape; margin: 8mm; }
}

/* Certificates and admit cards */
.certificate { border: 3px double var(--bs-border-color); position: relative; }
.certificate-title { letter-spacing: .12em; font-size: 1.4rem; }
.certificate-text { font-size: 1.05rem; line-height: 2; text-align: justify; }
.certificate-cancelled::after { content: "CANCELLED"; position: absolute; top: 40%; left: 12%; font-size: 4rem; font-weight: 700; color: rgba(220, 53, 69, .25); transform: rotate(-20deg); pointer-events: none; }
.admit-sheet { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.admit-card { break-inside: avoid; page-break-inside: avoid; }
@media print {
    .admit-sheet { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .admit-card .school-doc-logo { max-height: 2.5rem; }
}