.sup-help{ display:inline-flex; align-items:center; justify-content:center; font-weight:700; width:16px; height:16px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--border); background:rgba(255,255,255,.06); color:var(--text); line-height:1; font-size:11px; }
.sup-help:hover{ box-shadow:inset 0 0 0 1px #ef4444; background:rgba(239,68,68,.12) }
/* active item highlight for suggestion lists */
.suggest .is-active{ background:rgba(124,58,237,.18); }
:root{
  --bg:#0B0E11; --surface:#151A20; --surface2:#10141A;
  --text:#E6EAF2; --muted:#A3AEC2; --border:rgba(255,255,255,0.08);
  --p1:#0B74B0; --p2:#75479C; --p3:#BD3861; --succ:#37ED81; --warn:#FFB020; --danger:#EF4444;
  --radius:14px;
  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:16px; --space-5:20px; --space-6:24px;
}
*{box-sizing:border-box}
html, body{line-height:1.35;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  margin:0; font-family:Inter, Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(11,116,176,.15), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(189,56,97,.12), transparent 60%),
    var(--bg);
  transition: background .3s ease, color .3s ease;
}
.app{display:grid;grid-template-columns:280px 1fr;grid-template-rows:72px 1fr;
     grid-template-areas:"sidebar topbar" "sidebar main";min-height:100vh;}
/* Sidebar */
.sidebar{grid-area:sidebar;position:sticky;top:0;height:100vh;padding:16px;
         background:linear-gradient(180deg, rgba(16,20,26,.75), rgba(16,20,26,.95));
         border-right:1px solid var(--border);} 
.brand{display:flex;align-items:center;gap:12px;padding:8px 10px;margin-bottom:8px}
.badge{width:36px;height:36px;border-radius:12px;background:conic-gradient(from 180deg, var(--p1), var(--p2), var(--p3), var(--p1));
       box-shadow:0 0 18px rgba(11,116,176,.35)}
.nav{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--text);
       text-decoration:none;transition:all .2s ease}
.nav a.active,.nav a:hover{background:linear-gradient(90deg, rgba(11,116,176,.18), rgba(117,71,156,.18));
       box-shadow:inset 0 0 0 1px var(--border); transform:translateX(2px)}
/* Topbar */
.topbar{grid-area:topbar;position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;
        padding:14px 20px;background:rgba(16,20,26,.6);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
/* Search: consistent across pages with desktop-friendly layout */
.search{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--border); flex:1 1 auto; flex-wrap: nowrap; }
.search svg{ flex:0 0 auto; }
.search input{ flex:1 1 300px; min-width: 200px; background:transparent; border:0; outline:0; color:var(--text); }
.btn{cursor:pointer;font-weight:700;border:0;border-radius:999px;padding:10px 16px;display:inline-flex;align-items:center;gap:10px;
     transition:transform .15s ease, box-shadow .15s ease}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{color:#fff;background:linear-gradient(90deg, var(--p1), var(--p2), var(--p3));
             box-shadow:0 8px 20px rgba(11,116,176,.25), inset 0 0 0 1px var(--border)}
.btn-outline{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.btn-secondary{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--border);border-radius:999px;padding:10px 14px}
.btn-secondary:hover{ box-shadow:inset 0 0 0 1px #7c3aed; color:#fff; background:rgba(124,58,237,.15) }
.btn-sm{ padding:8px 12px; font-size:13px; gap:6px }
.btn-sm:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

/* Action Queue Card Spacing */
#action-queue .card:last-child {
  margin-bottom: 0 !important;
}

