/* ==========================================================================
   Admin / management console styling
   Dense, flat "SaaS console" system — solid sidebar, compact spacing,
   quiet color usage. Built on top of the public site's brand tokens
   (--a-primary / --a-accent) so white-labeling still works.
   ========================================================================== */

:root {
  --a-primary: #0f6b3c;
  --a-primary-dark: #0a4d2b;
  --a-primary-light: #e8f5ee;
  --a-accent: #f5b400;

  --a-ink: #142621;
  --a-gray-900: #16241d;
  --a-gray-700: #47564e;
  --a-gray-500: #7c8b82;
  --a-gray-400: #a4b2ab;
  --a-gray-300: #d6e0da;
  --a-gray-200: #e7edea;
  --a-gray-100: #f2f6f4;
  --a-bg: #f5f7f6;
  --a-surface: #ffffff;

  --a-sidebar-w: 242px;
  --a-sidebar-w-collapsed: 76px;

  --a-radius-sm: 8px;
  --a-radius: 13px;
  --a-radius-lg: 18px;

  --a-shadow-xs: 0 1px 2px rgba(20, 38, 33, .05);
  --a-shadow-sm: 0 4px 16px rgba(20, 38, 33, .06);
  --a-shadow-md: 0 12px 32px rgba(20, 38, 33, .10);
  --a-shadow: var(--a-shadow-sm);
}

*:focus-visible { outline: 2px solid var(--a-primary); outline-offset: 2px; }

body.admin-body {
  background: var(--a-bg);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: var(--a-ink);
  font-size: .89rem;
  -webkit-font-smoothing: antialiased;
}
body.admin-body h1, body.admin-body h2, body.admin-body h3, body.admin-body h4, body.admin-body h5 {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: var(--a-gray-900);
  letter-spacing: -0.01em;
}
body.admin-body ::selection { background: var(--a-primary-light); color: var(--a-primary-dark); }

/* thin, quiet scrollbars for the console */
.admin-sidebar .sidebar-nav, .admin-content, .table-responsive {
  scrollbar-width: thin; scrollbar-color: var(--a-gray-300) transparent;
}
.admin-sidebar .sidebar-nav::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { width: 6px; height: 6px; }
.admin-sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 10px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--a-gray-300); border-radius: 10px; }

/* ---------- Sidebar (flat, dense) ---------- */
.admin-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; width: var(--a-sidebar-w); z-index: 1040;
  background: var(--a-primary-dark);
  color: #fff; display: flex; flex-direction: column;
  transition: width .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
}
.admin-sidebar .sidebar-brand {
  display: flex; align-items: center; gap: .6rem; padding: 1rem .95rem; color: #fff;
  font-weight: 700; font-family: 'Poppins', sans-serif; font-size: .88rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap; overflow: hidden;
}
.admin-sidebar .sidebar-brand .brand-mark {
  width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-weight: 800; font-size: .85rem;
}
.admin-sidebar .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .6rem .6rem; }
.admin-sidebar .nav-section-label {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: rgba(255,255,255,.38);
  padding: .7rem .6rem .25rem; white-space: nowrap; overflow: hidden;
}
.admin-sidebar .sidebar-nav > .nav-link:first-child,
.admin-sidebar .nav-section-label:first-child { margin-top: 0; padding-top: 0; }

