:root {
  --sidebar-width: 250px;
  --topbar-height: 52px;
  --primary: #0ea5e9;
  --primary-dark: #0284c7;
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f0f2f5;
  --sidebar-active: #e8f4fd;
  --sidebar-text: #5f676b;
  --sidebar-text-active: #0ea5e9;
  --bg-main: #f0f2f5;
  --bg-card: #ffffff;
  --border-color: #e4e6eb;
  --text-primary: #1c1e21;
  --text-secondary: #5f676b;
  --topbar-bg: #ffffff;
  --topbar-border: #e4e6eb;
  --card-border: #e2e8f0;
  --input-bg: #ffffff;
  --input-border: #e0e0e0;
  --table-row-border: #f0f2f5;
  --table-header-color: #64748b;
  --table-hover: #f8fafc;
}

[data-theme="dark"] {
  --sidebar-bg: #1e293b;
  --sidebar-hover: #334155;
  --sidebar-active: #1e3a5f;
  --sidebar-text: #94a3b8;
  --sidebar-text-active: #38bdf8;
  --bg-main: #0f172a;
  --bg-card: #1e293b;
  --border-color: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --topbar-bg: #1e293b;
  --topbar-border: #334155;
  --card-border: #334155;
  --input-bg: #1e293b;
  --input-border: #475569;
  --table-row-border: #334155;
  --table-header-color: #94a3b8;
  --table-hover: #1e3a5f;
}

/* ── Global ── */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-main);
  color: var(--text-primary);
  transition: background .2s, color .2s;
}

/* ── Enhanced Base ── */
::selection { background: var(--primary); color: #fff; }

/* ── Login Page ── */
.login-page {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f0 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-wrapper {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.06);
  padding: 2.5rem 2rem 1.5rem;
  width: 100%;
  max-width: 400px;
}

.login-brand {
  text-align: center;
  margin-bottom: 1.75rem;
}

.login-brand .brand-icon {
  font-size: 2.75rem;
  color: var(--primary);
  margin-bottom: .75rem;
  display: block;
}

.login-brand h2 {
  color: #1c1e21;
  font-weight: 700;
  font-size: 1.375rem;
  margin: 0;
  letter-spacing: -.02em;
}

.login-brand p {
  color: #8a8f94;
  font-size: .875rem;
  margin: .375rem 0 0;
}

.login-wrapper .alert {
  border-radius: .75rem;
  font-size: .8125rem;
  border: none;
  margin-bottom: 1.25rem;
}

.login-wrapper .form-group {
  margin-bottom: 1.25rem;
}

.login-wrapper .form-label {
  display: block;
  font-weight: 600;
  font-size: .8125rem;
  color: #1c1e21;
  margin-bottom: .5rem;
}

.login-wrapper .input-wrapper {
  position: relative;
}

.login-wrapper .input-icon {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
  font-size: 1rem;
  pointer-events: none;
  z-index: 1;
}

.login-wrapper .form-control {
  width: 100%;
  border: 1.5px solid #e9ecef;
  border-radius: .75rem;
  padding: .75rem 1rem .75rem 2.75rem;
  font-size: .875rem;
  background: #f8f9fa;
  transition: all .2s;
  box-sizing: border-box;
}

.login-wrapper .form-control:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(14,165,233,.1);
  outline: none;
}

.login-wrapper .form-control::placeholder {
  color: #ced4da;
}

.password-toggle {
  position: absolute;
  right: .625rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #adb5bd;
  font-size: 1.125rem;
  cursor: pointer;
  padding: .25rem;
  z-index: 1;
  line-height: 1;
  display: flex;
  align-items: center;
}

.password-toggle:hover {
  color: #6c757d;
}

.login-wrapper .form-control[type="password"],
.login-wrapper .form-control[type="text"] {
  padding-right: 2.75rem;
}

.btn-login {
  display: block;
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: .8125rem;
  font-weight: 600;
  font-size: .9375rem;
  border-radius: .75rem;
  cursor: pointer;
  transition: all .2s;
  margin-top: 1.75rem;
}

.btn-login:hover {
  background: var(--primary-dark);
  box-shadow: 0 6px 20px rgba(14,165,233,.35);
  transform: translateY(-1px);
}

.btn-login:active {
  transform: translateY(0);
}

.login-footer {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f0f2f5;
}

.login-footer p {
  color: #adb5bd;
  font-size: .75rem;
  margin: 0;
}

/* ── App Layout ── */
.app-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ── */
.app-sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, background .2s, border-color .2s;
  border-right: 1px solid var(--border-color);
}

.app-sidebar .sidebar-brand {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0ea5e9;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  gap: .5rem;
}

.app-sidebar .sidebar-brand a {
  color: #0ea5e9;
  text-decoration: none;
}

