/* ============================================================
   CollegeERP — UI theme (light, blue accent)
   ============================================================ */
:root {
    --primary: #1b5fe0;
    --primary-dark: #1449b0;
    --primary-soft: #e8f0fe;

    --sidebar-w: 236px;
    --topbar-h: 64px;
    --body-bg: #f4f6fa;

    --ink: #16263d;
    --ink-2: #3c4a5e;
    --muted: #7a879b;
    --line: #e6eaf1;

    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(22, 38, 61, .05);
    --shadow-md: 0 6px 18px rgba(22, 38, 61, .09);

    --ok: #16a34a;
    --warn: #ea8a00;
    --bad: #e02424;
}

* { outline-color: var(--primary); }

body {
    background: var(--body-bg);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--ink-2);
    font-size: .875rem;
    min-height: 100vh;
}

/* ---------------- Sidebar ---------------- */
.sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    width: var(--sidebar-w);
    background: #fff;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform .28s ease;
    border-right: 1px solid var(--line);
}
.sidebar-session {
    padding: .95rem 1.15rem .8rem;
    border-bottom: 1px solid var(--line);
}
.sidebar-session .ss-label { font-size: .72rem; color: var(--muted); font-weight: 500; }
.sidebar-session .dropdown-toggle {
    background: none; border: 0; padding: 0;
    font-size: 1.15rem; font-weight: 700; color: var(--primary);
}
.sidebar-session .dropdown-toggle::after { margin-left: .3rem; vertical-align: .12em; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .7rem .7rem 1rem; }
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #dfe4ec; border-radius: 3px; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem .8rem;
    margin-bottom: .12rem;
    border-radius: 8px;
    color: var(--ink-2);
    text-decoration: none;
    font-size: .865rem;
    font-weight: 500;
    transition: background .16s, color .16s;
}
.sidebar-link i { font-size: 1.05rem; width: 20px; text-align: center; color: #8b98ac; }
.sidebar-link:hover { background: #f2f5fa; color: var(--primary); }
.sidebar-link:hover i { color: var(--primary); }
.sidebar-link.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary);
}
.sidebar-link.active i { color: var(--primary); }
.sidebar-link.link-logout { color: var(--bad); }
.sidebar-link.link-logout i { color: var(--bad); }
.sidebar-link.link-logout:hover { background: #fdecec; color: var(--bad); }

/* ---------------- Topbar ---------------- */
.main-wrapper {
    margin-left: var(--sidebar-w);
    min-height: calc(100vh - var(--topbar-h));
    padding-top: var(--topbar-h);
    display: flex;
    flex-direction: column;
    transition: margin-left .28s ease;
}
.topbar {
    background: #fff;
    padding: 0 1.1rem;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: .9rem;
    border-bottom: 1px solid var(--line);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1050;
}
.topbar .btn-toggle-sidebar {
    display: inline-flex; background: none; border: 0;
    color: var(--ink-2); padding: .2rem .35rem;
    flex-shrink: 0;
}
.topbar .college-logo {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary-soft);
    display: grid; place-items: center;
    color: var(--primary);
    font-size: 1.3rem;
    flex-shrink: 0;
}
.topbar .college-name {
    font-weight: 700; font-size: 1.15rem; color: var(--ink);
    margin: 0; line-height: 1.2; letter-spacing: -.2px;
}
.topbar .college-sub { font-size: .76rem; color: var(--muted); }
.topbar .top-meta {
    display: flex; align-items: center; gap: .45rem;
    font-size: .8rem; color: var(--ink-2); font-weight: 500; white-space: nowrap;
}
.topbar .top-meta i { color: var(--muted); font-size: .95rem; }
.topbar .top-sep { width: 1px; height: 22px; background: var(--line); }
.topbar .user-chip {
    display: flex; align-items: center; gap: .4rem;
    background: none; border: 0; color: var(--ink-2); font-size: .82rem; font-weight: 500;
}
.topbar .user-chip .ava {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}

.content-area { flex: 1; padding: 1.25rem 1.4rem 1.5rem; }
.min-width-0 { min-width: 0; }