#action-queue .card {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border: 1px solid var(--border);
}
.btn-danger{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger);border-radius:999px;padding:10px 14px}
.btn-danger:hover{ box-shadow:inset 0 0 0 1px var(--danger); color:#fff; background:rgba(239,68,68,.15) }

/* Installment update notice styling */
.installment-update-notice {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Contextual hover accents for action buttons */
.btn-secondary.fg-warn:hover{ box-shadow:inset 0 0 0 1px #F59E0B; background:rgba(245,158,11,.15); color:#fff }
.btn-secondary.fg-danger:hover{ box-shadow:inset 0 0 0 1px #EF4444; background:rgba(239,68,68,.18); color:#fff }
/* Users & Roles: activate/deactivate hover accent */
.btn-toggle:hover{ box-shadow:inset 0 0 0 1px #EF4444 !important; background:rgba(239,68,68,.12) !important; color:#fff }

/* Main */
.main{grid-area:main;padding:20px;display:grid;gap:var(--space-5);grid-template-rows:auto auto 1fr}
.kpis{display:grid;gap:var(--space-5);grid-template-columns:repeat(4, minmax(220px,1fr)); margin-bottom: var(--space-6);} 
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--border);
      border-radius:var(--radius);padding:var(--space-5)}
.card h3{margin:0 0 6px;font-size:13px;color:var(--muted);font-weight:700}
.value{font-size:28px;font-weight:800;line-height:1}
.kpis .card{min-height:136px;display:flex;flex-direction:column;justify-content:space-between}
.kpis .card .value{font-size:34px;line-height:1.05}
.panels{display:grid;gap:20px;grid-template-columns:1.2fr .8fr;align-items:stretch}
/* vertical spacing between row blocks */
.panels + .panels{ margin-top: var(--space-6); }
.panels + .panel{ margin-top: var(--space-6); }

.panel{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--border);
       border-radius:var(--radius);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.panel h2{margin:0;font-size:17px;letter-spacing:.2px}
/* Lightweight dropdown panel */
.dropdown-panel{ position:absolute; z-index:20; right:16px; left:auto; max-width:560px; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)); border:1px solid var(--border); border-radius:14px; padding:12px; backdrop-filter: blur(8px); box-shadow:0 10px 30px rgba(0,0,0,.4) }
.dropdown-open{ display:block !important }
/* Dropdown header/footer */
.dropdown-panel .hdr{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px }
.dropdown-panel .ftr{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px }
.dropdown-panel .mini-input{ width:100%; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.06); color:var(--text); border:1px solid rgba(255,255,255,.16) }
/* Chip active counter */
.pill.count::after{ content: attr(data-count); margin-left:6px; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.12); font-size:11px }
/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:50 }
.modal.open{ display:flex }
.modal-card{ width:min(720px, 96vw); max-height:90vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 16px 50px rgba(0,0,0,.45) }
.grid.form{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.grid.form label{ font-size:12px; color:var(--muted) }
.grid.form input, .grid.form select{ width:100%; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.02); color:var(--text); border:1px solid rgba(255,255,255,.16); transition:border-color .15s ease, box-shadow .15s ease }
.grid.form input:focus, .grid.form select:focus{ border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.35) }
/* Apply same look to textarea in grid forms */
.grid.form textarea{ width:100%; padding:12px; min-height:120px; border-radius:12px; background:rgba(255,255,255,.02); color:var(--text); border:1px solid rgba(255,255,255,.16); transition:border-color .15s ease, box-shadow .15s ease }
.grid.form textarea:focus{ border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.35) }

/* Generic field styling (used across pages) */
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.02); color:var(--text);
  border:1px solid rgba(255,255,255,.16); transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ min-height:120px; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.35); outline:none; background:rgba(124,58,237,.08)
}
.field .help{ font-size:12px; color:var(--muted); margin-top:4px }

/* Validation states */
[aria-invalid="true"], .input-invalid{
  border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.35) !important;
}
.input-valid{ border-color:#16C784 !important; box-shadow:0 0 0 3px rgba(22,199,132,.28) !important; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px }
/* Table polish */
.table-wrap{width:100%;overflow:auto;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01))}
table.table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px; table-layout: auto}
.table thead th{position:sticky;top:0;background:rgba(16,20,26,.8);backdrop-filter:blur(6px);text-align:left;font-size:12px;color:var(--muted);padding:12px;border-bottom:1px solid var(--border)}
.table tbody td{padding:14px;border-bottom:1px solid var(--border);font-size:14px}
.table tbody tr:hover{background:rgba(255,255,255,.03)}
.table tbody tr:last-child td{border-bottom:0}

/* Chart containers consistent height on small screens */
#chart-line,#chart-bars,#stu-line,#col-bars,#chart-donut,#stu-donut,#col-donut,#rep-line{min-height:320px}
/* Calendar boxes equal height */
#calendar > div{min-height:72px}
/* Highlight today's date in Upcoming Dues Calendar */
.cal-today{ border-color: rgba(245,158,11,.7) !important; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }

/* Pills, tabs, profile */
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01))}
.pill.warn{border-color:rgba(255,176,32,.4); background:rgba(255,176,32,.08); color:#ffddb0}
.pill.succ{border-color:rgba(55,237,129,.4); background:rgba(55,237,129,.08); color:#caffdf}
/* error state for provider not configured */
.pill.danger{border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.12); color:#fecaca}
.pill.info{border-color:rgba(45,129,247,.45); background:rgba(45,129,247,.12); color:#cfe3ff}
/* Paid status for installments */
.pill.paid{ border-color: rgba(55,237,129,.5); background: rgba(55,237,129,.12); color:#caffdf }
/* filter pill active */
.uf.active{ border-color: rgba(124,58,237,.6); box-shadow: 0 0 0 3px rgba(124,58,237,.2) }
/* password meter styles */
.meter{ 
  font-size: 12px; 
  font-weight: 500; 
  transition: color 0.2s ease;
  margin-top: 6px;
}
.meter.weak{ color:#fca5a5 }
.meter.ok{ color:#fbbf24 }
.meter.strong{ color:#86efac }
/* Active range highlight for Reports pills */
.pill.active{ border-color: rgba(245,158,11,.7); box-shadow: 0 0 0 3px rgba(245,158,11,.28); }

/* Toggle (track/thumb) used in Follow-Ups and Settings */
/* Modern toggle based on referenced design */
.tgl{ display:none }
.tgl + .tgl-btn{ outline:0; display:inline-block; width:52px; height:28px; position:relative; cursor:pointer; user-select:none; border-radius:999px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px var(--border); transition:background .2s ease }
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before{ position:absolute; display:block; content:"" }
.tgl + .tgl-btn:after{ width:24px; height:24px; top:2px; left:2px; border-radius:999px; background:#fff; transition: all .2s ease; box-shadow:0 2px 8px rgba(0,0,0,.35) }
.tgl:checked + .tgl-btn{ background:linear-gradient(90deg, var(--p1), var(--p2)) }
.tgl:checked + .tgl-btn:after{ transform: translateX(24px) }
/* Automations: green accent when enabled */
#sch_auto:checked + .tgl-btn{ background: linear-gradient(90deg, #16C784, #37ED81); box-shadow: 0 0 0 3px rgba(22,199,132,.18) }
.tabs{display:flex;gap:10px;flex-wrap:wrap}
.tabs button{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}
.tabs button.active{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Inputs in settings quick controls */
input.pill, select.pill{ background:transparent; color:var(--text); border:1px solid var(--border); padding:8px 10px; border-radius:999px }

/* Form sections and validation */
.form-section{ 
  border: 1px solid var(--border); 
  border-radius: 12px; 
  padding: 16px; 
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.section-title{ 
  font-size: 14px; 
  font-weight: 600; 
  margin-bottom: 16px; 
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.field-group{ margin-bottom: 16px; }
.field-group label{ 
  display: block; 
  margin-bottom: 6px; 
  font-weight: 500; 
  color: var(--text);
}
.field-group input, .field-group select{ 
  width: 100%; 
  padding: 10px 12px; 
  border: 1px solid var(--border); 
  border-radius: 8px; 
  background: transparent; 
  color: var(--text);
  transition: border-color 0.2s ease;
}
.field-group input:focus, .field-group select:focus{ 
  outline: none; 
  border-color: var(--p1); 
  box-shadow: 0 0 0 3px rgba(11,116,176,.1);
}
.validation-error{ 
  font-size: 12px; 
  color: #ef4444; 
  margin-top: 4px; 
  min-height: 16px;
}
.field-group input.error, .field-group select.error{ 
  border-color: #ef4444; 
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.grid{display:grid;gap:20px}
.grid.profile{grid-template-columns:2fr 1fr !important; gap:20px !important}


.keyval{display:grid;grid-template-columns:120px 1fr;gap:8px;font-size:14px}
.timeline{display:flex;flex-direction:column;gap:10px}
.titem{padding:12px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));font-size:13px}

/* Collapsible sidebar styles */
.icon-btn{ width:40px; height:40px; padding:0; border-radius:12px; display:inline-flex; align-items:center; justify-content:center }
.icon-btn:hover{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--border) }
.icon-btn.chev{ transition: transform .18s ease, background .18s ease }
.icon-btn.chev.is-closed{ transform: rotate(-90deg) }
/* smoother icon motion */
.icon-btn.chev svg{ transition: transform .22s cubic-bezier(.22,.61,.36,1) }
.icon-btn.chev.is-closed svg{ transform: rotate(-90deg) }
/* faster native tooltips */
[title]{ -webkit-touch-callout: default; }
body.sb-collapsed .app{ grid-template-columns:80px 1fr }
body.sb-collapsed .brand span, body.sb-collapsed .nav a span{ display:none }
body.sb-collapsed .sidebar{ padding:16px 12px }

/* Responsive */
@media(max-width:1200px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.main{padding:16px}.panel{gap:12px}.kpis{grid-template-columns:repeat(2,1fr);gap:18px}.panels{grid-template-columns:1fr}}
@media(max-width:520px){.kpis{grid-template-columns:1fr;gap:16px}.kpis .card{min-height:120px}.value{font-size:26px}.kpis .card .value{font-size:28px}}
@media(max-width:640px){.kpis{grid-template-columns:1fr}.btn{padding:9px 12px}}

/* Responsive enhancements */
@media (max-width: 900px){
  /* Auto-compact sidebar on small screens */
  .app{ grid-template-columns:80px 1fr; }
  .brand span, .nav a span{ display:none; }
  .sidebar{ padding:16px 12px; }
  .topbar{ padding:12px 14px; }
  .main{ padding:14px; }
  .panels{ grid-template-columns:1fr; gap:16px; }
  .kpis{ grid-template-columns:repeat(2, 1fr); gap:16px; }
  .btn{ padding:9px 12px; }
}

@media (max-width: 640px){
  .kpis{ grid-template-columns:1fr; gap:14px; }
  .kpis .card{ min-height:120px; }
  .value{ font-size:26px; }
  .kpis .card .value{ font-size:28px; }
  .search{ padding:8px 10px; gap:8px; }
  .panel{ gap:12px; padding:16px; }
  /* reduce chart heights on very small screens */
  #chart-line,#chart-bars,#stu-line,#col-bars,#chart-donut,#stu-donut,#col-donut,#rep-line{ min-height:240px; }
  .grid.form{ grid-template-columns:1fr }
}

/* Smooth scrolling inside wide tables on touch devices */
.table-wrap{ -webkit-overflow-scrolling: touch; }

/* Dynamic grid improvements */
/* Containers allow shrinking without overflow */
.app, .main, .kpis, .panels { min-width: 0; }

/* KPI cards: allow tighter min width for smoother wrapping */
.kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpis .card { min-width: 0; }

/* Panels: keep fluid at medium widths */
@media (max-width: 1200px){
  .panels{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
}

/* Very small screens: single column and tighter padding */
@media (max-width: 480px){
  .panel{ padding: 14px; }
  .kpis{ gap: 12px; }
  
  /* Profile layout exception - always 2 columns */
  .grid.profile{ 
    grid-template-columns: 2fr 1fr !important; 
    gap: 16px !important;
  }
}

/* Mobile responsive for edit modal */
@media (max-width: 768px) {
  .grid.form {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  
  .form-section {
    padding: 12px;
  }
  
  .section-title {
    font-size: 13px;
    margin-bottom: 12px;
  }
  
  .field-group {
    margin-bottom: 12px;
  }
}

/* Topbar search: allow wrapping on small widths */
.search{ flex-wrap: wrap; }
.search input{ min-width: 0; flex: 1 1 180px; }
@media (max-width: 520px){
  .search button{ width: 100%; }
}

/* KPI cards: fluid columns already set to auto-fit; keep consistent gaps */
.kpis { gap: 16px; }

/* Generic responsive panels grid at medium widths; use !important to beat inline styles */
@media (max-width: 1200px){
  .panels{ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; }
}

/* Single column on small screens; force override for sections with inline grid columns */
@media (max-width: 900px){
  .panels{ grid-template-columns: 1fr !important; }
  
  

}

/* Stronger responsive overrides for panels with inline grid columns across pages */
@media (max-width: 1200px){
  .panels{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 16px; }
}


@media (max-width: 760px){
  .panels{ grid-template-columns: 1fr !important; }
}

/* Prevent content overflow */
.card, .panel { overflow: hidden; }

/* Smoother KPI stacking with explicit breakpoints */
/* Default: 4 columns on large screens */
.kpis{ grid-template-columns: repeat(4, minmax(220px, 1fr)) !important; }

/* 3 columns on medium-large */
@media (max-width: 1280px){
  .kpis{ grid-template-columns: repeat(3, 1fr) !important; }
}

/* 2 columns on tablets */
@media (max-width: 1024px){
  .kpis{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* 1 column on phones */
@media (max-width: 640px){
  .kpis{ grid-template-columns: 1fr !important; }
}

/* Table cells: allow wrapping and avoid overflow */
.table tbody td, .table thead th{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: none; }
.table-wrap{ overflow:auto; }

/* Ensure action buttons are fully visible in last column */
.table thead th.actions, .table tbody td.actions{ max-width: none; overflow: visible; white-space: nowrap; text-align:left }
.table tbody td.actions{ min-width: 360px; }

/* Charts: cap width to container and avoid internal overflow */
#chart-line,#chart-bars,#stu-line,#col-bars,#chart-donut,#stu-donut,#col-donut,#rep-line{
  width: 100%;
}

/* Collapsed sidebar: center the hamburger to align with icons */
body.sb-collapsed .brand{ justify-content: center; }
body.sb-collapsed .brand .icon-btn{ margin-left: 0; }

/* Ensure icons are visually centered within the 80px rail */
body.sb-collapsed .nav a{ justify-content: center; padding-left: 0; padding-right: 0; }

/* Minor: consistent card spacing on small screens */
@media (max-width: 640px){
  .card{ padding: 16px; }
}

/* Collapsed sidebar and small screens: center the hamburger */
body.sb-collapsed .brand{ justify-content: center; }
body.sb-collapsed .brand .icon-btn{ margin-left: 0 !important; }

@media (max-width: 900px){
  .brand{ justify-content: center; }
  .brand .badge{ display:none; }
  .brand span{ display:none; }
  .brand .icon-btn{ margin-left: 0 !important; }
  .nav a{ justify-content:center; }
}

/* Compact single-line search on small screens */
@media (max-width: 640px){
  .search{ flex-wrap: nowrap; gap:6px; padding:8px 10px; }
  .search input{ flex:1 1 120px; min-width:0; }
  .search .btn{ flex:0 0 auto; padding:8px 10px; white-space:nowrap; }
}

@media (max-width: 400px){
  .search input{ flex-basis: 100px; }
  .search .btn{ padding:7px 8px; font-size:12px; }
}

/* Fade in animation */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

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

/* Student search input styling */
#studentSearch {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  transition: all 0.2s ease;
}

#studentSearch:focus {
  outline: none;
  border-color: var(--p1);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

#studentSearch::placeholder {
  color: var(--muted);
}

/* Clear search button styling */
#clearSearchBtn {
  transition: all 0.2s ease;
  opacity: 0.8;
}

#clearSearchBtn:hover {
  opacity: 1;
  transform: translateY(-1px);
}

#clearSearchBtn:active {
  transform: translateY(0);
}