/* =====================================================================
   SACC Modern Theme
   Layered on top of Bootstrap 4 + the original style.css. Nothing here
   changes markup structure, only look & feel, so every existing page
   keeps working exactly as before but looks modern & consistent.
   Voucher/report print pages define their own inline <style> blocks
   which are rendered after this file in the DOM, so print output is
   unaffected (this was already true before this change).
   ===================================================================== */

:root{
    --brand: #2454ff;
    --brand-dark: #173bb0;
    --brand-light: #eaf0ff;
    --ink: #16213e;
    --muted: #6b7280;
    --bg: #f4f6fb;
    --card: #ffffff;
    --border: #e6e9f2;
    --success: #16a34a;
    --danger: #e11d48;
    --warning: #f59e0b;
    --info: #0ea5e9;
    --radius: 12px;
    --shadow: 0 2px 10px rgba(22, 33, 62, .06);
    --shadow-lg: 0 12px 32px rgba(22, 33, 62, .12);
}

*{ box-sizing: border-box; }

html, body{
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: hidden;
}

body{
    background-color: var(--bg) !important;
    font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Preloader ---------- */
#preloader{
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: none; /* shown via jQuery fadeIn/fadeOut during AJAX actions only */
}
.loader-brand{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--brand);
    font-weight: 600;
}
.loader-brand img{ height: 56px; margin-bottom: 10px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ---------- Top Navbar ---------- */
/* Background = theme colour; --nav-fg (set in header.php) is white or dark, whichever reads best on it */
.app-navbar{
    --nfg: rgb(var(--nav-fg, 255,255,255));
    background: var(--brand);
    border-bottom: 1px solid rgba(var(--nav-fg, 255,255,255), .12);
    box-shadow: 0 6px 20px rgba(22,33,62,.14);
    padding: 8px 24px;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.app-navbar .navbar-brand{ display:flex; align-items:center; gap:10px; color:var(--nfg) !important; margin-right:22px; }
.app-navbar .navbar-brand img{ border-radius:10px; background:#fff; padding:3px; }
.app-navbar .brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.app-navbar .brand-text strong{ font-size:15.5px; font-weight:800; letter-spacing:.1px; color:var(--nfg); }
.app-navbar .brand-text small{ font-size:11px; color:var(--nfg); opacity:.75; font-weight:500; }
.app-navbar .navbar-toggler{ border:1px solid rgba(var(--nav-fg, 255,255,255), .35); border-radius:10px; padding:6px 10px; color:var(--nfg); }
.app-navbar .navbar-toggler-icon{ background-image:none !important; position:relative; width:22px; height:2px; background:var(--nfg); display:inline-block; vertical-align:middle; }
.app-navbar .navbar-toggler-icon::before, .app-navbar .navbar-toggler-icon::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:var(--nfg); }
.app-navbar .navbar-toggler-icon::before{ top:-7px; } .app-navbar .navbar-toggler-icon::after{ top:7px; }
.app-navbar .nav-item{ display:flex; align-items:center; position:relative; }
.app-navbar .nav-link{
    color: var(--nfg) !important;
    opacity: .88;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 13px !important;
    border-radius: 10px;
    margin: 0 2px;
    transition: background .15s ease, opacity .15s ease;
    white-space: nowrap;
}
.app-navbar .nav-link i{ margin-right:7px; width:16px; text-align:center; }
.app-navbar .nav-link:hover{ background: rgba(var(--nav-fg, 255,255,255), .14); opacity:1; }
.app-navbar .nav-item.active > .nav-link{ background: rgba(var(--nav-fg, 255,255,255), .2); opacity:1; box-shadow: inset 0 -2px 0 var(--nfg); }
.app-navbar .dropdown-toggle::after{ margin-left:7px; vertical-align:.15em; }
.app-navbar .nav-menu{
    border:1px solid var(--border); border-radius:14px; padding:8px; margin-top:10px;
    box-shadow: var(--shadow-lg); min-width:220px;
}
.app-navbar .nav-menu .dropdown-item{ border-radius:9px; padding:9px 12px; font-weight:500; font-size:14px; display:flex; align-items:center; gap:10px; color:var(--ink); }
.app-navbar .nav-menu .dropdown-item i{ width:16px; text-align:center; color:#9aa3b5; }
.app-navbar .nav-menu .dropdown-item:hover{ background:var(--brand-light); color:var(--brand); }
.app-navbar .nav-menu .dropdown-item:hover i{ color:var(--brand); }
.app-navbar .nav-menu .dropdown-item.active{ background:var(--brand); color:#fff; }
.app-navbar .nav-menu .dropdown-item.active i{ color:#fff; }
.app-navbar .nav-menu .dropdown-item.text-danger:hover{ background:#fff1f2; color:var(--danger) !important; }
.app-navbar .nav-user{ margin-left:10px; padding-left:12px; border-left:1px solid rgba(var(--nav-fg, 255,255,255), .25); }
.app-navbar .btn-profile{
    background: rgba(var(--nav-fg, 255,255,255), .12); color: var(--nfg);
    border: 1px solid rgba(var(--nav-fg, 255,255,255), .28); border-radius: 30px;
    padding: 4px 12px 4px 4px; display:flex; align-items:center; gap:8px;
    font-weight:600; font-size:13.5px;
}
.app-navbar .btn-profile:hover, .app-navbar .btn-profile:focus{ background: rgba(var(--nav-fg, 255,255,255), .22); color: var(--nfg); box-shadow:none; }
.avatar-circle{
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--nfg, #fff);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}
.profile-drop .dropdown-menu{
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    margin-top: 10px;
}
.profile-drop .dropdown-item{
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
}
.profile-drop .dropdown-item i{ width: 18px; margin-right: 6px; color: var(--muted); }
.profile-drop .dropdown-item:hover{ background: var(--brand-light); }

/* ---------- Layout / Containers ---------- */
section.front{
    display: block;
    width: 100%;
    padding: 26px 0 60px;
}
.container{ max-width: 1240px; }

/* ---------- Cards ---------- */
.card, .panel, .heads{
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.sacc-card{
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 22px;
    margin-bottom: 22px;
}

.sacc-card h1, .sacc-card h2, .sacc-card h3{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--ink);
}
.sacc-card hr{ border-top: 1px solid var(--border); margin: 12px 0 18px; }

/* Stat / KPI cards for the dashboard */
.stat-card{
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    height: calc(100% - 22px);   /* equal-height cards in a row, keeping the 22px gap below */
}
@media (max-width: 767.98px){ .stat-card{ height: auto; } }
.stat-card .stat-icon{
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}
.stat-card .stat-icon.bg-blue{ background: linear-gradient(135deg,#2454ff,#5b8dff); }
.stat-card .stat-icon.bg-green{ background: linear-gradient(135deg,#16a34a,#4ade80); }
.stat-card .stat-icon.bg-red{ background: linear-gradient(135deg,#e11d48,#fb7185); }
.stat-card .stat-icon.bg-amber{ background: linear-gradient(135deg,#f59e0b,#fbbf24); }
.stat-card .stat-icon.bg-purple{ background: linear-gradient(135deg,#7c3aed,#a78bfa); }
.stat-card .stat-label{ color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.stat-card .stat-value{ font-size: 22px; font-weight: 800; color: var(--ink); }
.stat-card .stat-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Quick action tiles (dashboard shortcuts) */
.quick-tile{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 22px 20px;
    height: calc(100% - 24px);   /* equal-height tiles per row, leaving a 24px row gap */
    margin-bottom: 24px;
    text-decoration: none !important;
    color: var(--ink) !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.quick-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand, #2454ff); }
/* tiles placed outside a grid column / on small screens: height can't be 100% of a column */
@media (max-width: 767.98px){ .quick-tile{ height: auto; margin-bottom: 16px; } }
.quick-tile .icon{
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
}
.quick-tile .tile-title{ font-weight: 700; font-size: 15.5px; }
.quick-tile .tile-desc{ font-size: 12.5px; color: var(--muted); }

/* Old giant colorful home buttons -> keep working, restyle to match */
.act-btn, .dc-btn, .exp-btn{
    width: 100%;
    font-size: 16px !important;
    font-weight: 700;
    margin-top: 0;
    border-radius: var(--radius) !important;
    padding: 22px 16px !important;
    border: none !important;
    box-shadow: var(--shadow);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.front .icon{ font-size: 30px; }

/* ---------- Buttons ---------- */
.btn{ border-radius: 8px; font-weight: 600; font-size: 14px; }
.btn-primary, .btn-warning.btn-lg, input[type=submit]{ }
.btn-primary{ background: var(--brand); border-color: var(--brand); }
.btn-primary:hover{ background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-outline-primary{ color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover{ background: var(--brand); border-color: var(--brand); }

/* ---------- Forms ---------- */
.form-control{
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 14.5px;
    padding: 10px 12px;
    height: auto;
}
.form-control:focus{
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-light);
}
label{ font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 4px; }

/* ---------- Tables ---------- */
.table{ background: var(--card); }
.table thead th{
    background: var(--brand-light) !important;
    color: var(--brand-dark);
    border: none !important;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    vertical-align: middle;
}
.thead-dark th{
    background: var(--brand-light) !important;
    color: var(--brand-dark) !important;
    border-color: var(--border) !important;
}
.table td{ vertical-align: middle; font-size: 14px; border-color: var(--border); }
.table-hover tbody tr:hover{ background: var(--brand-light); }
.table-responsive{ border-radius: var(--radius); }

/* ---------- Alerts ---------- */
.alert{ border: none; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow); }
.alert-success{ background: #ecfdf3; color: #067647; }
.alert-danger{ background: #fef2f2; color: #b42318; }
.alert-warning{ background: #fffaeb; color: #b54708; }
.alert-info{ background: #eff8ff; color: #175cd3; }

/* ---------- Settings sidebar ---------- */
.vertical-nav{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
}
.vertical-nav .nav-link{
    color: var(--ink);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}
.vertical-nav .nav-link:hover{ background: var(--brand-light); color: var(--brand-dark); }
.vertical-nav .nav-item.bg-danger .nav-link{ color: #fff !important; border-radius: 8px; }

/* ---------- Footer ---------- */
.app-footer{
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 16px 26px;
    margin-top: 40px;
    color: var(--muted);
    font-size: 13px;
}
.app-footer h6{ margin: 0; font-weight: 500; color: var(--muted); }
.app-footer a{ text-decoration: none; }

/* ---------- Badges / status pills ---------- */
.pill{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
}
.pill-success{ background: #ecfdf3; color: #067647; }
.pill-warning{ background: #fffaeb; color: #b54708; }
.pill-danger{ background: #fef2f2; color: #b42318; }
.pill-muted{ background: #f1f2f6; color: #6b7280; }

/* ---------- Login page ---------- */
.login-wrap{
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}
.login-card{
    width: 100%;
    max-width: 380px;
    background: var(--card);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 36px 34px 28px;
    text-align: center;
}
.login-card img.login-logo{ height: 64px; margin-bottom: 10px; }
.login-card h1{ font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.login-card p.sub{ font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.login-card input.form-control{ margin-bottom: 14px; text-align: left; }
.login-card .btn-login{
    width: 100%;
    background: linear-gradient(100deg, var(--brand), var(--brand-dark));
    color: #fff;
    border: none;
    padding: 11px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: .2px;
}
.login-card .btn-login:hover{ opacity: .92; }
.login-foot{ margin-top: 20px; font-size: 12px; color: var(--muted); text-align: center; }
.login-foot a{ color: var(--brand); font-weight: 600; text-decoration: none; }

/* ---------- Small helpers ---------- */
.text-brand{ color: var(--brand) !important; }
.bg-brand{ background: var(--brand) !important; }
.section-title{ font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.section-sub{ color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }
.avatar-photo{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.avatar-photo-lg{ width: 96px; height: 96px; border-radius: 14px; object-fit: cover; border: 1px solid var(--border); }

@media (max-width: 991px){
    .app-navbar .navbar-nav{ background:rgba(var(--nav-fg, 255,255,255), .08); border-radius:12px; padding:8px; margin-top:10px; }
    .app-navbar .nav-item{ display:block; }
    .app-navbar .nav-user{ margin:8px 0 0; padding:8px 0 0; border-left:0; border-top:1px solid rgba(var(--nav-fg, 255,255,255), .2); }
    .app-navbar .nav-menu{ box-shadow:none; margin-top:4px; }
}

/* ---------- Student form ---------- */
.student-form label{ display:block; margin-bottom:3px; }
.student-form .sf-group{ margin-bottom:20px; }
.student-form .opt-tag{ font-weight:400; color:var(--muted); font-size:12px; }
.student-form small.text-muted{ display:block; margin-top:4px; font-size:12px; }
.student-form .photo-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.student-form .photo-row .avatar-photo-lg{ flex:0 0 auto; }
.student-form .doc-row .form-control{ margin-bottom:8px; }

/* ---------- Fund grid (CSS grid): waiver/increase, fee templates ---------- */
.fg{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.fg-head, .fg-row{ display:grid; grid-template-columns: minmax(130px,1.1fr) minmax(130px,1.1fr) minmax(130px,1.2fr) minmax(120px,.8fr) minmax(0,3.4fr); gap:12px; align-items:center; padding:12px 16px; }
.fg-head{ background:#eef2ff; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.fg-row{ border-top:1px solid var(--border); }
.fg-row:nth-child(even){ background:#fafbff; }
.fg-fund{ font-weight:600; color:var(--ink); }
.fg-cell{ min-width:0; }
.fg-cell .form-control{ width:100%; }
.fg-cell .fg-val{ color:var(--ink); }
.fg-lbl{ display:none; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:4px; }
.fg-months, .fg-head-months{ display:grid; grid-template-columns:repeat(13, minmax(0,1fr)); gap:5px; }
.fg-head-months span{ text-align:center; }
.fg-chip{ position:relative; margin:0; cursor:pointer; user-select:none; }
.fg-chip input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.fg-chip span{ display:block; text-align:center; padding:7px 0; font-size:12px; font-weight:600; border:1px solid var(--border); border-radius:8px; color:var(--muted); background:#fff; transition:.12s; }
.fg-chip input:checked + span{ background:var(--brand); border-color:var(--brand); color:#fff; }
.fg-chip input:focus-visible + span{ box-shadow:0 0 0 3px var(--brand-light); }
.fg-chip.paid span{ background:#e8f6ee; border-color:#bfe3cc; color:var(--success); cursor:not-allowed; }
.fg-chip.none span{ visibility:hidden; }
.fg-chip span small{ display:none; }
@media (max-width: 1100px){
    .fg-head{ display:none; }
    .fg-row{ grid-template-columns: repeat(3, minmax(0,1fr)); padding:14px; }
    .fg-fund, .fg-months{ grid-column: 1 / -1; }
    .fg-fund{ font-size:15px; }
    .fg-lbl{ display:block; }
    .fg-months{ grid-template-columns:repeat(auto-fill, minmax(54px,1fr)); }
    .fg-chip span{ padding:9px 0; }
    .fg-chip.none{ display:none; }
}
@media (max-width: 640px){
    .fg-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .fg-cell.fg-label{ grid-column: 1 / -1; order:1; }
    .fg-cell{ order:2; }
    .fg-months{ order:3; }
}
.fg-info{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:8px 20px; padding:12px 20px; background:#eef2ff; border-bottom:1px solid var(--border); font-weight:600; }
.fg-info small{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--muted); letter-spacing:.4px; }
.fg-toolbar{ display:grid; grid-template-columns: minmax(0,1fr); gap:6px; padding:16px 20px; border-bottom:1px solid var(--border); }
@media (min-width:700px){ .fg-toolbar{ grid-template-columns: 180px minmax(0,320px); align-items:center; } }
.fg-actions{ display:flex; flex-wrap:wrap; gap:10px; padding:16px 20px; }
.fg-note{ font-size:12.5px; color:var(--muted); padding:0 20px 4px; }
.fg-reason{ display:grid; grid-template-columns:minmax(0,1fr); max-width:520px; padding:16px 20px 0; gap:4px; }

/* ---------- Settings area: full width with the left menu always present ---------- */
.sett-wide{ width:100%; max-width:none; padding-left:24px; padding-right:24px; }
.sett-wide .vertical-nav .nav-link{ white-space:normal; }
@media (max-width: 767px){ .sett-wide{ padding-left:12px; padding-right:12px; } }

.sub-add, .sub-del{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; padding:0; margin:0; font-size:17px; line-height:1; font-weight:700; cursor:pointer; background:#fff; transition:.12s; }
.sub-add{ border:1.5px solid var(--brand); color:var(--brand); }
.sub-add:hover{ background:var(--brand); color:#fff; }
.sub-del{ border:1.5px solid var(--danger); color:var(--danger); }
.sub-del:hover{ background:var(--danger); color:#fff; }
.fg-head.has-act, .fg-row.has-act{ grid-template-columns: 30px minmax(110px,1fr) minmax(130px,1.1fr) minmax(130px,1.2fr) minmax(110px,.8fr) minmax(96px,.7fr) minmax(0,3.4fr); }
.has-act .fg-months, .has-act .fg-head-months{ grid-template-columns:repeat(12, minmax(0,1fr)); }
.fg-actc{ display:flex; justify-content:center; }
@media (max-width:1100px){ .fg-row.has-act{ position:relative; grid-template-columns:repeat(3,minmax(0,1fr)); } .fg-row.has-act .fg-actc{ position:absolute; top:12px; right:14px; } .fg-row.has-act .fg-once{ grid-column:1 / -1; } }
.inc-extra{ box-shadow: inset 3px 0 0 var(--brand); }
.rf-col{ margin-bottom:12px; }

    .exp-panel{ background:#fff; border:1px solid var(--border,#e3e8ef); border-radius:12px; padding:22px 24px; box-shadow:0 1px 3px rgba(16,24,40,.06); }
    .exp-title{ display:flex; align-items:center; gap:10px; margin:0 0 4px; font-size:22px; font-weight:700; }
    .exp-title i{ color:var(--brand,#2454ff); }
    .exp-sub{ color:#6b7280; font-size:13.5px; margin:0 0 16px; }
    .exp-form{ display:grid; gap:10px; align-items:end; padding:16px; background:#f8fafc; border:1px solid #e5eaf1; border-radius:10px; }
    .exp-form.f1{ grid-template-columns:minmax(0,1fr) auto; }
    .exp-form.f2{ grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto; }
    .exp-form label{ display:block; font-size:12px; font-weight:600; color:#4b5563; margin:0 0 4px; text-transform:uppercase; letter-spacing:.03em; }
    @media (max-width:700px){ .exp-form.f1,.exp-form.f2{ grid-template-columns:1fr; } }
    .exp-filter{ display:grid; grid-template-columns:minmax(0,2fr) repeat(3, auto); gap:8px; margin:22px 0 8px; align-items:center; }
    .exp-filter:not(:has(select[name=head_f])){ grid-template-columns:minmax(0,2fr) auto auto auto; }
    @media (max-width:700px){ .exp-filter{ grid-template-columns:1fr 1fr; } .exp-filter input[type=search]{ grid-column:1/-1; } }
    .exp-hint{ font-size:12.5px; color:#6b7280; margin:4px 0 10px; }
    .exp-card-tbl{ border:1px solid #e5eaf1; border-radius:10px; overflow:hidden; }
    table.exp-table{ margin:0; width:100%; border-collapse:collapse; }
    .exp-table thead th{ background:#f1f5f9; color:#475569; font-size:12px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; padding:11px 14px; border:0; border-bottom:1px solid #e5eaf1; }
    .exp-table tbody td, .exp-table tbody th{ padding:11px 14px; border:0; border-bottom:1px solid #eef1f6; vertical-align:middle; background:#fff; }
    .exp-table tbody tr:last-child td, .exp-table tbody tr:last-child th{ border-bottom:0; }
    .exp-table tbody tr:hover td, .exp-table tbody tr:hover th{ background:#f8faff; }
    .exp-table .sl{ text-align:center; color:#94a3b8; font-weight:600; }
    .exp-table .empty{ text-align:center; color:#94a3b8; padding:28px; }
    .exp-table td.act{ text-align:right; white-space:nowrap; }
    .ib{ display:inline-flex; align-items:center; gap:5px; height:30px; min-width:30px; justify-content:center; padding:0 9px; border:1px solid #d9e0ea; border-radius:7px; background:#fff; color:#475569; font-size:12.5px; font-weight:600; text-decoration:none !important; transition:.15s; }
    .ib:hover{ background:#eef2ff; border-color:var(--brand,#2454ff); color:var(--brand,#2454ff); }
    .ib-edit{ color:#b42318; border-color:#f3c6c1; } .ib-edit:hover{ background:#fef3f2; border-color:#b42318; color:#b42318; }
    .exp-pager{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0 0; font-size:13px; }
    .drag-handle{ cursor:grab; text-align:center; color:#a3adbd; width:40px; }
    .drag-handle:hover{ color:var(--brand,#2454ff); }
    tr.dragging{ opacity:.4; }
    tr.drop-gap td{ padding:0 !important; border:2px dashed var(--brand,#2454ff) !important; background:var(--brand-light,#eef2ff) !important; text-align:center; color:var(--brand,#2454ff); font-weight:700; font-size:13px; vertical-align:middle; transition:height .12s; }
    tr.drop-above td, tr.drop-above th{ box-shadow: inset 0 3px 0 var(--brand,#2454ff); }
    tr.drop-below td, tr.drop-below th{ box-shadow: inset 0 -3px 0 var(--brand,#2454ff); }

/* ---- shared settings panels (funds, bank accounts, opening balance) ---- */
.exp-form.f3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.exp-form.f2e{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.exp-form .full{ grid-column:1/-1; }
.exp-form .hint{ font-size:12px; color:#6b7280; margin-top:4px; }
.exp-actions{ display:flex; gap:8px; align-items:center; }
.exp-table td.num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.exp-table td.ctr{ text-align:center; }
.pill-on{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:700; background:#e7f8ee; color:#067647; }
.pill-off{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:700; background:#f2f4f7; color:#667085; }
@media (max-width:900px){ .exp-form.f3, .exp-form.f2e{ grid-template-columns:1fr; } }

/* ---- settings sidebar (grouped) ---- */
.sett-nav{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px; }
.sett-group{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#98a2b3; padding:14px 12px 6px; }
.sett-group:first-child{ padding-top:6px; }
.sett-link{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:var(--ink); font-size:13.5px; font-weight:600; text-decoration:none !important; line-height:1.3; }
.sett-link i{ width:18px; text-align:center; color:#98a2b3; flex:none; }
.sett-link:hover{ background:var(--brand-light); color:var(--brand-dark); }
.sett-link:hover i{ color:var(--brand); }
.sett-link.active{ background:var(--brand); color:rgb(var(--nav-fg,255,255,255)); }
.sett-link.active i{ color:inherit; }
.sett-link small{ display:block; font-weight:500; opacity:.75; font-size:11px; }
.sett-link.sett-danger i{ color:#d92d20; }

/* ================= Settings list pages (funds, sub funds, banks, opening balance) ================= */
.exp-panel{ padding:28px 32px; }
.lp-head{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.lp-ico{ width:48px; height:48px; flex:none; border-radius:12px; background:var(--brand-light); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:20px; }
.lp-ttl h1{ margin:0; font-size:22px; font-weight:700; line-height:1.2; display:flex; align-items:center; gap:10px; }
.lp-ttl p{ margin:4px 0 0; color:#6b7280; font-size:13.5px; line-height:1.4; }
.lp-badge{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--brand-light); color:var(--brand-dark); }
.exp-form{ gap:16px 20px; padding:20px 22px; margin:0 0 28px; border-radius:12px; align-items:end; }
.exp-form label{ margin:0 0 6px; }
.exp-form .form-control, .lt-bar .form-control{ height:42px; }
.exp-form .btn{ height:42px; padding:0 22px; white-space:nowrap; }
.exp-form .full{ grid-column:1/-1; }
.exp-actions .btn{ height:42px; display:inline-flex; align-items:center; }
.lt-bar{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:0 0 16px; }
.lt-search{ position:relative; flex:1 1 280px; min-width:220px; }
.lt-search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#98a2b3; pointer-events:none; }
.lt-search .form-control{ padding-left:38px; width:100%; }
.lt-sel, .lt-per{ display:flex; flex-direction:column; min-width:150px; }
.lt-sel label, .lt-per label{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#667085; margin:0 0 4px; }
.lt-bar .btn{ height:42px; display:inline-flex; align-items:center; gap:6px; }
.exp-hint{ margin:0 0 12px; padding:10px 14px; background:#f8fafc; border:1px solid #e5eaf1; border-radius:8px; }
.exp-card-tbl{ border:1px solid #e5eaf1; border-radius:12px; overflow:auto; }
.exp-table thead th{ padding:13px 18px; white-space:nowrap; }
.exp-table tbody td, .exp-table tbody th{ padding:14px 18px; }
.exp-table td.act{ white-space:nowrap; }
.ib{ height:32px; }
.lt-pager{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:18px; }
.lt-count{ color:#667085; font-size:13px; }
.lt-pages{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.lt-pg{ min-width:36px; height:36px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--ink); font-size:13px; font-weight:600; text-decoration:none !important; }
.lt-pg:hover{ border-color:var(--brand); color:var(--brand); }
.lt-pg.cur{ background:var(--brand); border-color:var(--brand); color:rgb(var(--nav-fg,255,255,255)); }
.lt-pg.off{ opacity:.45; pointer-events:none; }
.lt-gap{ color:#98a2b3; padding:0 4px; }
@media (max-width:700px){ .exp-panel{ padding:20px 16px; } .lt-sel, .lt-per{ flex:1 1 140px; } }

/* Text on any theme-coloured background always uses the auto-picked contrast colour (--nav-fg is an "r,g,b" triple) */
.sett-link.active, .sett-link.active:hover, .sett-link.active:focus{ background:var(--brand) !important; color:rgb(var(--nav-fg,255,255,255)) !important; }
.sett-link.active i, .sett-link.active small{ color:inherit !important; }
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active{ color:rgb(var(--nav-fg,255,255,255)) !important; }
.page-item.active .page-link{ background:var(--brand); border-color:var(--brand); color:rgb(var(--nav-fg,255,255,255)); }
.lt-wrap{ margin-top:4px; }

/* ---- user forms & voucher settings ---- */
.uf-card{ background:#fff; border:1px solid #e5eaf1; border-radius:12px; padding:22px 24px; margin-bottom:20px; }
.uf-h{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; margin:0 0 18px; }
.uf-h i{ color:var(--brand); width:20px; text-align:center; }
.uf-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; }
.uf-grid label, .perm-group label.hd{ display:block; font-size:12px; font-weight:600; color:#4b5563; margin:0 0 6px; text-transform:uppercase; letter-spacing:.03em; }
.uf-grid .form-control{ height:42px; }
.uf-grid .hint{ font-size:12px; color:#6b7280; margin-top:4px; }
.uf-all, .perm-gall{ margin-left:auto; background:none; border:1px solid #d9e0ea; border-radius:7px; padding:4px 12px; font-size:12px; font-weight:600; color:#475569; cursor:pointer; }
.uf-all:hover, .perm-gall:hover{ border-color:var(--brand); color:var(--brand); }
.perm-group{ margin-top:6px; padding-top:14px; border-top:1px dashed #e5eaf1; }
.perm-group:first-of-type{ border-top:0; padding-top:0; }
.perm-title{ display:flex; align-items:center; font-size:13px; font-weight:700; color:#344054; margin-bottom:10px; }
.perm-title i{ color:#98a2b3; margin-right:6px; }
.perm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.perm-tile, .vs-row{ position:relative; display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid #e5eaf1; border-radius:10px; cursor:pointer; margin:0; background:#fff; transition:.15s; }
.perm-tile:hover, .vs-row:hover{ border-color:var(--brand); }
.perm-tile.on, .vs-row.on{ background:var(--brand-light); border-color:var(--brand); }
.perm-tile input, .vs-row input{ position:absolute; opacity:0; pointer-events:none; }
.perm-tile .lbl{ font-size:13.5px; font-weight:600; line-height:1.3; }
.sw{ flex:none; width:36px; height:20px; border-radius:20px; background:#d0d5dd; position:relative; transition:.15s; }
.sw::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.25); }
input:checked ~ .sw, .perm-tile input:checked + .sw{ background:var(--brand); }
input:checked ~ .sw::after, .perm-tile input:checked + .sw::after{ left:18px; }
.vs-row{ justify-content:space-between; margin-bottom:10px; padding:14px 18px; }
.vs-row:last-child{ margin-bottom:0; }
.vs-text b{ display:block; font-size:15px; font-weight:600; line-height:1.5; }
.vs-text small{ display:block; color:#6b7280; font-size:12.5px; margin-top:2px; }
.uf-bar{ display:flex; gap:10px; align-items:center; position:sticky; bottom:0; background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0)); padding:16px 0 4px; }
.u-name{ display:flex; align-items:center; gap:12px; }
.u-av{ overflow:hidden; width:36px; height:36px; flex:none; border-radius:50%; background:var(--brand-light); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; font-weight:800; }
@media (max-width:800px){ .uf-grid{ grid-template-columns:1fr; } }

/* ---- Transaction entry pages (Expenses, Account Transfer, Daily Collection Transfer) ---- */
.tx-wrap{ max-width:1400px; margin:0 auto; }
.tx-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.tx-bar .tx-title{ display:flex; align-items:center; gap:12px; }
.tx-bar .tx-ico{ width:46px; height:46px; border-radius:12px; background:var(--brand,#2454ff); color:rgb(var(--nav-fg,255,255,255)); display:flex; align-items:center; justify-content:center; font-size:20px; }
.tx-bar h1{ font-size:22px; font-weight:700; margin:0; } .tx-bar p{ margin:2px 0 0; font-size:13px; color:var(--muted,#6b7280); }
.tx-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.tx-actions .btn{ border-radius:999px; font-weight:600; font-size:13.5px; padding:6px 16px; }
.tx-card{ background:#fff; border:1px solid var(--border,#e3e8ef); border-radius:14px; box-shadow:0 1px 3px rgba(16,24,40,.06); margin-bottom:18px; overflow:hidden; }
.tx-card-h{ padding:14px 20px; font-weight:700; background:var(--brand-light,#eef2ff); border-bottom:1px solid var(--border,#e3e8ef); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.tx-card-b{ padding:18px 20px; }
.tx-ctx{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.tx-ctx label, .tx-lbl{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#4b5563; margin-bottom:5px; }
.tx-card .form-control{ height:42px; border-radius:9px; }
.tx-card textarea.form-control{ height:42px; min-height:42px; resize:vertical; padding-top:9px; }
.tx-card .select2-container{ width:100% !important; }
.tx-card .select2-container .select2-selection--single{ height:42px; border-radius:9px; border:1px solid #ced4da; }
.tx-card .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:40px; padding-left:12px; }
.tx-card .select2-container--default .select2-selection--single .select2-selection__arrow{ height:40px; }
.tx-grid{ width:100%; }
.tx-grid-h, .tx-row{ display:grid; gap:10px; align-items:start; padding:10px 20px; }
.tx-grid-h{ background:#f8fafc; border-bottom:1px solid var(--border,#e3e8ef); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#4b5563; }
.tx-row{ border-bottom:1px solid #eef1f5; position:relative; }
.tx-row:hover{ background:#fafcff; }
.tx-row.tx-bad .form-control{ border-color:#dc2626; }
.tx-row .tx-n{ position:absolute; left:4px; top:20px; font-size:11px; color:#9ca3af; }
.tx-rm{ border:0; background:transparent; color:#9ca3af; font-size:15px; height:42px; width:34px; border-radius:8px; }
.tx-rm:hover{ background:#fee2e2; color:#dc2626; }
.tx-amt{ text-align:right; font-weight:600; }
.tx-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; background:#f8fafc; }
.tx-total{ font-size:15px; } .tx-total b{ font-size:20px; color:var(--brand,#2454ff); margin-left:6px; }
.tx-foot .btn-primary{ min-width:170px; height:44px; font-weight:600; border-radius:10px; }
.tx-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:18px; }
.tx-stat{ background:#fff; border:1px solid var(--border,#e3e8ef); border-radius:12px; padding:14px 16px; }
.tx-stat small{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; color:#6b7280; letter-spacing:.03em; }
.tx-stat b{ font-size:21px; } .tx-stat span{ font-size:12px; color:#9ca3af; }
.tx-stat.hl{ background:var(--brand-light,#eef2ff); border-color:var(--brand,#2454ff); } .tx-stat.hl b{ color:var(--brand,#2454ff); }
.tx-empty{ padding:36px 20px; text-align:center; color:#9ca3af; }
.tx-empty i{ font-size:34px; display:block; margin-bottom:8px; }
.tx-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
@media (max-width:991px){ .tx-grid-h{ display:none; } .tx-row{ grid-template-columns:1fr !important; padding:14px 16px; border:1px solid #eef1f5; border-radius:10px; margin:10px 12px; } .tx-row .tx-n{ display:none; } }
.tx-ml{ display:none; font-size:11px; font-weight:700; text-transform:uppercase; color:#6b7280; margin-bottom:3px; }
@media (max-width:991px){ .tx-ml{ display:block; } }
.tx-cnt{ display:inline-block; min-width:24px; padding:1px 8px; margin-left:6px; border-radius:999px; background:var(--brand,#2454ff); color:rgb(var(--nav-fg,255,255,255)); font-size:12px; text-align:center; }
.tx-sumtxt{ font-weight:400; color:#4b5563; } .tx-sumtxt b{ font-size:17px; color:var(--brand,#2454ff); margin-left:4px; }
.tx-pill{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.tx-wait{ background:#fef3c7; color:#92400e; } .tx-ok{ background:#dbeafe; color:#1e40af; } .tx-fin{ background:#dcfce7; color:#166534; }
.tx-act{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:42px; }
.tx-chk{ width:22px; height:22px; cursor:pointer; accent-color:var(--brand,#2454ff); }
.tx-chk-l{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; cursor:pointer; margin:0; }
.tx-card .form-control:disabled{ background:#f8fafc; color:#374151; opacity:1; }
.tx-card select.form-control:disabled{ background-image:none; appearance:none; -webkit-appearance:none; }
.tx-del{ border-radius:9px; height:38px; width:42px; padding:0; }
.tx-row.tx-gone{ opacity:.35; }

/* Bengali text: the system Bengali fonts render small next to Latin, so Bengali glyphs are scaled up (Latin text is untouched) */
@font-face{
    font-family:'BnLarge'; font-weight:100 550;
    src:url('../fonts/NotoSansBengali-400.woff2') format('woff2'), local('Nirmala UI'), local('Noto Sans Bengali'), local('Kalpurush'), local('Siyam Rupali');
    unicode-range:U+0980-09FF, U+200C-200D, U+0964-0965;
    size-adjust:122%;
}
@font-face{
    font-family:'BnLarge'; font-weight:551 900;
    src:url('../fonts/NotoSansBengali-700.woff2') format('woff2'), local('Nirmala UI Bold'), local('Noto Sans Bengali Bold');
    unicode-range:U+0980-09FF, U+200C-200D, U+0964-0965;
    size-adjust:122%;
}
@media screen{
body, input, textarea, select, button, .select2-container, .select2-results__option, .select2-selection__rendered, .select2-search__field, table{
    font-family:'BnLarge', 'times new roman', sutonnyOMJ, serif;
}
}

/* keep the row number and the remove (x) button vertically centred on the row */
.tx-row{ align-items:center; }
.tx-row .tx-n{ top:50%; transform:translateY(-50%); }
.tx-row .tx-rm{ display:flex; align-items:center; justify-content:center; margin:0; padding:0; }

.tx-hint{ font-size:12.5px; margin-top:6px; min-height:16px; color:#6b7280; } .tx-hint.ok{ color:#15803d; } .tx-hint.bad{ color:#dc2626; font-weight:600; }
.tx-ctx small{ font-weight:400; }
.tx-ptag{ display:inline-block; margin-top:4px; font-size:11.5px; font-weight:600; background:var(--brand-light,#eef2ff); color:var(--brand,#2454ff); border-radius:999px; padding:2px 10px; }

/* Amount inputs (text boxes that accept only numbers): always styled like every other field and never wider than their cell */
input.num-dec, input[inputmode="decimal"]{
    display:block; width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
    height:42px; padding:10px 12px !important; border:1px solid var(--border,#e3e8ef) !important; border-radius:8px !important;
    font-size:14.5px; background:#fff; color:var(--ink,#111827); text-align:right; font-variant-numeric:tabular-nums;
}
input.num-dec:focus, input[inputmode="decimal"]:focus{ outline:0; border-color:var(--brand,#2454ff) !important; box-shadow:0 0 0 3px var(--brand-light,#eef2ff); }
input.num-dec:disabled{ background:#f3f4f6; }

.fg-cell input, .fg-cell select{ min-width:0; max-width:100%; }
.adj-table td input.num-dec{ min-width:90px !important; }


/* Application text size: a little larger on screen (reports / vouchers / receipts / login are not given this class and print is untouched).
   Change the number to make everything bigger or smaller. */
/* Scaled by font size (not CSS zoom): CSS zoom made native <select> lists flicker when opened and displaced Select2 / Popper menus. */
@media screen{
  html:has(body.app-zoom){ font-size:17.6px; }
  body.app-zoom{ font-size:1.1em; }
  body.app-zoom .form-control, body.app-zoom .btn, body.app-zoom .table, body.app-zoom .select2-container .select2-selection{ font-size:1rem; }
  body.app-zoom .form-control{ transition:none; }
}

/* bootstrap-select lists are placed by Popper in screen pixels, which the 110% page zoom shifts; pin them right under their button instead */
.bootstrap-select > .dropdown-menu.show{ transform:none !important; top:100% !important; left:0 !important; right:auto !important; bottom:auto !important; will-change:auto !important; }
.bootstrap-select.dropup > .dropdown-menu.show{ top:auto !important; bottom:100% !important; }


/* Collect Fees grid: bigger checkboxes, centred in their cell both ways */
#collectForm .table th, #collectForm .table td{ vertical-align:middle; }
#collectForm td.mc, #collectForm th.mc{ text-align:center; }
#collectForm input.month-cell, #collectForm input.month-toggle{ display:block; margin:0 auto; }
#collectForm input.pay-check, #collectForm input.month-toggle, #collectForm #selectAll{ width:19px; height:19px; cursor:pointer; accent-color:var(--brand,#2454ff); vertical-align:middle; }
#collectForm label:has(> #selectAll){ display:flex; align-items:center; gap:8px; margin:0; line-height:1.2; }
#collectForm #selectAll{ margin:0; flex:none; }
#collectForm input.once-check{ margin-right:8px; }
#collectForm .month-cell{ min-width:19px; }
#collectForm td:has(> input.once-check){ vertical-align:middle; }
#collectForm input.once-check{ margin:0 8px 0 0; vertical-align:middle; position:relative; top:-1px; }

/* Profile picture */
.avatar-circle{ overflow:hidden; }
.avatar-circle img, .u-av img, .pd-av img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.app-navbar .btn-profile .avatar-circle{ width:32px; height:32px; }
.pd-head{ display:flex; align-items:center; gap:12px; padding:10px 14px 8px; min-width:230px; }
.pd-head b{ display:block; color:var(--ink); line-height:1.2; } .pd-head small{ color:var(--muted); }
.pd-av{ width:46px; height:46px; flex:none; border-radius:50%; overflow:hidden; background:var(--brand-light); color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; }
.uf-photo{ display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.uf-photo img, .uf-photo .ph-empty{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--brand-light); flex:none; }
.uf-photo .ph-empty{ display:flex; align-items:center; justify-content:center; background:var(--brand-light); color:var(--brand); font-size:30px; }
.pf-card{ background:#fff; border:1px solid var(--border,#e6e9f2); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; max-width:900px; margin:0 auto; }
.pf-top{ display:flex; align-items:center; gap:22px; padding:26px 28px; background:linear-gradient(135deg,var(--brand-light),#fff); border-bottom:1px solid var(--border,#e6e9f2); flex-wrap:wrap; }
.pf-top .pf-av{ width:108px; height:108px; border-radius:50%; overflow:hidden; flex:none; border:4px solid #fff; box-shadow:0 2px 12px rgba(0,0,0,.18); background:var(--brand-light); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:800; }
.pf-top .pf-av img{ width:100%; height:100%; object-fit:cover; }
.pf-top h2{ margin:0 0 2px; font-size:22px; } .pf-top .pf-sub{ color:var(--muted); }
.pf-body{ padding:24px 28px 28px; }
.pf-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 22px; }
.pf-grid label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); margin-bottom:4px; }
.pf-ro{ padding:9px 12px; background:#f6f7fb; border:1px solid var(--border,#e6e9f2); border-radius:8px; min-height:40px; }
.pf-sec{ font-weight:700; margin:22px 0 12px; color:var(--ink); }
@media (max-width:640px){ .pf-grid{ grid-template-columns:minmax(0,1fr); } }

/* Student form: select2 (Home District) looks like the other inputs */
.student-form .select2-container{ width:100% !important; }
.student-form .select2-container--default .select2-selection--single{ height:auto; min-height:calc(1.5em + 20px + 2px); border:1px solid var(--border); border-radius:8px; background:#fff; display:flex; align-items:center; }
.student-form .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:1.5; padding:10px 30px 10px 12px; font-size:14.5px; color:#495057; }
.student-form .select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%; top:0; right:6px; }
.student-form .select2-container--default.select2-container--focus .select2-selection--single, .student-form .select2-container--default.select2-container--open .select2-selection--single{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }