:root { --erp-primary: #1f3a5f; --erp-accent: #2f80ed; }
body { background: #f4f6f9; font-size: .95rem; }
.erp-nav { background: var(--erp-primary); }
.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat-card .value { font-size: 1.8rem; font-weight: 600; color: var(--erp-primary); }
.stat-card .label { color: #6c757d; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.table thead th { background: #eef2f7; font-weight: 600; white-space: nowrap; }
.page-title { color: var(--erp-primary); font-weight: 600; }
.timeline { border-left: 3px solid #dbe3ee; padding-left: 1rem; }
.timeline .item { position: relative; margin-bottom: 1rem; }
.timeline .item::before { content: ""; position: absolute; left: -1.45rem; top: .35rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--erp-accent); }
.lifecycle-steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.lifecycle-steps .step { padding: .3rem .8rem; border-radius: 1rem; background: #e9eef5; font-size: .8rem; }
.lifecycle-steps .step.done { background: #d1f2df; color: #146c43; }
.lifecycle-steps .step.current { background: var(--erp-accent); color: #fff; }

/* TC print */
.tc-sheet { background: #fff; max-width: 820px; margin: auto; padding: 2.5rem; border: 2px solid #333; }
.tc-sheet h3 { letter-spacing: .1em; }
.tc-sheet table td { padding: .45rem .3rem; vertical-align: top; }
.tc-sheet .cancelled { color: #c00; font-size: 2rem; font-weight: 700; transform: rotate(-12deg); text-align: center; border: 4px solid #c00; }
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    main { padding: 0 !important; }
    .tc-sheet { border: 2px solid #000; }
}

/* ---------- Phase 2: fee receipt ---------- */
.receipt-sheet { max-width: 820px; margin: auto; }
.receipt { background: #fff; border: 1px solid #333; padding: 1.25rem 1.5rem; margin-bottom: 1rem; position: relative; }
.receipt .table { font-size: .85rem; }
.receipt.office-copy { border-top: 2px dashed #888; }
.cancelled-stamp { color: #c00; border: 3px solid #c00; font-weight: 700; text-align: center; padding: .25rem; margin-bottom: .5rem; transform: rotate(-2deg); }
.fee-grid input { min-width: 80px; }
@media print {
    .receipt { page-break-inside: avoid; border-color: #000; }
}

/* ---------- Phase 3 ---------- */
.report-card { background: #fff; max-width: 980px; margin: auto; padding: 1.5rem 2rem; border: 2px solid #333; }
.report-card .table { font-size: .8rem; }
.tt-grid td, .tt-grid th { min-width: 90px; }
.att-grid td, .att-grid th { padding: .15rem .25rem; text-align: center; font-size: .75rem; }
.att-grid .wo { background: #f1f3f5; color: #adb5bd; }
.att-grid .hol { background: #fff3cd; }
.att-btns .btn { padding: .1rem .5rem; font-size: .8rem; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal div { padding: .4rem; border-radius: .25rem; text-align: center; font-size: .85rem; background: #f8f9fa; }
@media print { .report-card { border: 2px solid #000; } }

/* ---------- Header: strip 1 (school + tools) and strip 2 (menus) ---------- */
.erp-header { position: relative; z-index: 1030; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
@media (min-width: 992px) { .erp-header { position: sticky; top: 0; } }
.erp-top { background: #fff; border-bottom: 1px solid #e3e8ef; padding: .45rem 0; }
.erp-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1 1 auto; text-decoration: none; color: var(--erp-primary); }
.erp-brand:hover { color: var(--erp-primary); }
.erp-logo { height: 44px; width: 44px; object-fit: contain; flex: 0 0 auto; border-radius: .4rem; }
.erp-logo-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--erp-primary); color: #fff; font-size: 1.4rem; }
.erp-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.erp-school-name { font-size: 1.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp-brand-sub { font-size: .72rem; color: #6c7a8c; letter-spacing: .04em; text-transform: uppercase; }
.erp-tools { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.erp-tools .form-select { border-color: #d5dde8; background-color: #f7f9fc; }
.erp-session { min-width: 120px; }
.erp-lang { min-width: 100px; }
.erp-school-switch { min-width: 200px; max-width: 260px; }
.erp-user { border: 1px solid #d5dde8; background: #f7f9fc; color: var(--erp-primary); white-space: nowrap; }
.erp-user:hover, .erp-user.show { background: var(--erp-primary); color: #fff; border-color: var(--erp-primary); }
.erp-toggler { border: 1px solid #d5dde8; color: var(--erp-primary); font-size: 1.5rem; padding: .1rem .55rem; line-height: 1; }
.erp-toggler:focus { box-shadow: none; }

.erp-menu { background: var(--erp-primary); padding-top: 0; padding-bottom: 0; }
@media (min-width: 992px) { .erp-menu .navbar-nav { flex-wrap: wrap; } }
.erp-menu .nav-link { color: rgba(255,255,255,.85); white-space: nowrap; padding: .6rem .75rem !important; font-size: .92rem; border-bottom: 3px solid transparent; }
.erp-menu .nav-link:hover, .erp-menu .nav-link:focus, .erp-menu .nav-link.show { color: #fff; background: rgba(255,255,255,.08); border-bottom-color: var(--erp-accent); }
.erp-menu .nav-link .bi { opacity: .85; margin-right: .15rem; }
.erp-menu .dropdown-menu { margin-top: 0; border: 0; border-radius: 0 0 .4rem .4rem; box-shadow: 0 6px 16px rgba(0,0,0,.12); font-size: .92rem; }
.erp-menu .dropdown-item .bi { width: 1.2rem; }
@media (min-width: 992px) { .erp-super-menu { margin-left: auto; } }

/* Tablet & mobile: header scrolls with the page, menu opens as a plain vertical list (no inner scroll box) */
@media (max-width: 991.98px) {
    .erp-menu .navbar-collapse { max-height: none; overflow: visible; }
    .erp-menu .navbar-collapse.show, .erp-menu .navbar-collapse.collapsing { padding: .25rem 0 .75rem; }
    .erp-menu .navbar-nav { flex-direction: column; flex-wrap: nowrap; width: 100%; }
    .erp-menu .nav-link { border-bottom: 0; border-left: 3px solid transparent; padding: .7rem .5rem !important; font-size: 1rem; }
    .erp-menu .nav-link:hover, .erp-menu .nav-link.show { border-left-color: var(--erp-accent); border-bottom-color: transparent; }
    .erp-menu .dropdown-toggle::after { float: right; margin-top: .55rem; }
    .erp-menu .dropdown-menu { position: static !important; transform: none !important; inset: auto !important; float: none; width: 100%;
        background: rgba(255,255,255,.06); box-shadow: none; border-radius: 0; margin: 0; padding: .15rem 0 .15rem 1rem; }
    .erp-menu .dropdown-item { color: rgba(255,255,255,.85); padding: .55rem 1rem; white-space: normal; }
    .erp-menu .dropdown-item:hover, .erp-menu .dropdown-item:focus { background: rgba(255,255,255,.1); color: #fff; }
    .erp-menu .dropdown-divider { border-color: rgba(255,255,255,.15); }
    .erp-super-menu { margin-left: 0; }
}
@media (max-width: 767.98px) {
    .erp-top { padding: .35rem 0; }
    .erp-top .container-fluid { flex-wrap: wrap; row-gap: .4rem; }
    .erp-brand { flex: 1 1 0; }
    .erp-toggler { order: 2; }
    .erp-tools { order: 3; flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; gap: .35rem; }
    .erp-tools > form { flex: 1 1 0; min-width: 0; }
    .erp-tools > form .form-select { width: 100%; }
    .erp-tools > .dropdown { flex: 0 0 auto; margin-left: auto; }
    .erp-tools > .dropdown .dropdown-menu { max-width: calc(100vw - 1rem); }
    .erp-logo { height: 36px; width: 36px; }
    .erp-school-name { font-size: 1rem; }
    .erp-brand-sub { display: none; }
    .erp-school-switch, .erp-session, .erp-lang { min-width: 0; max-width: none; }
    #schoolForm { flex: 1 1 100%; }
}

/* Mobile: never let the page itself scroll sideways (wide tables scroll inside their own box) */
@media (max-width: 767.98px) {
    html, body { overflow-x: clip; }
    main.container-fluid { padding-left: .6rem; padding-right: .6rem; }
    .page-title { font-size: 1.15rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .card form.d-flex, form.d-flex.gap-2 { flex-wrap: wrap; }
}