/* ---------------- Breadcrumb / page title ---------------- */
.breadcrumb { font-size: .8rem; margin-bottom: .9rem; --bs-breadcrumb-divider-color: #b6bfcd; }
.breadcrumb a { color: var(--primary); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .active { color: var(--muted); }

.page-title-block { margin-bottom: 1rem; }
.page-title-block h4 { font-weight: 700; font-size: 1.3rem; color: var(--ink); margin: 0 0 .15rem; }
.page-title-block p  { font-size: .82rem; color: var(--muted); margin: 0; }

/* ---------------- Cards ---------------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: #fff;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: .85rem 1.15rem;
    font-weight: 600;
    color: var(--ink);
    font-size: .92rem;
}

/* Page-head / panel card */
.page-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}
.page-card-row {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 1rem;
}
.pc-title { display: flex; align-items: center; gap: .8rem; }
/* The rounded icon tile. It used to be styled only inside .pc-title, so the same markup
   in a modal header came out as a bare coloured square with the glyph stuck in a corner. */
.pc-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: grid; place-items: center;
    font-size: 1.05rem;
    line-height: 1;
    background: var(--primary-soft);
    color: var(--primary);
    flex-shrink: 0;
}
.pc-title .pc-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    font-size: 1.25rem;
}
/* A modal heading is icon tile + text on one line; the text truncates, the tile never shrinks. */
.modal-title { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.modal-title .pc-icon { display: grid; }
.modal-title > span:not(.pc-icon), .modal-title > .mt-text {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-title h5 { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.pc-title p  { margin: 0; font-size: .795rem; color: var(--muted); }
.pc-ico-green  { background: #d3f0e0 !important; color: #16a34a !important; }
.pc-ico-blue   { background: #dde7fd !important; color: #1b5fe0 !important; }
.pc-ico-amber  { background: #fbe6c8 !important; color: #ea8a00 !important; }
.pc-ico-rose   { background: #fbdada !important; color: #e02424 !important; }
.pc-ico-violet { background: #e4dcfc !important; color: #7c3aed !important; }
.pc-ico-cyan   { background: #cfeaf9 !important; color: #0284c7 !important; }

/* ---------------- Filter bar ---------------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.filter-bar .fb-field { flex: 1 1 170px; min-width: 150px; }
.filter-bar .fb-field .form-label { display: block; }
/* A hint under one filter must not shove that field up the row. Once the bar is a
   single row it is taken out of the flow and the bar reserves a line for it; while the
   fields are stacked it just sits under its own field like any other help text. */
.filter-bar .fb-note { margin-top: .2rem; }
@media (min-width: 768px) {
    .filter-bar .fb-field.fb-has-note { position: relative; }
    .filter-bar .fb-note { position: absolute; left: 0; right: 0; top: 100%; }
    .filter-bar:has(.fb-has-note) { padding-bottom: 1.15rem; }
}
/* A filter that ends up alone on the last row used to stretch the whole width.
   Capping the field keeps every box the same size wherever it wraps. */
@media (min-width: 768px) {
    .filter-bar .fb-field { max-width: 280px; }
}
.filter-bar .fb-action { flex: 0 0 auto; }
.filter-bar .fb-action .btn { min-width: 118px; }

/* ---------------- Toolbar ---------------- */
.toolbar {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: .7rem; margin-bottom: .85rem;
}
/* The search box is also used on its own inside modals, so these rules are not
   nested under .toolbar -- otherwise the magnifier sits above the field instead of
   inside it. */
.search-box { position: relative; }
.search-box i {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    color: #a9b2c1; font-size: .95rem; pointer-events: none; z-index: 2;
}
.search-box .form-control { padding-left: 2.3rem; }
.toolbar .search-box { flex: 1 1 300px; max-width: 520px; }
.toolbar .tb-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------------- Stat cards ---------------- */
.stat-card {
    border-radius: var(--radius);
    padding: 1.05rem 1.15rem;
    height: 100%;
    display: flex; align-items: center; gap: .9rem;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    transition: transform .18s, box-shadow .18s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card .stat-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 1.3rem; flex-shrink: 0;
}
.stat-card h6 { margin: 0 0 .1rem; font-weight: 600; font-size: .82rem; }
.stat-card small { color: var(--muted); font-size: .75rem; }
.stat-card .stat-value { font-size: 1.55rem; font-weight: 700; line-height: 1.15; letter-spacing: -.4px; }

.stat-blue   { background: #f2f6ff; border-color: #dde7fd; }
.stat-blue   .stat-icon { background: #dde7fd; color: #1b5fe0; }
.stat-blue   .stat-value, .stat-blue h6 { color: #1b5fe0; }

.stat-green  { background: #eefaf3; border-color: #d3f0e0; }
.stat-green  .stat-icon { background: #d3f0e0; color: #16a34a; }
.stat-green  .stat-value, .stat-green h6 { color: #12864a; }

.stat-amber  { background: #fff7ec; border-color: #fbe6c8; }
.stat-amber  .stat-icon { background: #fbe6c8; color: #ea8a00; }
.stat-amber  .stat-value, .stat-amber h6 { color: #c26f00; }

.stat-red    { background: #fef2f2; border-color: #fbdada; }
.stat-red    .stat-icon { background: #fbdada; color: #e02424; }
.stat-red    .stat-value, .stat-red h6 { color: #c81e1e; }

/* A stat card whose figure sits above a full-width breakdown row */
.stat-card.stat-stack { flex-direction: column; align-items: stretch; gap: .6rem; }
.stat-card.stat-stack .stat-icon { width: 40px; height: 40px; font-size: 1.1rem; }
.stat-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    padding-top: .55rem; border-top: 1px solid rgba(0, 0, 0, .07);
}
.stat-split b { font-size: .95rem; }

.stat-violet { background: #f6f3ff; border-color: #e4dcfc; }
.stat-violet .stat-icon { background: #e4dcfc; color: #7c3aed; }
.stat-violet .stat-value, .stat-violet h6 { color: #6d28d9; }

.stat-cyan   { background: #eff9ff; border-color: #cfeaf9; }
.stat-cyan   .stat-icon { background: #cfeaf9; color: #0284c7; }
.stat-cyan   .stat-value, .stat-cyan h6 { color: #0369a1; }

.stat-card small { color: var(--muted) !important; }

/* Dashboard link cards (PDF home screen) */
.link-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex; flex-direction: column;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.link-card .lc-body { padding: 1.1rem 1.15rem; flex: 1; }
.link-card .lc-head { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .6rem; }
.link-card .lc-ico {
    width: 46px; height: 46px;
    border-radius: 10px;
    display: grid; place-items: center;
    color: #fff; font-size: 1.3rem; flex-shrink: 0;
}
.link-card .lc-title { font-weight: 600; font-size: .9rem; color: var(--ink); line-height: 1.3; }
.link-card .lc-sub   { font-size: .74rem; color: var(--muted); }
.link-card .lc-value { font-size: 2.1rem; font-weight: 700; line-height: 1.1; letter-spacing: -1px; }
.link-card .lc-split { display: flex; gap: .5rem; margin-top: .7rem; }
.link-card .lc-chip {
    flex: 1; text-align: center;
    border: 1px solid var(--line);
    border-radius: 8px; padding: .45rem .3rem;
}
.link-card .lc-chip .k { font-size: .7rem; color: var(--muted); display: block; }
.link-card .lc-chip .v { font-size: .95rem; font-weight: 700; }
.link-card .lc-cols {
    display: flex; gap: .35rem; margin-top: .8rem;
    border-top: 1px solid var(--line); padding-top: .65rem;
}
.link-card .lc-col { flex: 1; text-align: center; }
.link-card .lc-col .k { font-size: .72rem; color: var(--muted); display: block; }
.link-card .lc-col .v { font-size: 1rem; font-weight: 700; color: var(--ink); }
.link-card .lc-foot {
    border-top: 1px solid var(--line);
    padding: .6rem 1.15rem;
    font-size: .8rem; font-weight: 600;
    text-decoration: none;
    display: flex; align-items: center; justify-content: space-between;
}
.lc-blue   .lc-ico { background: #1b5fe0; } .lc-blue   .lc-value { color: #1b5fe0; }
.lc-green  .lc-ico { background: #16a34a; } .lc-green  .lc-value { color: #16a34a; }
.lc-violet .lc-ico { background: #7c3aed; } .lc-violet .lc-value { color: #7c3aed; }
.lc-orange .lc-ico { background: #f97316; } .lc-orange .lc-value { color: #f97316; }
.lc-cyan   .lc-ico { background: #0ea5e9; } .lc-cyan   .lc-value { color: #0ea5e9; }

/* Course-wise summary tiles */
.sum-tile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .95rem 1rem;
    display: flex; align-items: center; gap: .8rem;
    height: 100%;
}
/* These four are also used on their own (Today's Fee Collection tiles), so they are
   not tied to .sum-tile — otherwise the icon loses its size and turns into a blob. */
.st-ico {
    width: 46px; height: 46px; border-radius: 10px;
    display: grid; place-items: center;
    color: #fff; font-size: 1.25rem; flex-shrink: 0;
    line-height: 1;
}
.st-ico > i { line-height: 1; }
.st-lbl { font-size: .82rem; color: var(--ink-2); font-weight: 500; }
.st-lbl.fw-bold { color: var(--ink); letter-spacing: .3px; }
.sum-tile { padding: .85rem 1rem; }
.st-val { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.15; }
.st-sub { font-size: .74rem; color: var(--primary); }
.st-blue { background: #1b5fe0; } .st-green { background: #16a34a; }
.st-violet { background: #7c3aed; } .st-orange { background: #f97316; }
.st-cyan { background: #0ea5e9; }

/* ---------------- Tables ---------------- */
.table-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.table { --bs-table-hover-bg: #f5f8ff; color: var(--ink-2); margin-bottom: 0; }
.table thead th {
    background: #f7f9fc;
    color: #55637a;
    font-size: .755rem;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    padding: .65rem .75rem;
    vertical-align: middle;
    text-align: center;
}
.table > :not(caption) > * > * {
    padding: .58rem .75rem;
    border-bottom-color: #f0f3f8;
    vertical-align: middle;
    font-size: .82rem;
    text-align: center;
}
.table th.text-start, .table td.text-start { text-align: left; }
.table th.text-end,   .table td.text-end   { text-align: right; }
.table-card .table thead th { border-top: 0; }
.table-card .table tbody tr:last-child td { border-bottom: 0; }
.table a { color: var(--primary); text-decoration: none; font-weight: 500; }
.table a:hover { text-decoration: underline; }

.table-foot {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: .7rem;
    padding: .7rem 1rem;
    border-top: 1px solid var(--line);
    background: #fff;
    font-size: .8rem;
    color: var(--muted);
}
.table-foot .form-select { width: auto; }

.row-thumb {
    width: 36px; height: 36px;
    border-radius: 8px; object-fit: cover;
    border: 1px solid var(--line); background: #f2f5fa;
}
.row-thumb-ph {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
    font-size: .95rem; margin: 0 auto;
}

/* ---------------- Profile header ---------------- */
.profile-head {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.15rem;
    margin-bottom: 1rem;
}
/* Passport standard 3.5 x 4.5 cm. A square box cropped the top of the head off. */
.profile-head .ph-photo {
    width: 100%; max-width: 160px; aspect-ratio: 35 / 45;
    object-fit: cover; object-position: top center; border-radius: 10px;
    border: 1px solid var(--line); background: #eef3fb;
}
.profile-head .ph-photo-ph {
    width: 100%; max-width: 160px; aspect-ratio: 35 / 45;
    border-radius: 10px; background: #eef3fb;
    display: grid; place-items: center;
    color: #9db4dd; font-size: 3.5rem;
}
.profile-head h3 { font-weight: 700; font-size: 1.5rem; color: var(--ink); margin-bottom: .8rem; }
.ph-meta { display: grid; gap: .42rem; }
.ph-meta .row-i {
    display: grid;
    grid-template-columns: 20px 155px 12px 1fr;
    align-items: start; gap: .35rem;
    font-size: .83rem;
}
.ph-meta .row-i i { color: var(--muted); font-size: .95rem; }
.ph-meta .row-i .k { color: #55637a; font-weight: 600; }
.ph-meta .row-i .v { color: var(--ink); font-weight: 700; }

/* Mobile: the student name sits centred under the photo, and each detail (label : value) stays on
   one line like on desktop -- the fixed 155px label column left too little room for the value. */
@media (max-width: 767.98px) {
    .profile-head .ph-name { text-align: center; }
    .ph-meta .row-i {
        grid-template-columns: max-content 8px minmax(0, 1fr);
        gap: .3rem; font-size: .78rem;
    }
    .ph-meta .row-i > i { display: none; }
    .ph-meta .row-i .k { white-space: nowrap; }
    .ph-meta .row-i .v { overflow-wrap: anywhere; }
}

.status-box {
    border-radius: 10px; padding: .95rem 1rem; height: 100%;
    display: flex; flex-direction: column; gap: .7rem;
}
.status-box.ok  { background: #f2fbf6; border: 1px solid #d3f0e0; }
.status-box.bad { background: #fef5f5; border: 1px solid #fbdada; }
.status-box .sb-head { display: flex; gap: .65rem; }
.status-box .sb-ico {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-size: .85rem; flex-shrink: 0;
}
.status-box.ok  .sb-ico { background: #16a34a; }
.status-box.bad .sb-ico { background: #e02424; }
.status-box h6 { margin: 0 0 .15rem; font-weight: 700; font-size: .92rem; }
.status-box.ok  h6 { color: #12864a; }
.status-box.bad h6 { color: #c81e1e; }
.status-box p { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.status-box .btn { width: 100%; background: #fff; }

/* The four profile actions sit in a compact row above the slimmer status box */
.ph-actions {
    display: flex; flex-wrap: wrap; gap: .4rem;
    justify-content: flex-end; margin-bottom: .6rem;
}
.ph-actions .btn { white-space: nowrap; }
.status-box.sb-slim { height: auto; padding: .7rem .8rem; gap: .55rem; }
.status-box.sb-slim p { font-size: .74rem; }
@media (max-width: 991.98px) { .ph-actions { justify-content: flex-start; } }

/* ---------------- Tabs ---------------- */
.tab-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    padding: 0 .5rem;
}
.nav-tabs { border-bottom: 0; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs .nav-link {
    display: flex; align-items: center; gap: .5rem;
    white-space: nowrap;
    border: 0; border-bottom: 3px solid transparent;
    color: var(--ink-2);
    font-size: .875rem; font-weight: 500;
    padding: .85rem 1.4rem;
    border-radius: 0;
    background: transparent;
}
.nav-tabs .nav-link i { font-size: 1.05rem; color: var(--muted); }
.nav-tabs .nav-link:hover { color: var(--primary); border-bottom-color: #cfdffb; }
.nav-tabs .nav-link.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
.nav-tabs .nav-link.active i { color: var(--primary); }
.tab-card .nav-item + .nav-item { border-left: 1px solid var(--line); }

/* ---------------- Info panels ---------------- */
.info-panel {
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    height: 100%;
}
.info-panel > .ip-head {
    background: #f4f8ff;
    border-bottom: 1px solid var(--line);
    padding: .6rem .9rem;
    font-size: .84rem; font-weight: 600; color: var(--primary);
    display: flex; align-items: center; gap: .5rem;
}
.info-panel .ip-row {
    display: grid;
    grid-template-columns: 150px 12px 1fr;
    gap: .3rem;
    padding: .5rem .9rem;
    border-bottom: 1px solid #f2f5fa;
    font-size: .815rem;
}
.info-panel .ip-row:last-child { border-bottom: 0; }
.info-panel .ip-row .k { color: #55637a; }
.info-panel .ip-row .v { color: var(--ink); font-weight: 500; word-break: break-word; }

.note-line { font-size: .78rem; color: var(--muted); }
.section-title {
    display: flex; align-items: center; gap: .5rem;
    font-size: .88rem; font-weight: 700; color: var(--primary);
    padding-bottom: .5rem; margin-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

/* ---------------- Buttons ---------------- */
.btn { border-radius: 8px; font-weight: 500; font-size: .84rem; padding: .42rem .95rem; }
.btn-sm { font-size: .78rem; padding: .3rem .7rem; border-radius: 7px; }

.btn-primary { background: var(--primary); border: 1px solid var(--primary); color: #fff; box-shadow: none; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; box-shadow: none;
}
.btn-outline-primary { color: var(--primary); border-color: #cfdffb; background: #fff; }
.btn-outline-primary:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: #b9d0f8; }
.btn-outline-success { color: var(--ok); border-color: #cbeed9; background: #fff; }
.btn-outline-success:hover { background: #eefaf3; color: #12864a; border-color: #a9e2c2; }
.btn-outline-danger { color: var(--bad); border-color: #f7cfcf; background: #fff; }
.btn-outline-danger:hover { background: #fdecec; color: #c81e1e; border-color: #f2b6b6; }
.btn-outline-secondary { color: var(--ink-2); border-color: var(--line); background: #fff; }
.btn-outline-secondary:hover { background: #f2f5fa; color: var(--ink); border-color: #d7dde7; }
.btn-success { background: var(--ok); border-color: var(--ok); }
.btn-danger  { background: var(--bad); border-color: var(--bad); }
.btn-light   { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }

/* ---------------- Forms ---------------- */
.form-control, .form-select {
    border-radius: 8px; border-color: #dfe4ec;
    font-size: .84rem; padding: .48rem .75rem; color: var(--ink-2);
}
.form-control::placeholder { color: #a9b2c1; }
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .18rem rgba(27, 95, 224, .12);
}
.form-control-sm, .form-select-sm { font-size: .8rem; padding: .32rem .6rem; }
.form-label { font-weight: 500; font-size: .8rem; color: #55637a; margin-bottom: .3rem; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.input-group-text { background: #f7f9fc; border-color: #dfe4ec; color: var(--muted); font-size: .84rem; }

/* ---------------- Badges ---------------- */
.badge {
    border-radius: 6px; font-weight: 600;
    font-size: .715rem; padding: .38em .7em; letter-spacing: .1px;
}
.badge.bg-success   { background: #e6f7ee !important; color: #12864a !important; }
.badge.bg-danger    { background: #fdecec !important; color: #c81e1e !important; }
.badge.bg-warning   { background: #fff3e0 !important; color: #b96a00 !important; }
.badge.bg-primary   { background: var(--primary-soft) !important; color: var(--primary) !important; }
.badge.bg-info      { background: #e6f6fd !important; color: #0369a1 !important; }
.badge.bg-secondary { background: #eef1f6 !important; color: #55637a !important; }
.badge.bg-violet    { background: #f1ebfe !important; color: #6d28d9 !important; }

/* ---------------- Alerts ---------------- */
.alert {
    border: 1px solid transparent; border-radius: 10px;
    box-shadow: none; font-size: .84rem; padding: .75rem 1rem;
}
.alert-success { background: #eefaf3; border-color: #d3f0e0; color: #12864a; }
.alert-danger  { background: #fef2f2; border-color: #fbdada; color: #c81e1e; }
.alert-warning { background: #fff7ec; border-color: #fbe6c8; color: #a86200; }
.alert-info    { background: #f2f6ff; border-color: #dde7fd; color: #1449b0; }
.alert-link    { color: inherit; font-weight: 700; }

/* ---------------- Pagination ---------------- */
.pagination { gap: .25rem; }
.page-link {
    color: var(--ink-2); border-color: var(--line);
    font-size: .8rem; border-radius: 7px !important; padding: .35rem .65rem;
}
.page-link:hover { background: var(--primary-soft); color: var(--primary); border-color: #cfdffb; }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-item.disabled .page-link { color: #b6bfcd; }

/* ---------------- Modals / dropdowns ---------------- */
.modal-content { border: 0; border-radius: 12px; box-shadow: 0 18px 50px rgba(22,38,61,.18); }
.modal-header { border-bottom: 1px solid var(--line); padding: 1rem 1.25rem; }
.modal-title { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.modal-footer { border-top: 1px solid var(--line); padding: .85rem 1.25rem; }
.dropdown-menu {
    border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow-md); font-size: .84rem; padding: .35rem;
}
.dropdown-item { border-radius: 7px; padding: .45rem .7rem; color: var(--ink-2); }
.dropdown-item:hover { background: #f2f5fa; color: var(--primary); }
.dropdown-item.active, .dropdown-item:active { background: var(--primary-soft); color: var(--primary); }
.dropdown-header {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .6px;
    color: var(--muted); font-weight: 700;
}

/* ---------------- Misc ---------------- */
.text-muted { color: var(--muted) !important; }
.text-primary { color: var(--primary) !important; }
a { color: var(--primary); }
hr { border-color: var(--line); opacity: 1; }

/* ---------------- Collapsible sidebar (desktop) ---------------- */
.sidebar, .main-wrapper { transition: transform .22s ease, margin-left .22s ease; }
@media (min-width: 992px) {
    html.sb-hidden .sidebar     { transform: translateX(-100%); }
    html.sb-hidden .main-wrapper { margin-left: 0; }
}

/* ---------------- Mobile ---------------- */
.sidebar-backdrop { display: none; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(15,23,42,.4); z-index: 1039; }
@media (max-width: 991.98px) {
    :root { --topbar-h: 56px; }
    .sidebar { transform: translateX(-100%); box-shadow: 4px 0 24px rgba(22,38,61,.15); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .main-wrapper { margin-left: 0; }
    .topbar { padding: 0 .7rem; gap: .55rem; }
    .topbar .college-logo { width: 34px; height: 34px; font-size: 1.05rem; }
    .topbar .college-name { font-size: .92rem; }
    .content-area { padding: 1rem .9rem; }
    .ph-meta .row-i { grid-template-columns: 18px 1fr; row-gap: .1rem; }
    .ph-meta .row-i .sep { display: none; }
    .ph-meta .row-i .k {
        font-size: .7rem; text-transform: uppercase; letter-spacing: .4px;
        color: var(--muted); font-weight: 600;
    }
    .ph-meta { gap: .6rem; }
    /* Without this the value drops into the 18px icon column and reads one word per line */
    .ph-meta .row-i .v { grid-column: 1 / -1; }
    .info-panel .ip-row { grid-template-columns: 1fr; }
    .info-panel .ip-row .sep { display: none; }
    .info-panel .ip-row .v { grid-column: 1 / -1; }
}
/* ---- Tablet and phone: give every control a full line so nothing is squashed ---- */
@media (max-width: 767.98px) {
    .filter-bar { gap: .6rem; }
    .filter-bar .fb-field,
    .filter-bar .fb-action { flex: 1 1 100%; min-width: 0; width: 100%; }
    .filter-bar .fb-field[style] { flex: 1 1 100% !important; }
    .filter-bar .fb-action .btn { width: 100%; min-width: 0; }

    .toolbar { gap: .55rem; }
    .toolbar .search-box { flex: 1 1 100%; max-width: none; }
    .toolbar .tb-actions { width: 100%; }
    .toolbar .tb-actions .btn { flex: 1 1 auto; }

    .page-card { padding: .85rem .9rem; }
    .page-card-row { gap: .7rem; }
    .page-title-block h4 { font-size: 1.12rem; }

    /* Tables stay readable by scrolling sideways instead of crushing the columns */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table td, .table th { white-space: nowrap; }
    .table td.text-start, .table th.text-start { white-space: normal; min-width: 150px; }

    /* Action buttons in a row: keep them on one line and let the table scroll */
    .table td .btn-sm { margin-bottom: .15rem; }

    .stat-card { padding: .85rem .9rem; gap: .7rem; }
    .stat-card .stat-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .stat-card .stat-value { font-size: 1.25rem; }

    .link-card .lc-value { font-size: 1.7rem; }
    .link-card .lc-body { padding: .9rem 1rem; }

    /* Full-width popups on a phone — the fee screens are wide */
    .modal-dialog { margin: .5rem; }
    .modal-xl, .modal-lg { max-width: none; }
    .modal-body { padding: .9rem; }
    .modal-footer { padding: .7rem .9rem; }
    .modal-footer .btn { flex: 1 1 auto; }

    .table-foot { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

@media (max-width: 575.98px) {
    .topbar .college-name { font-size: .82rem; }
    .content-area { padding: .85rem .7rem; }
    .fee-tile.ft-big .ft-v { font-size: 1.3rem; }
    .btn { padding: .42rem .7rem; }
    .nav-tabs .nav-link { padding: .5rem .7rem; font-size: .82rem; }
}

/* ---------------- Sortable tables ---------------- */
.table thead th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.35rem;
}
.table thead th.sortable:hover { color: var(--primary); background: #eef3fc; }
.table thead th.sortable::after {
    content: "";
    position: absolute;
    right: .5rem; top: 50%;
    margin-top: -7px;
    width: 8px; height: 14px;
    opacity: .38;
    background-repeat: no-repeat;
    background-position: center top, center bottom;
    background-size: 8px 5px, 8px 5px;
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%2355637a' d='M4 0 8 5H0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%2355637a' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
}
.table thead th.sortable.sort-asc::after {
    opacity: 1;
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%231b5fe0' d='M4 0 8 5H0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23c7cedb' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
}
.table thead th.sortable.sort-desc::after {
    opacity: 1;
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23c7cedb' d='M4 0 8 5H0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%231b5fe0' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
}
.table thead th.sortable.sort-asc, .table thead th.sortable.sort-desc { color: var(--primary); }

/* "Not Studying" tag shown under a student name */
.ns-tag {
    display: inline-block;
    margin-top: .15rem;
    font-size: .68rem; font-weight: 700;
    color: #c81e1e; background: #fdecec;
    border: 1px solid #f7cfcf; border-radius: 5px;
    padding: .1rem .35rem; line-height: 1.3;
    white-space: nowrap;
}
.ns-name { display: block; }

/* Fee tiles used on the Collect Fee screen */
.fee-tile {
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: .6rem .7rem;
    background: #fff;
    height: 100%;
}
.fee-tile .ft-k { font-size: .7rem; color: var(--muted); display: block; line-height: 1.3; }
.fee-tile .ft-v { font-size: 1.02rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.fee-tile.t-blue   { background: #f2f6ff; border-color: #dde7fd; }
.fee-tile.t-green  { background: #eefaf3; border-color: #d3f0e0; }
.fee-tile.t-green  .ft-v { color: #12864a; }
.fee-tile.t-amber  { background: #fff7ec; border-color: #fbe6c8; }
.fee-tile.t-amber  .ft-v { color: #b96a00; }
.fee-tile.t-red    { background: #fef2f2; border-color: #fbdada; }
.fee-tile.t-red    .ft-v { color: #c81e1e; }
.fee-tile.t-grey   { background: #f7f9fc; }
.fee-tile.t-violet { background: #f6f3ff; border-color: #e3daff; }
.fee-tile.t-violet .ft-v { color: #5b3fc4; }
.fee-tile.t-cyan   { background: #eff9ff; border-color: #cfeaf9; }
.fee-tile.t-cyan   .ft-v { color: #0369a1; }

/* One semester's figures, sat above its fee table. Slightly bigger than the
   plain tile because these are the numbers the counter reads out to a parent. */
.sem-tiles .fee-tile { padding: .55rem .7rem; }
.sem-tiles .ft-k { font-size: .72rem; }
.sem-tiles .ft-v { font-size: 1.12rem; }

/* Edit Admission Details + Print Admission Form: always side by side. On a phone the pair
   takes the full row and each button gets half of it, so they never wrap onto two lines. */
.adm-actions { display: flex; flex-wrap: nowrap; gap: .5rem; margin-left: auto; }
.adm-actions .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
    .adm-actions { width: 100%; margin-left: 0; }
    .adm-actions .btn { flex: 1 1 0; min-width: 0; font-size: .74rem; padding: .3rem .35rem; }
    .adm-actions .btn .bi { margin-right: .25rem !important; }
}
@media (max-width: 359.98px) {
    .adm-actions .btn { font-size: .66rem; padding-left: .2rem; padding-right: .2rem; }
    .adm-actions .btn .bi { display: none; }
}

/* Fee Name multi-picker in the Collect Fee modal */
.cf-names > .form-select { cursor: pointer; }
.cf-names .dropdown-menu { max-height: 280px; overflow-y: auto; min-width: 260px; }
.cf-name-opt {
    display: flex; align-items: center; gap: .5rem;
    padding: .3rem .4rem; border-radius: 6px; cursor: pointer;
    font-size: .86rem; margin-bottom: 0;
}
.cf-name-opt:hover { background: #f2f6ff; }
.cf-name-opt input:disabled + span { opacity: .5; }

/* The figures the counter actually reads: bigger box, bigger number, room to breathe
   so a five-digit amount never runs into its own label. */
.fee-tile.ft-big { padding: .8rem .9rem; }
.fee-tile.ft-big .ft-k { font-size: .78rem; margin-bottom: .15rem; }
.fee-tile.ft-big .ft-v { font-size: 1.55rem; letter-spacing: -.4px; display: block; }
.fee-tile .ft-v { display: block; word-break: break-word; }

/* Money boxes in the Collect Fee form */
.amount-input { font-size: 1.15rem !important; letter-spacing: -.2px; }
.amount-due   { background: #fef2f2 !important; color: #c81e1e !important; border-color: #fbdada !important; }

/* Practical batch money strip, sat on the bottom border of its student list */
.pf-money {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    padding: .9rem 1rem;
    border-top: 1px solid var(--line);
    background: #f7f9fc;
}
.pf-money-item { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pf-money .pf-k { font-size: .8rem; color: var(--muted); font-weight: 600; }
.pf-money .pf-v { font-size: 1.45rem; font-weight: 700; letter-spacing: -.4px; line-height: 1.2; }
.pf-money .pf-sub { font-size: .74rem; color: var(--muted); }
@media (max-width: 991.98px) {
    .pf-money { grid-template-columns: repeat(2, 1fr); }
    .pf-money .pf-v { font-size: 1.2rem; }
}

/* A date box locked to the day its practical was held */
input.is-locked { background: #f1f3f7; cursor: not-allowed; }

/* Fee amount shown above an attendance / file badge in the practical list */
.amt-over { display: block; font-weight: 600; font-size: .82rem; color: var(--ink); line-height: 1.2; }
.amt-over.amt-nil { color: var(--muted); font-weight: 500; }

/* Heading block that only exists on a printed report */
.print-only { display: none; }
.report-print-head { text-align: center; margin-bottom: .7rem; }
.report-print-head h2 { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -.2px; }
.report-print-head h3 {
    font-size: .98rem; font-weight: 700; margin: .45rem 0 .3rem;
    text-transform: uppercase; letter-spacing: .5px;
    border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; padding: .22rem 0;
}
.report-print-head .rp-sub { font-size: .74rem; color: #444; }
.report-print-head .rp-when { margin-top: .3rem; }
.report-print-head .rp-filters {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .9rem;
    font-size: .76rem; margin-top: .2rem;
}
.report-print-head .rp-k { color: #555; }

/* ---------------- Print ---------------- */
@media print {
    .print-only { display: block !important; }
    .no-print, .sidebar, .topbar, .sidebar-backdrop, footer { display: none !important; }
    .page-title-block, .toolbar, .pagination { display: none !important; }
    body { background: #fff; }
    .main-wrapper { margin-left: 0; padding-top: 0; }
    .content-area { padding: 0; }
    .card, .page-card, .table-card, .profile-head, .info-panel { box-shadow: none; }
    .tab-content > .tab-pane { display: block !important; opacity: 1 !important; }
    .table thead th.sortable { padding-right: .75rem; }
    .table thead th.sortable::after { display: none; }
}

/* ============================================================
   Late fixes — client review, Aug 2026
   ============================================================ */

/* Bootstrap's .text-warning (#ffc107) is far too pale on white; every
   "pending discount" figure in the app uses it. Darken it once, here. */
.text-warning { color: #b45309 !important; }
.pf-v.text-warning, .fee-tile.t-amber .ft-v { color: #b45309 !important; }
.stat-amber .stat-value, .stat-amber h6 { color: #b45309 !important; }
.lc-amber .lc-value { color: #b45309 !important; }
.badge.bg-warning { background: #fdecd3 !important; color: #92400e !important; }

/* Grab-and-drag horizontal scrolling. Without it the only way to move a wide
   table sideways is to reach the scrollbar at the very bottom of it. */
.table-responsive.drag-scroll { cursor: grab; }
.table-responsive.drag-scroll.dragging { cursor: grabbing; user-select: none; }
.table-responsive.drag-scroll.dragging a,
.table-responsive.drag-scroll.dragging button { pointer-events: none; }
/* Keep a visible scrollbar on the top edge too, so the offset is obvious */
.table-responsive::-webkit-scrollbar { height: 9px; }
.table-responsive::-webkit-scrollbar-thumb { background: #c9d2e0; border-radius: 5px; }
.table-responsive::-webkit-scrollbar-thumb:hover { background: #aab6c8; }
.table-responsive::-webkit-scrollbar-track { background: #f1f4f9; border-radius: 5px; }

/* Filter bars: a lone control on its own row used to stretch the full width */
.filter-row .col-auto-narrow { max-width: 260px; }


/* "View ..." link under a stat tile, styled like the dashboard's card footers */
.stat-card .stat-link {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .25rem; font-size: .78rem; font-weight: 600;
    text-decoration: none; color: inherit;
}
.stat-card .stat-link:hover { text-decoration: underline; }

/* Practical batch header — the subject line in a box of its own, and the date and the
   three amounts in their own boxes below it, so the two never run into each other. */
.pf-head { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.pf-head h5 { font-weight: 700; color: var(--ink); }
.pf-meta { padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); background: #fafbfd; }
/* Deliberately a shade smaller than the semester tiles on the profile — these are
   reference figures, not the numbers a parent is read out. */
.pf-tiles .fee-tile { padding: .45rem .6rem; }
.pf-tiles .ft-k { font-size: .66rem; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.pf-tiles .ft-v { font-size: .95rem; }

/* ---------------- Action bar ----------------
   A row of page actions (Add Fee, Promote, Add Scholarship, Issue New Book …).
   On a phone the buttons used to wrap into a ragged right-aligned staircase, so below
   576px they become an even two-column grid and the labels wrap instead of overflowing. */
.action-bar {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: flex-end;
    gap: .5rem;
    margin-bottom: 1rem;
}
.action-bar .btn { white-space: normal; }
@media (max-width: 575.98px) {
    .action-bar {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: .5rem; align-items: stretch;
    }
    .action-bar > .btn, .action-bar > form, .action-bar > form > .btn { width: 100%; }
    /* An odd button left on its own last row spans both columns rather than sitting half-width */
    .action-bar > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .action-bar .btn { font-size: .82rem; padding-left: .5rem; padding-right: .5rem; }
    .action-bar .btn-wide { grid-column: 1 / -1; }
}

/* A card heading that carries its own actions. The buttons sit beside the title on a
   wide screen and drop to their own full-width row on a phone. */
.card-head {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: .6rem;
}
.card-head .ch-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 575.98px) {
    .card-head { flex-direction: column; align-items: stretch; }
    .card-head .ch-actions { width: 100%; }
    .card-head .ch-actions > .btn, .card-head .ch-actions > form { flex: 1 1 100%; }
    .card-head .ch-actions > form > .btn { width: 100%; }
}

/* ---------------- Phone layout guards ----------------
   Nothing on a page may push the body sideways; wide content scrolls inside its own box. */
@media (max-width: 575.98px) {
    .modal-title { font-size: 1rem; }
    .modal-header { padding: .75rem .9rem; gap: .5rem; }
    .modal-body { padding: .85rem .9rem; }
    /* The info strip at the top of a modal reads as stacked label/value pairs */
    .modal .info-panel .row > [class*="col-"] { padding: .5rem .75rem !important; }
    .modal .info-panel .row > [class*="col-"] + [class*="col-"] { border-top: 1px solid var(--line); }
    .stat-value { font-size: 1.15rem; }
    .filter-bar .fb-field { flex: 1 1 100%; min-width: 0; }
}