.admin-sidebar .nav-link {
  display: flex; align-items: center; gap: .65rem; color: rgba(255,255,255,.75);
  padding: .46rem .6rem; border-radius: var(--a-radius-sm); font-weight: 500; font-size: .83rem;
  margin-bottom: .1rem; position: relative;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap; overflow: hidden;
}
.admin-sidebar .nav-link i {
  width: 18px; text-align: center; font-size: .95rem; flex-shrink: 0; color: rgba(255,255,255,.65);
  transition: color .15s ease;
}
.admin-sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-sidebar .nav-link:hover i { color: #fff; }
.admin-sidebar .nav-link.active {
  background: var(--a-primary); color: #fff; font-weight: 600;
}
.admin-sidebar .nav-link.active i { color: #fff; }
.admin-sidebar .sidebar-foot {
  padding: .8rem .95rem; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .68rem; line-height: 1.5; color: rgba(255,255,255,.4); white-space: nowrap; overflow: hidden;
}

body.sidebar-collapsed .admin-sidebar { width: var(--a-sidebar-w-collapsed); }
body.sidebar-collapsed .admin-sidebar .label-text,
body.sidebar-collapsed .admin-sidebar .nav-section-label,
body.sidebar-collapsed .admin-sidebar .sidebar-foot,
body.sidebar-collapsed .admin-sidebar .sidebar-brand .brand-text { display: none; }
body.sidebar-collapsed .admin-sidebar .sidebar-brand { justify-content: center; padding-inline: .5rem; }
body.sidebar-collapsed .admin-sidebar .nav-link { justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .admin-main { margin-left: var(--a-sidebar-w-collapsed); }
.admin-main { margin-left: var(--a-sidebar-w); transition: margin-left .28s cubic-bezier(.4,0,.2,1); min-height: 100vh; display: flex; flex-direction: column; }

.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(10, 20, 16, .45);
  z-index: 1035; backdrop-filter: blur(1px);
}

@media (max-width: 991.98px) {
  .admin-sidebar { transform: translateX(-100%); box-shadow: none; }
  body.sidebar-open .admin-sidebar { transform: translateX(0); box-shadow: var(--a-shadow-md); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .admin-main, body.sidebar-collapsed .admin-main { margin-left: 0; }
}

/* ---------- Topbar ---------- */
.admin-topbar {
  position: sticky; top: 0; z-index: 1020; background: #fff;
  border-bottom: 1px solid var(--a-gray-200);
  padding: .55rem 1.25rem; display: flex; align-items: center; gap: .75rem;
}
.sidebar-toggle-btn {
  width: 36px; height: 36px; border-radius: var(--a-radius-sm); border: 1px solid var(--a-gray-200); background: #fff;
  display: flex; align-items: center; justify-content: center; color: var(--a-gray-700); transition: all .18s ease;
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: var(--a-primary-light); color: var(--a-primary); border-color: var(--a-primary-light); }

.topbar-search { position: relative; flex: 1; max-width: 380px; }
.topbar-search i {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--a-gray-500); font-size: .85rem;
}
.topbar-search input {
  width: 100%; border: 1px solid transparent; background: var(--a-gray-100); border-radius: 50px;
  padding: .5rem .9rem .5rem 2.1rem; font-size: .83rem; color: var(--a-ink); transition: all .18s ease;
}
.topbar-search input:focus { outline: none; background: #fff; border-color: var(--a-primary); box-shadow: 0 0 0 .15rem var(--a-primary-light); }
.topbar-search input::placeholder { color: var(--a-gray-500); }

.topbar-icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--a-gray-100);
  display: flex; align-items: center; justify-content: center; color: var(--a-gray-700); position: relative;
  transition: all .18s ease; flex-shrink: 0;
}
.topbar-icon-btn:hover { background: var(--a-primary-light); color: var(--a-primary); }
.topbar-icon-btn .ping-dot {
  position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: #dc3545; border: 1.5px solid #fff;
}
.notif-dropdown { width: 320px; padding: 0; overflow: hidden; }
.notif-dropdown .notif-head { padding: .75rem 1rem; font-weight: 700; font-size: .82rem; border-bottom: 1px solid var(--a-gray-200); }
.notif-item { display: flex; gap: .65rem; padding: .7rem 1rem; align-items: flex-start; color: inherit; }
.notif-item:hover { background: var(--a-gray-100); }
.notif-item .notif-icon {
  width: 32px; height: 32px; border-radius: 9px; background: var(--a-primary-light); color: var(--a-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .85rem;
}
.notif-item .notif-title { font-size: .8rem; font-weight: 600; color: var(--a-gray-900); line-height: 1.3; }
.notif-item .notif-sub { font-size: .74rem; color: var(--a-gray-500); }
.notif-empty { padding: 1.5rem 1rem; text-align: center; color: var(--a-gray-500); font-size: .82rem; }

.topbar-date {
  font-size: .78rem; color: var(--a-gray-500); font-weight: 500;
  padding-left: .9rem; border-left: 1px solid var(--a-gray-200); white-space: nowrap;
}
.admin-user-chip {
  display: flex; align-items: center; gap: .5rem; padding: .2rem .55rem .2rem .2rem; border-radius: 50px;
  border: 1px solid var(--a-gray-200); background: #fff; cursor: pointer; transition: all .18s ease;
}
.admin-user-chip:hover { background: var(--a-primary-light); border-color: var(--a-primary-light); }
.role-badge {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .28rem .6rem; border-radius: 50px; background: var(--a-primary-light); color: var(--a-primary-dark);
}

/* ---------- Content ---------- */
.admin-content { padding: 1.25rem 1.35rem; flex: 1; max-width: 100%; }
.page-header { margin-bottom: 1.1rem; }
.page-header h1 { font-size: 1.32rem; margin-bottom: .2rem; font-weight: 700; }
.breadcrumb-brand { font-size: .8rem; color: var(--a-gray-500); }

/* ---------- Cards ---------- */
.admin-card {
  background: var(--a-surface); border-radius: var(--a-radius); border: 1px solid var(--a-gray-200);
  box-shadow: var(--a-shadow-xs); transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.admin-card.hoverable:hover { transform: translateY(-2px); box-shadow: var(--a-shadow-md); border-color: var(--a-gray-200); }

.stat-widget { padding: .95rem 1.1rem; display: flex; align-items: center; gap: .85rem; }
.stat-widget .stat-icon {
  width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0;
}
.stat-widget .stat-value { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.32rem; line-height: 1.2; color: var(--a-gray-900); }
.stat-widget .stat-label { color: var(--a-gray-500); font-size: .76rem; font-weight: 500; margin-top: .1rem; }
.stat-trend-up { color: var(--a-primary); font-weight: 600; font-size: .76rem; }

.icon-bg-green { background: #e3f6ea; color: #16a34a; }
.icon-bg-gold { background: #fdf1e0; color: #d97706; }
.icon-bg-blue { background: #e5edfd; color: #2563eb; }
.icon-bg-red { background: #fdecec; color: #dc3545; }
.icon-bg-purple { background: #f1e9fd; color: #7c3aed; }

/* ---------- Tables ---------- */
.table-brand thead th {
  background: var(--a-gray-100); color: var(--a-gray-700); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .05em; border: none; padding: .6rem .85rem; white-space: nowrap;
}
.table-brand thead th:first-child { border-radius: var(--a-radius-sm) 0 0 var(--a-radius-sm); }
.table-brand thead th:last-child { border-radius: 0 var(--a-radius-sm) var(--a-radius-sm) 0; }
.table-brand tbody td { padding: .62rem .85rem; vertical-align: middle; border-color: var(--a-gray-200); font-size: .84rem; }
.table-brand tbody tr { transition: background .15s ease; }
.table-brand tbody tr:hover { background: var(--a-gray-100); }
.table-brand tbody tr:last-child td { border-bottom: none; }
.table-brand img.rounded-circle { border: 2px solid var(--a-gray-200); }

/* ---------- Badges / status ---------- */
.status-pill { font-size: .7rem; font-weight: 700; padding: .28rem .68rem; border-radius: 50px; letter-spacing: .01em; }
.status-paid { background: #e6f7ec; color: #1b8a4b; }
.status-partial { background: #fff6df; color: #b17d00; }
.status-due { background: #fdecec; color: #dc3545; }
.status-active { background: #e6f7ec; color: #1b8a4b; }
.status-inactive { background: #f1f1f1; color: #6c757d; }
.status-alumni { background: #eaf1ff; color: #2957a4; }

/* ---------- Buttons (rectangular, app-like — distinct from the public site's pill CTAs) ---------- */
body.admin-body .btn-brand, body.admin-body .btn-accent, body.admin-body .btn-outline-brand {
  border-radius: var(--a-radius-sm);
  padding: .5rem 1.15rem;
  font-size: .85rem;
  box-shadow: none;
}
body.admin-body .btn-brand { background: var(--a-primary); }
body.admin-body .btn-brand:hover { background: var(--a-primary-dark); box-shadow: var(--a-shadow-sm); transform: translateY(-1px); }
body.admin-body .btn-outline-brand { border-color: var(--a-gray-300); color: var(--a-gray-700); border-width: 1px; }
body.admin-body .btn-outline-brand:hover { background: var(--a-gray-100); border-color: var(--a-gray-300); color: var(--a-primary-dark); }
body.admin-body .btn-outline-brand.active { background: var(--a-primary); border-color: var(--a-primary); color: #fff; }
body.admin-body .btn-sm { border-radius: 7px; font-size: .78rem; }
body.admin-body .form-control, body.admin-body .form-select {
  border-color: var(--a-gray-300); border-radius: var(--a-radius-sm); padding: .45rem .75rem; font-size: .85rem;
}
body.admin-body .form-control:focus, body.admin-body .form-select:focus {
  border-color: var(--a-primary); box-shadow: 0 0 0 .15rem var(--a-primary-light);
}
body.admin-body label.form-label { font-weight: 600; font-size: .82rem; color: var(--a-gray-700); }

/* ---------- Icon tile (reused inside admin cards) ---------- */
body.admin-body .icon-tile { background: var(--a-primary-light); color: var(--a-primary); border-radius: var(--a-radius-sm); }
body.admin-body .avatar-circle { background: var(--a-primary); }

/* ---------- Admission pipeline ---------- */
.pipeline-track { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.pipeline-step {
  flex: 1; min-width: 110px; text-align: center; padding: .7rem .5rem; border-radius: var(--a-radius-sm);
  background: #fff; border: 2px solid var(--a-gray-200); font-size: .78rem; font-weight: 600; color: var(--a-gray-500);
  transition: all .3s ease; position: relative;
}
.pipeline-step.done { background: var(--a-primary-light); border-color: var(--a-primary); color: var(--a-primary-dark); }
.pipeline-step.current { background: var(--a-primary); border-color: var(--a-primary); color: #fff; transform: scale(1.05); box-shadow: var(--a-shadow-sm); }

/* ---------- Login split page ---------- */
.login-wrap { min-height: 100vh; display: flex; }
.login-visual {
  flex: 1; background: linear-gradient(160deg, var(--a-primary-dark), var(--a-primary) 60%, #14875a);
  color: #fff; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.login-visual::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.06); top: -120px; right: -100px; }
.login-visual::after { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(245,180,0,.12); bottom: -100px; left: -60px; }
.login-form-side { flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; padding: 2rem; }
.login-card { width: 100%; max-width: 400px; }
.login-icon-float { animation: floaty 4.5s ease-in-out infinite; }

/* ---------- Receipt ---------- */
.receipt-paper { background: #fff; border-radius: var(--a-radius); box-shadow: var(--a-shadow-sm); padding: 2.5rem; max-width: 640px; margin: 0 auto; }
.receipt-header { border-bottom: 2px dashed var(--a-gray-200); padding-bottom: 1.25rem; margin-bottom: 1.25rem; }

@media print {
  .admin-sidebar, .admin-topbar, .no-print { display: none !important; }
  .admin-main { margin-left: 0 !important; }
  body.admin-body { background: #fff; }
}

/* Chart.js (responsive + maintainAspectRatio:false) manages the canvas's own
   width/height style itself based on this box's size — do NOT also force the
   canvas's CSS size here, or the two fight and the canvas oscillates to 0. */
.chart-canvas-box { position: relative; width: 100%; height: 230px; }

.fade-in-up { animation: fadeInUp .4s ease both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Density pass: tighten Bootstrap spacing utilities within the console only ---------- */
body.admin-body .p-4 { padding: 1.05rem !important; }
body.admin-body .p-3 { padding: .8rem !important; }
body.admin-body .g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
body.admin-body .mb-4 { margin-bottom: 1.05rem !important; }
body.admin-body .mb-3 { margin-bottom: .8rem !important; }

/* ==========================================================================
   Responsive tuning
   ========================================================================== */
@media (max-width: 1199.98px) {
  .admin-content { padding: 1.1rem; }
  .topbar-search { max-width: 240px; }
}

@media (max-width: 767.98px) {
  .admin-topbar { padding: .55rem .85rem; gap: .5rem; }
  .topbar-date { display: none !important; }
  .topbar-search { display: none !important; }
  .admin-content { padding: .9rem; }
  .page-header h1 { font-size: 1.18rem; }
  .stat-widget { padding: .85rem .95rem; gap: .7rem; }
  .stat-widget .stat-icon { width: 38px; height: 38px; font-size: .95rem; }
  .stat-widget .stat-value { font-size: 1.15rem; }
  .admin-card.chart-card { padding: .95rem !important; }
  .chart-canvas-box { height: 200px; }
  .receipt-paper { padding: 1.5rem; }
}

@media (max-width: 575.98px) {
  .admin-sidebar { width: min(var(--a-sidebar-w), 84vw); }
  .admin-user-chip span.d-none.d-md-inline { display: none !important; }
  .table-brand thead th, .table-brand tbody td { padding: .55rem .7rem; font-size: .8rem; }
}