/* User profile in sidebar */
.sidebar-user {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.sidebar-user .media {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sidebar-user .user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .875rem;
  flex-shrink: 0;
}

.sidebar-user .media-body {
  min-width: 0;
}

.sidebar-user .media-title {
  color: #1c1e21;
  font-weight: 600;
  font-size: .8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user .media-subtitle {
  font-size: .6875rem;
  color: var(--sidebar-text);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Sidebar nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: .5rem 0;
}

.sidebar-nav .nav-item { margin: 0; }

.sidebar-nav .nav-link {
  color: var(--sidebar-text);
  padding: .55rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .8125rem;
  transition: all .12s;
  text-decoration: none;
  border-left: 3px solid transparent;
  cursor: pointer;
}

.sidebar-nav .nav-link:hover {
  color: var(--sidebar-text-active);
  background: var(--sidebar-hover);
}

.sidebar-nav .nav-link.active,
.sidebar-nav .nav-item.open > .nav-link {
  color: var(--sidebar-text-active);
  background: var(--sidebar-active);
  border-left-color: var(--sidebar-text-active);
}

.sidebar-nav .nav-link i { width: 1.15rem; text-align: center; font-size: .95rem; }

.sidebar-nav .nav-link .arrow {
  margin-left: auto;
  transition: transform .2s;
  font-size: .625rem;
}

.sidebar-nav .nav-item.open .nav-link .arrow {
  transform: rotate(90deg);
}

/* Nested submenu */
.sidebar-nav .nav-group-sub {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  background: var(--sidebar-hover);
}

.sidebar-nav .nav-item.open > .nav-group-sub { display: block; }

.sidebar-nav .nav-group-sub .nav-link {
  padding-left: 3.15rem;
  font-size: .78125rem;
  transition: background .15s, color .15s;
}

.sidebar-nav .nav-group-sub .nav-link i { width: auto; font-size: .5rem; }

.sidebar-nav .sidebar-heading {
  color: var(--sidebar-text);
  opacity: .5;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 1rem 1.25rem .25rem;
  font-weight: 600;
}

/* ── Content area ── */
.app-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Top navbar ── */
.app-topbar {
  height: var(--topbar-height);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  transition: background .2s, border-color .2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 1020;
  color: #1c1e21;
}

.app-topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.app-topbar .sidebar-toggle {
  background: none;
  border: none;
  font-size: 1.125rem;
  color: #5f676b;
  cursor: pointer;
  padding: .25rem;
  display: none;
}

.app-topbar .sidebar-toggle:hover { color: #1c1e21; }

.app-topbar .topbar-title {
  font-size: .8125rem;
  color: var(--text-secondary);
}

.app-topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-topbar .user-dropdown {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: .8125rem;
}

.app-topbar .user-dropdown:hover { color: #0ea5e9; }

.app-topbar .user-avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .75rem;
}

.app-topbar .topbar-btn {
  width: 34px;
  height: 34px;
  border-radius: .5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  cursor: pointer;
  transition: all .12s, background .2s, border-color .2s;
}
.app-topbar .topbar-btn:hover {
  background: #f0f2f5;
  color: #0ea5e9;
  border-color: #0ea5e9;
}

/* ── Page header ── */
.page-header {
  background: var(--bg-card);
  padding: .75rem 1.5rem;
  transition: background .2s;
  border-bottom: 1px solid #e4e7ec;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-header h5 {
  font-weight: 600;
  margin: 0;
  font-size: .9375rem;
  color: #2d3748;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.page-header h5 i { color: var(--primary); font-size: 1.1rem; }

.page-header .breadcrumb {
  margin: 0;
  background: none;
  padding: 0;
  font-size: .75rem;
}

.page-header .breadcrumb-item + .breadcrumb-item::before { color: #aab; }

/* ── Main content ── */
.app-main {
  flex: 1;
  padding: 1rem;
  transition: background .2s;
}

/* ── Stat cards ── */
.stat-card {
  border: none;
  border-radius: .375rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: all .15s;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 12px rgba(0,0,0,.1);
}

.stat-card .card-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
}

.stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: .375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.stat-card .stat-info h6 {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .125rem;
  opacity: .75;
}

.stat-card .stat-info h3 {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.stat-card .stat-info p { font-size: .75rem; opacity: .65; margin: 0; }

/* Colored stat cards (full background) */
.stat-card-solid {
  border: none;
  border-radius: .375rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: all .15s;
  color: #fff;
}

.stat-card-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
}

.stat-card-solid .card-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
}

.stat-card-solid .stat-icon {
  font-size: 1.5rem;
  opacity: .8;
  flex-shrink: 0;
}

.stat-card-solid .stat-info h6 {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .125rem;
  opacity: .8;
}

.stat-card-solid .stat-info h3 {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.stat-card-solid .stat-info p { font-size: .75rem; opacity: .7; margin: 0; }

/* ── Cards ── */
.card { border: none; border-radius: .375rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); background: var(--bg-card); transition: background .2s, box-shadow .2s; }
.card-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  transition: background .2s, border-color .2s;
  padding: .75rem 1.25rem;
  font-weight: 600;
  font-size: .8125rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.card-header:first-child { border-radius: .375rem .375rem 0 0; }
.card-body {
  padding: 1rem;
}

/* ── Tables ── */
.table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.table th {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--table-header-color);
  font-weight: 700;
  border-top: none;
  border-bottom: 1.5px solid var(--table-row-border);
  white-space: nowrap;
  padding: .8125rem .75rem;
  background: transparent;
}
.table td {
  vertical-align: middle;
  font-size: .8125rem;
  padding: .8125rem .75rem;
  border-bottom: 1px solid var(--table-row-border);
  color: var(--text-primary);
  transition: background .15s, border-color .2s, color .2s;
}
.table tbody tr:last-child td {
  border-bottom: none;
}
.table-hover tbody tr:hover td {
  background: var(--table-hover);
}
.table-responsive {
  border-radius: .5rem;
}

/* ── Buttons ── */
.btn {
  font-weight: 500;
  border-radius: .375rem;
  padding: .45rem .9rem;
  font-size: .8125rem;
  transition: all .12s;
}
.btn-sm { border-radius: .25rem; padding: .25rem .65rem; font-size: .75rem; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }

/* ── Badges ── */
.badge {
  font-weight: 500;
  padding: .25em .7em;
  font-size: .6875rem;
  border-radius: 50rem;
  letter-spacing: .01em;
}
.badge.bg-success { background: #dcfce7 !important; color: #166534; }
.badge.bg-danger { background: #fee2e2 !important; color: #991b1b; }
.badge.bg-warning { background: #fef3c7 !important; color: #92400e; }
.badge.bg-info { background: #e0f2fe !important; color: #075985; }
.badge.bg-light.text-dark { background: #f1f5f9 !important; color: #475569 !important; }

/* ── Forms ── */
.form-control, .form-select {
  border-radius: .375rem;
  border-color: #dde0e5;
  padding: .45rem .75rem;
  font-size: .8125rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45,106,159,.1);
}
.form-label { font-weight: 500; font-size: .8125rem; color: #555; margin-bottom: .25rem; }

/* ── Alerts ── */
.alert { border: none; border-radius: .375rem; font-size: .8125rem; }

/* ── Background utilities ── */
.bg-primary-400 { background: #0ea5e9; }
.bg-danger-400 { background: #dc3545; }
.bg-success-400 { background: #28a745; }
.bg-warning-400 { background: #e8a317; }
.bg-indigo-400 { background: #5c6bc0; }
.bg-teal-400 { background: #26a69a; }
.bg-pink-400 { background: #ec407a; }
.bg-orange-400 { background: #f57c00; }

/* ── Footer ── */
.app-footer {
  padding: .75rem 1.5rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  font-size: .75rem;
  color: var(--text-secondary);
  text-align: center;
  transition: background .2s, border-color .2s, color .2s;
}

/* ── Landing page ── */
.landing-page {
  background: #f8f9fa;
}

.landing-page .hero {
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 50%, #0284c7 100%);
  color: #fff;
  padding: 3rem 0 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.landing-page .hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.1);
  z-index: 1;
}

.landing-page .hero .container {
  position: relative;
  z-index: 2;
}

.landing-page .hero .hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.landing-page .hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 1rem 0;
}

.landing-page .hero p {
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
  max-width: 600px;
  margin: .75rem auto 1.5rem;
  line-height: 1.6;
}

.landing-page .hero .btn {
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.landing-page .hero .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.landing-page .section-header {
  margin-bottom: 2rem;
}

.landing-page .section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.landing-page .section-subtitle {
  font-size: 1.125rem;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
}

.landing-page .feature-card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.landing-page .feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0ea5e9, #1e293b);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.landing-page .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.landing-page .feature-card:hover::before {
  opacity: 1;
}

.landing-page .feature-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #f0f7ff, #e0f2ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.75rem;
  color: #0ea5e9;
  transition: all 0.3s ease;
}

.landing-page .feature-card:hover .feature-icon {
  background: linear-gradient(135deg, #0ea5e9, #1e293b);
  color: #fff;
  transform: scale(1.1);
}

.landing-page .feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
}

.landing-page .feature-card p {
  color: #6c757d;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.landing-page .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.landing-page .feature-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: #495057;
  font-size: 0.875rem;
}

.landing-page .feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: 600;
}

/* Value proposition section */
.landing-page .value-proposition {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  margin-top: 2rem;
}

.landing-page .value-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1.5rem;
}

.landing-page .value-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.landing-page .value-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #0ea5e9;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.landing-page .value-item:hover .value-icon {
  background: linear-gradient(135deg, #0ea5e9, #1e293b);
  color: #fff;
  transform: scale(1.1);
}

.landing-page .value-text h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.landing-page .value-text p {
  color: #6c757d;
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.5;
}

/* Stats grid */
.landing-page .stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.landing-page .stat-box {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 0.75rem;
  padding: 1.25rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
}

.landing-page .stat-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  background: linear-gradient(135deg, #0ea5e9, #1e293b);
}

.landing-page .stat-box:hover h3,
.landing-page .stat-box:hover p {
  color: #fff;
}

.landing-page .stat-box h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #0ea5e9;
  margin-bottom: 0.5rem;
}

.landing-page .stat-box p {
  font-size: 0.875rem;
  color: #6c757d;
  margin: 0;
}

/* Privacy page styles */
.privacy-section {
  margin-bottom: 1.5rem;
}

.privacy-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.privacy-list li {
  background: #f8f9fa;
  border-left: 4px solid #0ea5e9;
  padding: 1rem 1.5rem;
  margin-bottom: 0.75rem;
  border-radius: 0.375rem;
  position: relative;
}

.privacy-list li strong {
  color: #1e293b;
}

.use-case {
  text-align: center;
  padding: 1.25rem;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  height: 100%;
  transition: all 0.3s ease;
}

.use-case:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.use-case i {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

.use-case h5 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.use-case p {
  color: #6c757d;
  font-size: 0.875rem;
  margin: 0;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 0.5rem;
}

.contact-item i {
  color: #0ea5e9;
  width: 20px;
  text-align: center;
}

.contact-item span {
  color: #495057;
  font-size: 0.875rem;
}

/* Micro-interactions and animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.landing-page .feature-card,
.landing-page .value-item,
.landing-page .stat-box,
.use-case {
  animation: fadeInUp 0.6s ease-out;
}

.landing-page .feature-card:nth-child(1) { animation-delay: 0.1s; }
.landing-page .feature-card:nth-child(2) { animation-delay: 0.2s; }
.landing-page .feature-card:nth-child(3) { animation-delay: 0.3s; }
.landing-page .value-item:nth-child(1) { animation-delay: 0.4s; }
.landing-page .value-item:nth-child(2) { animation-delay: 0.5s; }
.landing-page .value-item:nth-child(3) { animation-delay: 0.6s; }
.landing-page .stat-box:nth-child(1) { animation-delay: 0.7s; }
.landing-page .stat-box:nth-child(2) { animation-delay: 0.8s; }
.landing-page .stat-box:nth-child(3) { animation-delay: 0.9s; }
.landing-page .stat-box:nth-child(4) { animation-delay: 1.0s; }
.use-case:nth-child(1) { animation-delay: 0.1s; }
.use-case:nth-child(2) { animation-delay: 0.2s; }
.use-case:nth-child(3) { animation-delay: 0.3s; }
.use-case:nth-child(4) { animation-delay: 0.4s; }

.hero h1 {
  animation: fadeInUp 0.8s ease-out;
}

.hero p {
  animation: fadeInUp 1s ease-out;
}

.hero .btn {
  animation: fadeInUp 1.2s ease-out;
}

.landing-page .feature-card:hover .feature-icon {
  animation: pulse 1s ease-in-out;
}

.landing-page .value-icon:hover {
  animation: pulse 0.5s ease-in-out;
}

.landing-page .stat-box:hover {
  animation: pulse 0.5s ease-in-out;
}

.privacy-list li {
  transition: all 0.3s ease;
  cursor: pointer;
}

.privacy-list li:hover {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.use-case {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.use-case:hover {
  transform: translateY(-5px) scale(1.02);
}

.contact-item {
  transition: all 0.3s ease;
}

.contact-item:hover {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  transform: translateX(5px);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus states for accessibility */
.landing-page .feature-card:focus,
.landing-page .value-icon:focus,
.landing-page .stat-box:focus,
.use-case:focus,
.contact-item:focus {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Public top nav ── */
.public-navbar {
  background: var(--primary-dark) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ── Sidebar toggle on mobile ── */
@media (max-width: 768px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.show { transform: translateX(0); }
  .app-content { margin-left: 0; }
  .app-topbar .sidebar-toggle { display: inline-flex; }
  .page-header { flex-wrap: wrap; gap: .5rem; }
  .stat-card .card-body { flex-direction: row; }
  .stat-card-solid .card-body { flex-direction: row; }
  .login-wrapper { margin: 1rem; padding: 2rem 1.5rem 1.25rem; }
}

/* ── Professional UI Additions ── */

/* Enhanced card styling */
.card {
  border-radius: .5rem;
  transition: box-shadow .2s ease, background .2s;
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.card-header i { color: var(--primary); }
.card-header:first-child { border-radius: .5rem .5rem 0 0; }
[data-theme="dark"] .card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

/* Table inside card */
.card .table th:first-child,
.card .table td:first-child { padding-left: 1.5rem; }
.card .table th:last-child,
.card .table td:last-child { padding-right: 1.5rem; }
.card .table thead th { border-top: none; }
.card .table-wrapper { margin: 0; }

/* Page header enhancements */
.page-header h5 { font-size: .9375rem; }

/* Filter/search bar wrapper */
.filter-bar {
  background: var(--bg-card);
  transition: background .2s;
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  margin-bottom: 1.25rem;
}

/* Info grid for detail pages */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .75rem;
  background: #fafbfc;
  border-radius: .375rem;
}
.info-item .label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
  font-weight: 600;
}
.info-item .value {
  font-size: .875rem;
  color: #1c1e21;
  font-weight: 500;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #9ca3af;
}
.empty-state i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: .75rem;
}
.empty-state p { margin: 0; font-size: .875rem; }

/* Enhanced pagination */
.pagination { margin-bottom: 0; gap: .25rem; }
.page-link {
  border: 1px solid #e8ecf1;
  color: #5f676b;
  font-size: .8125rem;
  padding: .375rem .75rem;
  border-radius: .375rem !important;
  transition: all .12s;
}
.page-link:hover {
  background: #f0f2f5;
  border-color: #dde0e5;
  color: #1c1e21;
}
.page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
}
.page-item.disabled .page-link {
  background: #f8f9fa;
  color: #c0c5cc;
}

/* Stat card icon container */
.stat-card-solid .stat-icon {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.15);
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Action button groups */
.btn-group-actions { display: flex; gap: .375rem; flex-wrap: wrap; }

/* Small icon spacing */
.btn i, .dropdown-item i { margin-right: .375rem; }
.btn-icon { padding: .45rem .5rem; }
.btn-icon i { margin-right: 0; }

/* Page title fallback */
.page-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #2d3748;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.page-title i { color: var(--primary); font-size: 1.25rem; }

/* Alert enhancements */
.alert { border: none; border-radius: .5rem; font-size: .8125rem; }
.alert i { font-size: 1rem; }

/* Card header with actions */
.card-header .btn-sm { font-size: .6875rem; padding: .2rem .5rem; }

/* DL grid for detail pages */
dl.row dt {
  font-size: .75rem;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
dl.row dd {
  font-size: .875rem;
  color: #1c1e21;
  font-weight: 500;
}

/* Smooth focus for all interactive elements */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: .125rem;
}

/* ── Student Fee Info ── */
.student-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.student-fee-summary table {
  font-size: .875rem;
}

.student-fee-summary table th {
  font-weight: 600;
  font-size: .8rem;
}

/* ── Search Results ── */
#searchResults .list-group-item {
  cursor: pointer;
  border-left: 3px solid transparent;
  font-size: .875rem;
}

#searchResults .list-group-item:hover {
  border-left-color: var(--primary);
  background: var(--sidebar-hover);
}

/* ── Position relative for search container ── */
.row.mb-3 .position-relative,
#searchStudent {
  position: relative;
}

#searchResults {
  position: absolute;
  width: 100%;
  z-index: 1000;
}

/* ══════════════════════════════════════════════════
   Collections / Fee  Page  —  Professional UI
   ══════════════════════════════════════════════════ */

/* ── Page Header with Gradient ── */
.fee-page-header {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}
.fee-page-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
}
.fee-page-header::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: 10%;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,.03);
  border-radius: 50%;
}
.fee-page-header h5 {
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .625rem;
}
.fee-page-header h5 i { color: rgba(255,255,255,.85); font-size: 1.25rem; }
.fee-page-header .breadcrumb {
  background: none;
  padding: 0;
  margin: .25rem 0 0;
  position: relative;
  z-index: 1;
}
.fee-page-header .breadcrumb-item { font-size: .75rem; }
.fee-page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }
.fee-page-header .breadcrumb-item a { color: rgba(255,255,255,.75); text-decoration: none; }
.fee-page-header .breadcrumb-item a:hover { color: #fff; }
.fee-page-header .breadcrumb-item.active { color: rgba(255,255,255,.9); }

/* ── Search Card ── */
.fee-search-card {
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid #eef0f4;
  transition: box-shadow .2s ease;
}
.fee-search-card:focus-within {
  box-shadow: 0 2px 12px rgba(14,165,233,.12);
  border-color: #0ea5e9;
}
.fee-search-card .search-icon-box {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0284c7;
  font-size: 1.15rem;
  flex-shrink: 0;
}



/* ── Student Profile Header ── */
.fee-student-profile {
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  border: 1px solid #eef0f4;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  display: none;
  animation: feeFadeIn .35s ease;
}
.fee-student-profile.show { display: block; }
.fee-student-profile .profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
.fee-student-profile .profile-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1c1e21;
}
.fee-student-profile .profile-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .6875rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: .2rem .55rem;
  border-radius: 1rem;
}
.fee-student-profile .profile-stat {
  text-align: center;
  padding: .5rem 1rem;
  border-left: 1px solid #f0f2f5;
}
.fee-student-profile .profile-stat:first-child { border-left: none; }
.fee-student-profile .profile-stat-value {
  font-weight: 700;
  font-size: 1rem;
}
.fee-student-profile .profile-stat-label {
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9ca3af;
}

/* ── Fee Stat Cards ── */
.fee-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; margin-bottom: 1rem; }
.fee-stat-card {
  background: #fff;
  border-radius: .75rem;
  padding: 1rem 1.125rem;
  border: 1px solid #eef0f4;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.fee-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.fee-stat-card .stat-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.fee-stat-card .stat-icon {
  width: 36px;
  height: 36px;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  margin-bottom: .5rem;
}
.fee-stat-card .stat-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
  font-weight: 600;
}
.fee-stat-card .stat-value {
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: .125rem;
}
.fee-stat-card .stat-sub {
  font-size: .6875rem;
  margin-top: .125rem;
}

/* ── Fee Content Card ── */
.fee-content-card {
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  border: 1px solid #eef0f4;
  margin-bottom: 1rem;
  overflow: hidden;
}
.fee-content-card .card-header {
  background: #fff;
  border-bottom: 1px solid #f0f2f5;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.fee-content-card .card-header h6 {
  margin: 0;
  font-weight: 600;
  font-size: .8125rem;
  color: #374151;
}
.fee-content-card .card-header i { color: #0ea5e9; }
.fee-content-card .card-body { padding: 1rem; }

/* ── Fee Tables ── */
.fee-table-wrap { overflow-x: auto; }
.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}
.fee-table thead th {
  background: #f8fafc;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a94a6;
  font-weight: 600;
  padding: .55rem .75rem;
  text-align: left;
  border-bottom: 1px solid #eef0f4;
  white-space: nowrap;
}
.fee-table thead th:first-child { padding-left: 1rem; }
.fee-table thead th:last-child { padding-right: 1rem; }
.fee-table tbody td {
  padding: .5rem .75rem;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.fee-table tbody td:first-child { padding-left: 1rem; }
.fee-table tbody td:last-child { padding-right: 1rem; }
.fee-table tbody tr:last-child td { border-bottom: none; }
.fee-table tbody tr:hover td { background: #f8fafc; }
.fee-table .total-row td {
  background: #f8fafc;
  font-weight: 600;
  border-top: 2px solid #e5e7eb;
  border-bottom: none;
  color: #1c1e21;
}
.fee-table .amount-cell { text-align: right; font-variant-numeric: tabular-nums; }
.fee-table .status-cell { text-align: center; }

/* ── Status Badges ── */
.fee-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .6rem;
  border-radius: 1rem;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.fee-badge-paid { background: #d1fae5; color: #065f46; }
.fee-badge-partial { background: #fef3c7; color: #92400e; }
.fee-badge-unpaid { background: #fee2e2; color: #991b1b; }
.fee-badge-pending { background: #fef3c7; color: #92400e; }

/* ── Section Title ── */
.fee-section-title {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a94a6;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.fee-section-title i { color: #0ea5e9; font-size: .875rem; }

/* ── Payment Mode Cards ── */
.payment-mode-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
}
.payment-mode-option {
  position: relative;
}
.payment-mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.payment-mode-option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  padding: .875rem .5rem;
  border: 2px solid #e5e7eb;
  border-radius: .625rem;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  font-size: .75rem;
  font-weight: 500;
  color: #6b7280;
}
.payment-mode-option label i { font-size: 1.25rem; color: #9ca3af; transition: color .15s; }
.payment-mode-option input:checked + label {
  border-color: #0ea5e9;
  background: #f0f7ff;
  color: #0284c7;
}
.payment-mode-option input:checked + label i { color: #0ea5e9; }
.payment-mode-option input:focus + label {
  box-shadow: 0 0 0 3px rgba(14,165,233,.12);
}

/* ── Pending Payments Section ── */
.fee-pending-card {
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid #eef0f4;
  margin-bottom: 1.25rem;
  overflow: hidden;
  animation: feeFadeIn .3s ease;
}
.fee-pending-card .pending-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, #fef9c3, #fde68a);
  border-bottom: 1px solid #f0f2f5;
}
.fee-pending-card .pending-header i { color: #a16207; font-size: 1.1rem; }
.fee-pending-card .pending-header-text { flex: 1; min-width: 0; }
.fee-pending-card .pending-title { font-size: .875rem; font-weight: 700; color: #713f12; }
.fee-pending-card .pending-subtitle { font-size: .6875rem; color: #a16207; margin-top: .0625rem; }
.fee-pending-card .pending-total { font-size: 1.1rem; font-weight: 800; color: #713f12; white-space: nowrap; }
.fee-pending-card .pending-body { padding: .5rem 1rem .75rem; }
.fee-pending-card .pending-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border-radius: .5rem;
  transition: background .1s;
  border: 1px solid transparent;
  margin-bottom: .25rem;
}
.fee-pending-card .pending-item:hover { background: #f9fafb; }
.fee-pending-card .pending-item.paid { opacity: .55; cursor: not-allowed; }
.fee-pending-card .pending-item.partial { border-color: #fde68a; background: #fffbeb; }
.fee-pending-card .pending-item .form-check { margin: 0; padding: 0; min-height: 0; }
.fee-pending-card .pending-item .form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  cursor: pointer;
  border-color: #d1d5db;
}
.fee-pending-card .pending-item .form-check-input:checked { background-color: #0ea5e9; border-color: #0ea5e9; }
.fee-pending-card .pending-item .form-check-input:disabled { cursor: not-allowed; opacity: .5; }
.fee-pending-card .pending-item-label { flex: 1; font-size: .8125rem; font-weight: 600; color: #1c1e21; min-width: 0; }
.fee-pending-card .pending-item-label .pending-badge {
  display: inline-block;
  font-size: .625rem;
  font-weight: 600;
  padding: .0625rem .375rem;
  border-radius: .25rem;
  margin-left: .375rem;
  vertical-align: middle;
}
.fee-pending-card .pending-item-label .pending-badge.bg-paid { background: #d1fae5; color: #059669; }
.fee-pending-card .pending-item-label .pending-badge.bg-partial { background: #fef3c7; color: #d97706; }
.fee-pending-card .pending-item-amount { text-align: right; flex-shrink: 0; }
.fee-pending-card .pending-item-amount .amt-main { font-size: .8125rem; font-weight: 700; color: #1c1e21; display: block; }
.fee-pending-card .pending-item-amount .amt-due { font-size: .625rem; color: #9ca3af; display: block; }
.fee-pending-card .pending-item-amount .amt-due strong { color: #ef4444; }
.fee-pending-card .pending-installments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .25rem;
  margin-top: .125rem;
  padding-left: 1.5rem;
}
.fee-pending-card .pending-month-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .5rem;
  border-radius: .375rem;
  font-size: .75rem;
  transition: background .1s;
}
.fee-pending-card .pending-month-item:hover { background: #f9fafb; }
.fee-pending-card .pending-month-item .form-check { margin: 0; padding: 0; min-height: 0; }
.fee-pending-card .pending-month-item .form-check-input {
  width: .9em;
  height: .9em;
  margin: 0;
  cursor: pointer;
  border-color: #d1d5db;
}
.fee-pending-card .pending-month-item .form-check-input:checked { background-color: #0ea5e9; border-color: #0ea5e9; }
.fee-pending-card .pending-month-item .form-check-input:disabled { cursor: not-allowed; opacity: .5; }
.fee-pending-card .pending-month-item .month-label { flex: 1; font-weight: 500; color: #374151; }
.fee-pending-card .pending-month-item .month-amt { font-size: .6875rem; color: #6b7280; }
.fee-pending-card .pending-month-item.paid { opacity: .5; }
.fee-pending-card .pending-month-item.paid .month-label { color: #9ca3af; text-decoration: line-through; }
.fee-pending-card .pending-divider {
  height: 1px;
  background: #f0f2f5;
  margin: .5rem 0;
}

/* ── Payment Form ── */
.fee-payment-card {
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  border: 1px solid #eef0f4;
  margin-bottom: 1rem;
  overflow: hidden;
  display: none;
  animation: feeSlideDown .3s ease;
}
.fee-payment-card.show { display: block; }
.fee-payment-card .payment-header {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .625rem;
}
.fee-payment-card .payment-header h6 {
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: .875rem;
}
.fee-payment-card .payment-header i { color: rgba(255,255,255,.8); }
.fee-payment-card .payment-body { padding: 1.25rem; }
.fee-payment-card .payment-close {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s;
  margin-left: auto;
}
.fee-payment-card .payment-close:hover { background: rgba(255,255,255,.25); }

/* ── Form Row Grouping ── */
.fee-form-section {
  background: #f9fafb;
  border-radius: .5rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #f0f2f5;
}
.fee-form-section .section-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a94a6;
  font-weight: 600;
  margin-bottom: .75rem;
}

/* ── Amount Input Group ── */
.fee-amount-input .input-group-text {
  background: #f3f4f6;
  border: 1px solid #e2e5ea;
  color: #6b7280;
  font-weight: 600;
  font-size: .8125rem;
}
.fee-amount-input .form-control {
  border-left: none;
}
.fee-amount-input .form-control:focus + .input-group-text { border-color: #0ea5e9; }

/* ── Net Amount Display ── */
.fee-net-amount {
  background: linear-gradient(135deg, #f0f7ff, #e0f2fe);
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Pending Dues Card ── */
.fee-pending-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.fee-pending-card .pending-title {
  font-weight: 600;
  font-size: .8125rem;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .625rem;
}
.fee-pending-card .pending-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 1rem;
  padding: .2rem .65rem;
  font-size: .6875rem;
  color: #92400e;
  margin: .125rem;
}

/* ── Action Buttons ── */
.fee-action-bar {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.fee-action-bar .btn {
  border-radius: .5rem;
  font-weight: 600;
  padding: .5rem 1.125rem;
  font-size: .8125rem;
}
.fee-action-bar .btn-primary {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  border: none;
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
.fee-action-bar .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14,165,233,.35);
}

/* ── Loading Skeleton ── */
.fee-skeleton {
  padding: 1rem;
}
.fee-skeleton .sk-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.fee-skeleton .sk-box {
  background: linear-gradient(90deg, #f0f2f5 25%, #e5e7eb 50%, #f0f2f5 75%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s infinite;
  border-radius: .5rem;
}
.fee-skeleton .sk-sm { width: 80px; height: 16px; }
.fee-skeleton .sk-md { width: 140px; height: 16px; }
.fee-skeleton .sk-lg { width: 100%; height: 80px; }
.fee-skeleton .sk-stat { height: 60px; flex: 1; }

@keyframes skShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes feeFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes feeSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Modal Enhancements ── */
.fee-modal .modal-header {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  border: none;
  padding: 1rem 1.25rem;
}
.fee-modal .modal-header .btn-close { filter: brightness(0) invert(1); }
.fee-modal .modal-header .modal-title {
  font-weight: 600;
  font-size: .9375rem;
}
.fee-modal .modal-content {
  border: none;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
}

/* ── Receipt Button ── */
.btn-receipt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: .375rem;
  border: 1px solid #e2e5ea;
  color: #6b7280;
  background: #fff;
  text-decoration: none;
  transition: all .12s;
}
.btn-receipt:hover {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #fff;
}

/* ── Success Snackbar ── */
.fee-snackbar {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.125rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  animation: feeSnackbarIn .4s cubic-bezier(.21,1.02,.73,1) forwards;
  position: relative;
}
.fee-snackbar .snackbar-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d1fae5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.fee-snackbar .snackbar-body { flex: 1; min-width: 0; }
.fee-snackbar .snackbar-title { font-size: .9375rem; font-weight: 700; color: #065f46; margin-bottom: .125rem; }
.fee-snackbar .snackbar-text { font-size: .8125rem; color: #6b7280; }
.fee-snackbar .snackbar-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.fee-snackbar .snackbar-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4rem .875rem;
  border-radius: .5rem;
  font-size: .75rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.fee-snackbar .snackbar-btn-pdf {
  background: #ecfdf5;
  color: #059669;
}
.fee-snackbar .snackbar-btn-pdf:hover {
  background: #d1fae5;
  color: #047857;
}
.fee-snackbar .snackbar-btn-print {
  background: #f0f7ff;
  color: #0284c7;
}
.fee-snackbar .snackbar-btn-print:hover {
  background: #bae6fd;
  color: #0369a1;
}
.fee-snackbar .snackbar-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .12s;
}
.fee-snackbar .snackbar-close:hover { background: #f3f4f6; color: #4b5563; }
@keyframes feeSnackbarIn {
  0% { opacity: 0; transform: translateY(-12px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .fee-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .payment-mode-group { grid-template-columns: repeat(2, 1fr); }
  .fee-page-header { padding: 1.25rem 1.5rem; }
}
@media (max-width: 576px) {
  .fee-stat-grid { grid-template-columns: 1fr 1fr; gap: .625rem; }
  .fee-stat-card { padding: 1rem; }
  .fee-stat-card .stat-value { font-size: 1.05rem; }
  .payment-mode-group { grid-template-columns: repeat(2, 1fr); }
  .fee-search-card { padding: 1rem 1.25rem; }
  .fee-student-profile { padding: 1rem 1.25rem; }
  .fee-student-profile .profile-stat { border-left: none; border-top: 1px solid #f0f2f5; }
  .fee-page-header { padding: 1rem 1.25rem; }
  .fee-page-header h5 { font-size: 1rem; }
  .fee-payment-card .payment-body { padding: 1rem; }
  .fee-form-section { padding: 1rem; }
}

/* ══════════════════════════════════════════════════
   Collections List — Modern Redesign
   ══════════════════════════════════════════════════ */

/* ── Stats Row ── */
.fee-list-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
.fee-stat-item {
  background: #fff;
  border-radius: .75rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid #eef0f4;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all .2s ease;
}
.fee-stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.fee-stat-item .fee-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.fee-stat-item .fee-stat-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
  font-weight: 600;
  margin-bottom: .0625rem;
}
.fee-stat-item .fee-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1c1e21;
  line-height: 1.2;
}

/* ── Floating Toast ── */
.fee-toast {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.125rem 1.25rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  animation: feeToastIn .4s cubic-bezier(.21,1.02,.73,1) forwards;
  transform-origin: top right;
}
.fee-toast:not(.show) {
  animation: feeToastOut .25s ease forwards;
}
.fee-toast-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d1fae5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.fee-toast-body { flex: 1; min-width: 0; }
.fee-toast-title { font-size: .9375rem; font-weight: 700; color: #065f46; margin-bottom: .125rem; }
.fee-toast-text { font-size: .8125rem; color: #6b7280; }
.fee-toast-actions { display: flex; gap: .5rem; margin-top: .625rem; }
.fee-toast-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .35rem .75rem;
  border-radius: .5rem;
  font-size: .75rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.fee-toast-btn-pdf { background: #ecfdf5; color: #059669; }
.fee-toast-btn-pdf:hover { background: #d1fae5; color: #047857; }
.fee-toast-btn-print { background: #f0f7ff; color: #0284c7; }
.fee-toast-btn-print:hover { background: #bae6fd; color: #0369a1; }
.fee-toast-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .12s;
}
.fee-toast-close:hover { background: #f3f4f6; color: #4b5563; }
@keyframes feeToastIn {
  0% { opacity: 0; transform: translateY(-16px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes feeToastOut {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(.95); }
}

/* ── Filter Bar ── */
.fee-filter-bar {
  background: #fff;
  border-radius: .75rem;
  border: 1px solid #eef0f4;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  padding: .875rem 1.125rem;
  margin-bottom: 1rem;
  transition: box-shadow .2s ease;
}
.fee-filter-bar:focus-within {
  box-shadow: 0 2px 12px rgba(14,165,233,.1);
  border-color: #0ea5e9;
}
.fee-filter-row {
  display: flex;
  gap: .75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.fee-filter-group {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.fee-filter-group-search { flex: 1; min-width: 180px; }
.fee-filter-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
  font-weight: 600;
}
.fee-filter-select,
.fee-filter-input {
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
  padding: .45rem .75rem;
  font-size: .8125rem;
  color: #1c1e21;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.fee-filter-select { padding-right: 2rem; }
.fee-filter-select:focus,
.fee-filter-input:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}
.fee-filter-input[readonly] { background: #fff; cursor: default; }
.fee-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.fee-search-icon {
  position: absolute;
  left: .75rem;
  color: #9ca3af;
  font-size: .75rem;
  pointer-events: none;
  z-index: 1;
}
.fee-search-input { padding-left: 2rem !important; }
.fee-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: .25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  max-height: 240px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
}
.fee-search-results.show { display: block; }
.fee-search-result-item {
  display: block;
  padding: .5rem .75rem;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  transition: all .1s;
  cursor: pointer;
}
.fee-search-result-item:hover {
  border-left-color: #0ea5e9;
  background: #f8fafc;
}
.fee-search-result-item + .fee-search-result-item {
  border-top: 1px solid #f0f2f5;
}
.fee-search-result-name { font-size: .8125rem; color: #1c1e21; }
.fee-search-result-meta { font-size: .6875rem; color: #9ca3af; margin-top: .125rem; }
.fee-search-no-result {
  padding: .75rem;
  text-align: center;
  font-size: .8125rem;
  color: #9ca3af;
}
.fee-filter-actions {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  padding-bottom: 1px;
}

/* ── List Card ── */
.fee-list-card {
  background: #fff;
  border-radius: .75rem;
  border: 1px solid #eef0f4;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}
.fee-list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid #f0f2f5;
}
.fee-list-card-title {
  font-size: .8125rem;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.fee-list-card-title i { color: #0ea5e9; }
.fee-list-count {
  font-size: .6875rem;
  color: #9ca3af;
  font-weight: 500;
  background: #f3f4f6;
  padding: .2rem .55rem;
  border-radius: 1rem;
}

/* ── Enrollment Form ── */
.fee-enroll-body { padding: 1.25rem; }
.fee-enroll-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.fee-enroll-group {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.fee-enroll-form { display: flex; flex-direction: column; gap: 1rem; max-width: 960px; }
.fee-enroll-opt {
  font-size: .6875rem;
  color: #9ca3af;
  font-weight: 400;
  margin-left: .25rem;
}
.fee-enroll-creds {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f2f5;
}
.fee-enroll-pw { display: flex; gap: .5rem; }
.fee-enroll-pw-btn {
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
  padding: 0 .85rem;
  font-size: .75rem;
  font-weight: 600;
  color: #6b7280;
  background: #f9fafb;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.fee-enroll-pw-btn:hover { border-color: #0ea5e9; color: #0ea5e9; background: #f0f9ff; }
.fee-enroll-file {
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
  font-size: .8125rem;
  color: #1c1e21;
  background: #fff;
  padding: .4rem .75rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s;
}
.fee-enroll-file:focus { border-color: #0ea5e9; outline: none; }
.fee-enroll-file::file-selector-button {
  border: 1px solid #e2e5ea;
  border-radius: .375rem;
  padding: .25rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  color: #374151;
  background: #f9fafb;
  cursor: pointer;
  margin-right: .5rem;
  transition: all .15s;
}
.fee-enroll-file::file-selector-button:hover { border-color: #0ea5e9; color: #0ea5e9; background: #f0f9ff; }

/* ── Custom Checkbox ── */
.fee-enroll-check-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .8125rem;
  color: #374151;
  user-select: none;
}
.fee-enroll-check {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: .25rem;
  border: 1.5px solid #d1d5db;
  appearance: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .15s;
  flex-shrink: 0;
  margin: 0;
}
.fee-enroll-check::before {
  content: "\f26e";
  font-family: "bootstrap-icons";
  font-size: .65rem;
  color: #fff;
  opacity: 0;
  transition: opacity .15s;
}
.fee-enroll-check:checked { background: #0ea5e9; border-color: #0ea5e9; }
.fee-enroll-check:checked::before { opacity: 1; }
.fee-enroll-check-desc { color: #9ca3af; font-weight: 400; }

/* ── Enroll Action Buttons ── */
.fee-enroll-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding-top: .5rem;
}
.fee-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  font-size: .8125rem;
  font-weight: 600;
  border-radius: .5rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  line-height: 1.4;
}
.fee-btn i { font-size: .875rem; }
.fee-btn-primary {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}
.fee-btn-primary:hover { background: #0284c7; border-color: #0284c7; color: #fff; }
.fee-btn-outline {
  background: #fff;
  color: #6b7280;
  border-color: #e2e5ea;
}
.fee-btn-outline:hover { border-color: #d1d5db; color: #374151; background: #f9fafb; }

/* ── Direct Enrollment (Modern Minimal) ── */
.enroll-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.enroll-header-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .625rem;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.enroll-header-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1c1e21;
  margin: 0;
  line-height: 1.3;
}
.enroll-header-sub {
  font-size: .78rem;
  color: #9ca3af;
  margin: .1rem 0 0;
}
.enroll-form {
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.enroll-section {
  background: #fff;
  border: 1px solid #f0f2f5;
  border-radius: .75rem;
  overflow: hidden;
  transition: box-shadow .2s;
}
.enroll-section:hover { box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.enroll-section-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.1rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #374151;
  background: #fafbfc;
  border-bottom: 1px solid #f0f2f5;
}
.enroll-section-head i { font-size: .9rem; color: #0ea5e9; }
.enroll-section-body { padding: 1.1rem; }
.enroll-label {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: .35rem;
  letter-spacing: .01em;
}
.enroll-input {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  font-size: .8125rem;
  color: #1c1e21;
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.enroll-input:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,.1);
  outline: none;
}
.enroll-input::placeholder { color: #c4c8ce; }
.enroll-optional {
  font-size: .675rem;
  font-weight: 400;
  color: #b0b4bb;
  margin-left: auto;
}
.enroll-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-size: .8125rem;
  color: #374151;
  user-select: none;
}
.enroll-toggle input { display: none; }
.enroll-toggle-mark {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: .25rem;
  border: 1.5px solid #d1d5db;
  display: grid;
  place-items: center;
  transition: all .2s;
  flex-shrink: 0;
  background: #fff;
}
.enroll-toggle-mark::before {
  content: "\f26e";
  font-family: "bootstrap-icons";
  font-size: .65rem;
  color: #fff;
  opacity: 0;
  transition: opacity .15s;
}
.enroll-toggle input:checked + .enroll-toggle-mark {
  background: #0ea5e9;
  border-color: #0ea5e9;
}
.enroll-toggle input:checked + .enroll-toggle-mark::before { opacity: 1; }
.enroll-toggle-text { font-weight: 500; }
.enroll-creds {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid #f0f2f5;
}
.enroll-pw-group {
  display: flex;
  gap: .5rem;
}
.enroll-pw-group .enroll-input { flex: 1; }
.enroll-pw-btn {
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
  padding: 0 .85rem;
  font-size: .75rem;
  font-weight: 600;
  color: #6b7280;
  background: #f9fafb;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.enroll-pw-btn:hover { border-color: #0ea5e9; color: #0ea5e9; background: #f0f9ff; }
.enroll-file {
  border: 1px solid #e2e5ea;
  border-radius: .5rem;
  font-size: .8125rem;
  color: #1c1e21;
  background: #fff;
  padding: .4rem .75rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s;
}
.enroll-file:focus { border-color: #0ea5e9; outline: none; }
.enroll-file::file-selector-button {
  border: 1px solid #e2e5ea;
  border-radius: .375rem;
  padding: .25rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  color: #374151;
  background: #f9fafb;
  cursor: pointer;
  margin-right: .5rem;
  transition: all .15s;
}
.enroll-file::file-selector-button:hover { border-color: #0ea5e9; color: #0ea5e9; background: #f0f9ff; }
.enroll-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding-top: .25rem;
}
.enroll-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.15rem;
  font-size: .8125rem;
  font-weight: 600;
  border-radius: .5rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  line-height: 1.4;
}
.enroll-btn i { font-size: .875rem; }
.enroll-btn-primary {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  border-color: transparent;
}
.enroll-btn-primary:hover {
  background: linear-gradient(135deg, #0284c7, #4f46e5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(14,165,233,.25);
}
.enroll-btn-secondary {
  background: #fff;
  color: #6b7280;
  border-color: #e2e5ea;
}
.enroll-btn-secondary:hover { border-color: #d1d5db; color: #374151; background: #f9fafb; }

/* ── Dark theme overrides ── */
[data-bs-theme="dark"] .enroll-header-title { color: #e5e7eb; }
[data-bs-theme="dark"] .enroll-section { background: #1e2028; border-color: #2a2d36; }
[data-bs-theme="dark"] .enroll-section:hover { box-shadow: 0 1px 6px rgba(0,0,0,.15); }
[data-bs-theme="dark"] .enroll-section-head { background: #23262e; border-color: #2a2d36; color: #d1d5db; }
[data-bs-theme="dark"] .enroll-label { color: #9ca3af; }
[data-bs-theme="dark"] .enroll-input {
  background: #1a1c24;
  border-color: #2a2d36;
  color: #e5e7eb;
}
[data-bs-theme="dark"] .enroll-input:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
[data-bs-theme="dark"] .enroll-input::placeholder { color: #4b5563; }
[data-bs-theme="dark"] .enroll-optional { color: #6b7280; }
[data-bs-theme="dark"] .enroll-toggle { color: #d1d5db; }
[data-bs-theme="dark"] .enroll-toggle-mark { background: #1a1c24; border-color: #374151; }
[data-bs-theme="dark"] .enroll-creds { border-color: #2a2d36; }
[data-bs-theme="dark"] .enroll-pw-btn { background: #23262e; border-color: #2a2d36; color: #9ca3af; }
[data-bs-theme="dark"] .enroll-pw-btn:hover { border-color: #0ea5e9; color: #0ea5e9; background: #1a1c24; }
[data-bs-theme="dark"] .enroll-file { background: #1a1c24; border-color: #2a2d36; color: #e5e7eb; }
[data-bs-theme="dark"] .enroll-file::file-selector-button { background: #23262e; border-color: #2a2d36; color: #9ca3af; }
[data-bs-theme="dark"] .enroll-file::file-selector-button:hover { border-color: #0ea5e9; color: #0ea5e9; background: #1a1c24; }
[data-bs-theme="dark"] .enroll-btn-secondary { background: #1e2028; border-color: #2a2d36; color: #9ca3af; }
[data-bs-theme="dark"] .enroll-btn-secondary:hover { border-color: #374151; color: #d1d5db; background: #23262e; }

/* ── Modern Table ── */
.fee-list-table-wrap { overflow-x: auto; }
.fee-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}
.fee-list-table thead th {
  background: #f8fafc;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8a94a6;
  font-weight: 700;
  padding: .75rem 1rem;
  border-bottom: 2px solid #eef0f4;
  white-space: nowrap;
}
.fee-list-table thead th:first-child { padding-left: 1.25rem; }
.fee-list-table thead th:last-child { padding-right: 1.25rem; }
.fee-list-table tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.fee-list-table tbody td:first-child { padding-left: 1.25rem; }
.fee-list-table tbody td:last-child { padding-right: 1.25rem; }
.fee-list-table tbody tr:hover td { background: #f8fafc; }
.fee-list-table tbody tr:last-child td { border-bottom: none; }
.fee-list-table tbody tr { transition: background .1s; }

/* Receipt link */
.fee-receipt-link {
  text-decoration: none;
  font-weight: 600;
  color: #0284c7;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  transition: color .12s;
}
.fee-receipt-link:hover { color: #0369a1; }
.fee-receipt-link i { font-size: .875rem; }

/* Student cell */
.fee-student-cell {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.fee-student-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8125rem;
  flex-shrink: 0;
}
.fee-student-name {
  font-weight: 600;
  color: #1c1e21;
  font-size: .8125rem;
  line-height: 1.3;
}
.fee-student-meta {
  font-size: .6875rem;
  color: #9ca3af;
}

/* Amount */
.fee-amount {
  font-weight: 700;
  color: #1c1e21;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Payment mode badge */
.fee-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 1rem;
  font-size: .625rem;
  font-weight: 600;
  white-space: nowrap;
}
.fee-mode-badge i { font-size: .75rem; }

/* Date */
.fee-date {
  color: #6b7280;
  font-weight: 500;
}

/* Status dot (modern pill) */
.fee-status-dot {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .2rem .6rem;
  border-radius: 1rem;
}
.fee-status-dot.completed { background: #d1fae5; color: #065f46; }
.fee-status-dot.partial { background: #fef3c7; color: #92400e; }
.fee-status-dot.pending { background: #fee2e2; color: #991b1b; }
.fee-status-dot i { font-size: .5rem; }

/* Action group */
.fee-action-group {
  display: inline-flex;
  gap: .25rem;
}
.fee-action-btn {
  width: 30px;
  height: 30px;
  border-radius: .375rem;
  border: 1px solid #e2e5ea;
  background: #fff;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
}
.fee-action-btn:hover {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #fff;
}

/* Empty state */
.fee-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #9ca3af;
}
.fee-empty i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: .75rem;
  color: #d1d5db;
}
.fee-empty p {
  margin: 0 0 .75rem;
  font-size: .875rem;
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .fee-list-stats { grid-template-columns: repeat(2, 1fr); }
  .fee-filter-row { gap: .5rem; }
  .fee-filter-group { flex: 1; min-width: calc(50% - .5rem); }
  .fee-filter-group-search { min-width: 100%; }
}
@media (max-width: 576px) {
  .fee-list-stats { grid-template-columns: 1fr 1fr; gap: .625rem; }
  .fee-stat-item { padding: .875rem 1rem; }
  .fee-stat-item .fee-stat-value { font-size: 1.05rem; }
  .fee-toast { right: .75rem; left: .75rem; max-width: none; }
  .fee-list-table thead th,
  .fee-list-table tbody td { padding: .6rem .625rem; }
  .fee-list-table thead th:first-child,
  .fee-list-table tbody td:first-child { padding-left: .75rem; }
  .fee-list-table thead th:last-child,
  .fee-list-table tbody td:last-child { padding-right: .75rem; }
}

/* ══════════════════════════════════════════════════
   FullCalendar — Professional Class Routine Theme
   ══════════════════════════════════════════════════ */

/* CSS Variables — override FullCalendar v6 defaults */
.fc {
  --fc-border-color: #e2e8f0;
  --fc-button-text-color: #475569;
  --fc-button-bg-color: #fff;
  --fc-button-border-color: #e2e8f0;
  --fc-button-hover-bg-color: #f8fafc;
  --fc-button-hover-border-color: #cbd5e1;
  --fc-button-active-bg-color: #f1f5f9;
  --fc-button-active-border-color: #94a3b8;
  --fc-today-bg-color: #f0f7ff;
  --fc-highlight-color: rgba(59, 130, 246, .12);
  --fc-now-indicator-color: #ef4444;
  --fc-neutral-bg-color: #f8fafc;
  --fc-page-bg-color: #fff;
  --fc-event-bg-color: #fff;
  --fc-event-border-color: #e2e8f0;
  --fc-event-text-color: #1e293b;
  --fc-event-selected-overlay-color: rgba(0,0,0,.08);
  font-family: inherit;
}

/* ── Toolbar ── */
.fc .fc-toolbar {
  gap: .5rem;
  margin-bottom: .875rem !important;
}

.fc .fc-toolbar-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -.01em;
}

.fc .fc-button {
  font-size: .75rem;
  padding: .35rem .8rem;
  border-radius: .375rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: all .15s;
  text-transform: none;
  letter-spacing: normal;
  min-height: auto;
  line-height: 1.4;
}

.fc .fc-button-primary:not(:disabled):hover {
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.fc .fc-today-button {
  font-weight: 600;
}

/* ── Day Headers ── */
.fc .fc-col-header-cell {
  border-color: var(--fc-border-color);
  background: #f9fafb;
  border-bottom: 2px solid #e2e8f0;
}

.fc .fc-col-header-cell-cushion {
  font-size: .72rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .7rem 0 .5rem;
  text-decoration: none;
}

.fc .fc-col-header-cell.fc-day-today {
  background: #eff6ff;
}
.fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
  color: #2563eb;
}

/* ── Time Grid ── */
.fc .fc-timegrid-slot {
  height: 2.4rem;
}

.fc .fc-timegrid-slot-label-cushion {
  font-size: .68rem;
  color: #94a3b8;
  font-weight: 500;
}

.fc .fc-timegrid-axis-cushion {
  font-size: .68rem;
  color: #94a3b8;
}

.fc .fc-timegrid-slots table,
.fc .fc-timegrid-slots td,
.fc .fc-timegrid-slots th {
  border-color: #f1f5f9;
}

.fc .fc-timegrid-col {
  border-color: #e2e8f0;
}

.fc .fc-timegrid-col.fc-day-today {
  background: #fafdff;
}

/* ── Scroll Grid ── */
.fc .fc-scrollgrid {
  border-color: #e2e8f0;
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.fc .fc-scrollgrid-section > td {
  border-color: #e2e8f0;
}

/* ── Events ── */
.fc .fc-event {
  border-radius: .375rem;
  border: none;
  cursor: pointer;
  margin: 1px 3px;
  padding: 0 !important;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  -webkit-font-smoothing: antialiased;
}

.fc .fc-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 2;
}

.fc .fc-event-main {
  padding: 0;
}

/* ── Custom Event Content ── */
.fc-event-custom {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 100%;
  padding: 5px 7px;
}

.fc-event-custom-title {
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
}

.fc-event-custom-meta {
  font-size: .66rem;
  opacity: .7;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-event-custom-teacher {
  font-size: .63rem;
  opacity: .55;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* ── Now Indicator ── */
.fc .fc-timegrid-now-indicator-line {
  border-color: var(--fc-now-indicator-color);
  border-width: 2px;
}

.fc .fc-timegrid-now-indicator-arrow {
  border-color: var(--fc-now-indicator-color);
  border-width: 2px;
}

/* ── Selection ── */
.fc .fc-highlight {
  background: var(--fc-highlight-color);
  opacity: 1;
}

/* ── More Popover ── */
.fc .fc-more-popover {
  border-radius: .5rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  border: 1px solid #e2e8f0;
}

.fc .fc-more-popover .fc-popover-header {
  background: #f9fafb;
  padding: .5rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  border-bottom: 1px solid #f1f5f9;
}

/* ── Calendar Container ── */
#classRoutineCalendar .fc,
#eventsCalendar .fc,
#holidaysCalendar .fc,
#calendar .fc {
  min-height: 530px;
}

/* ── Toast ── */
.fc-toast {
  position: absolute;
  top: .75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1070;
  border-radius: .5rem;
  font-size: .8125rem;
  padding: .5rem 1rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
  animation: feeSlideDown .3s ease;
}

/* ── Loader ── */
.calendar-loader {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border-radius: .5rem;
}

/* ── Holiday Events ── */
.fc .fc-daygrid-event-holiday {
  opacity: .35;
}

/* ══════════════════════════════════════════════════
   Calendar — Events Page (Preskool-style)
   ══════════════════════════════════════════════════ */

/* Page title */
.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
}

.breadcrumb { font-size: .8125rem; }
.breadcrumb-item a { color: #64748b; text-decoration: none; }
.breadcrumb-item a:hover { color: #0d6efd; }

/* Icon font size for drag items */
.fs-8 { font-size: .5rem !important; }

/* Drag & Drop Event sidebar */
#calendar-events { min-height: 120px; }

.calendar-events {
  padding: .625rem .75rem;
  margin-bottom: .5rem;
  border: 1px dashed #dde0e5;
  background: #f9fafb;
  cursor: grab;
  transition: all .15s;
  font-size: .8125rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  user-select: none;
}

.calendar-events:active { cursor: grabbing; }

.calendar-events:hover {
  background: #f0f2f5;
  border-color: #c4c9d1;
}

.calendar-events.fc-dragging { opacity: .6; }

.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events { min-height: 2em; }

.fc .fc-highlight { opacity: .3; }

.fc .fc-daygrid-event {
  border-radius: .25rem;
  padding: 2px 6px;
  font-size: .75rem;
  font-weight: 500;
}

/* Modal close button with icon (Preskool style) */
.custom-btn-close {
  background: none !important;
  opacity: 1;
  border: none;
  padding: 0;
  width: auto;
  height: auto;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #6c757d;
}
.custom-btn-close:hover { color: #000; }

/* Detail modal header */
.modal-bg { background-color: #1e293b !important; }
.modal-bg .modal-title { font-size: 1rem; }
.btn-close-modal { color: #fff !important; }
.btn-close-modal:hover { color: #ccc !important; }

/* Modal footer buttons */
.modal-footer .btn { font-size: .8125rem; }

/* Tabler icon adjustments in detail modal */
#event_modal .modal-body p { font-size: .875rem; }
#event_modal .modal-body i { font-size: 1rem; }

/* Calendar container */
.card.bg-white { background: #fff; }

/* Override FullCalendar event styles for our events */
.fc .fc-event {
  border-radius: .25rem;
  padding: 2px 6px;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
}

/* ── Finance / Expenses / Income ── */

.finance-toast {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  border-radius: 0.375rem;
  animation: fadeInDown 0.25s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-body { position: relative; }

#expenseTable td, #incomeTable td, #categoryTable td {
  vertical-align: middle;
  font-size: 0.875rem;
}

#expenseTable thead th, #incomeTable thead th, #categoryTable thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: #6c757d;
  border-bottom-width: 1px;
  padding: 0.75rem;
  white-space: nowrap;
}

#expenseTable tbody td, #incomeTable tbody td, #categoryTable tbody td {
  padding: 0.625rem 0.75rem;
}

.btn-sm.btn-light {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #495057;
}

.btn-sm.btn-light:hover {
  background: #e9ecef;
}

.dropdown-item {
  font-size: 0.8125rem;
  padding: 0.4rem 0.75rem;
}

.dropdown-item i {
  font-size: 0.875rem;
}

/* Modal customization */
.modal-header .btn-close.custom-btn-close {
  background: none;
  opacity: 0.7;
  border: none;
  font-size: 1rem;
  padding: 0.5rem;
  line-height: 1;
}

.modal-header .btn-close.custom-btn-close:hover {
  opacity: 1;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #495057;
  margin-bottom: 0.25rem;
}

/* Select filter styling */
.form-select-sm {
  font-size: 0.8125rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Action dots button */
.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .375rem;
}
.btn-icon i { font-size: 1rem; }

/* ══════════════════════════════════════════════════
   Payment Sidebar — Edudash-style slide-in panel
   ══════════════════════════════════════════════════ */

.fee-payment-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease;
}
.fee-payment-overlay.show {
  opacity: 1;
  visibility: visible;
}

.fee-payment-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 520px;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  z-index: 1050;
  box-shadow: -8px 0 30px rgba(0,0,0,.12);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: column;
}
.fee-payment-sidebar.show {
  transform: translateX(0);
}

.fee-payment-sidebar-header {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.fee-payment-sidebar-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s;
  font-size: .8125rem;
}
.fee-payment-sidebar-close:hover {
  background: rgba(255,255,255,.25);
}

.fee-payment-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.fee-payment-sidebar-body .form-label {
  font-size: .75rem;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: .375rem;
}

.fee-payment-sidebar-body .form-control,
.fee-payment-sidebar-body .form-select {
  border-radius: .5rem;
  border-color: #e2e5ea;
  padding: .5rem .75rem;
  font-size: .8125rem;
  transition: border-color .15s, box-shadow .15s;
}
.fee-payment-sidebar-body .form-control:focus,
.fee-payment-sidebar-body .form-select:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}

.fee-payment-sidebar-body .fee-net-amount {
  background: linear-gradient(135deg, #f0f7ff, #e0f2fe);
  border-radius: .5rem;
  padding: .875rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 576px) {
  .fee-payment-sidebar {
    max-width: 100%;
  }
}

/* ── Dark mode: form overrides ── */
[data-theme="dark"] .fee-enroll-body { background: var(--bg-card); }
[data-theme="dark"] .fee-enroll-creds { border-top-color: var(--border-color); }
[data-theme="dark"] .fee-enroll-pw-btn { color: var(--text-secondary); background: var(--input-bg); border-color: var(--input-border); }
[data-theme="dark"] .fee-enroll-pw-btn:hover { border-color: #0ea5e9; color: #38bdf8; background: #1e3a5f; }
[data-theme="dark"] .fee-enroll-file { color: var(--text-primary); background: var(--input-bg); border-color: var(--input-border); }
[data-theme="dark"] .fee-enroll-file::file-selector-button { color: var(--text-secondary); background: var(--input-bg); border-color: var(--input-border); }
[data-theme="dark"] .fee-enroll-file::file-selector-button:hover { border-color: #0ea5e9; color: #38bdf8; background: #1e3a5f; }
[data-theme="dark"] .fee-enroll-check-label { color: var(--text-primary); }
[data-theme="dark"] .fee-btn-outline { color: var(--text-secondary); background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .fee-btn-outline:hover { color: var(--text-primary); background: #334155; border-color: #475569; }