/* ==============================================================
   BRAINNERS ACADEMY / NIOS ADMISSION MANAGEMENT SYSTEM
   Master Theme — custom.css
   ============================================================== */

:root{
  --bg:#F5F6FA;
  --surface:#FFFFFF;
  --sidebar:#FFFFFF;
  --sidebar-active:#EEF0FB;
  --primary:#3A4CE1;
  --primary-dark:#2E3ECB;
  --primary-light:#EEF0FD;
  --mint:#0E9C86;
  --mint-light:#E4F7F2;
  --amber:#B5790A;
  --amber-light:#FCF0DA;
  --rose:#C22B62;
  --rose-light:#FBE7EF;
  --text:#1B1E33;
  --text-muted:#767C93;
  --border:#E7E9F2;
  --sidebar-width:250px;
  --topbar-height:64px;
  --sidebar-collapsed-width:76px;

  /* ---- Extended palette (used by richer components below) ---- */
  --primary-hi:#5C6CF0;
  --text-2:#3F4854;
  --text-faint:#9AA2AD;
  --sunk:#FAFBFC;
  --line:rgba(27,30,51,.07);
  --line-soft:rgba(27,30,51,.045);
  --success:var(--mint);
  --success-bg:var(--mint-light);
  --success-line:#CBEBD5;
  --danger:var(--rose);
  --danger-bg:var(--rose-light);
  --danger-line:#F6D8D5;
  --amber-line:#F3E3C2;
  --purple:#7C5CFC;
  --purple-light:#F3EFFF;
  --purple-line:#DDD3F9;

  /* ---- Spacing scale ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px;

  /* ---- Radius tokens ---- */
  --r-card:14px;
  --r-ctrl:9px;

  /* ---- Elevation ---- */
  --e1: 0 0 0 1px rgba(27,30,51,.05), 0 1px 2px rgba(27,30,51,.04);
  --e2: 0 0 0 1px rgba(27,30,51,.05), 0 1px 2px rgba(27,30,51,.04), 0 8px 18px -10px rgba(27,30,51,.14);
  --e3: 0 0 0 1px rgba(27,30,51,.06), 0 2px 4px rgba(27,30,51,.04), 0 16px 32px -10px rgba(27,30,51,.16);
  --ring: 0 0 0 3px rgba(58,76,225,.18);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.32,.72,0,1);
  --dur: 160ms;
}

*{box-sizing:border-box;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:13px;
  letter-spacing:-.005em;
}

h1, h2, h3, h4, h5 { font-weight: 600; font-family:'Inter',sans-serif; letter-spacing:-.012em; }
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14.5px; }
h4 { font-size: 13px; }
.small-heading { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Custom scrollbar (lighter) ---------- */
.sidebar-scroll{
  scrollbar-width:thin;
  scrollbar-color:#D8DAE8 transparent;
}
.sidebar-scroll::-webkit-scrollbar{ width:5px; }
.sidebar-scroll::-webkit-scrollbar-track{ background:transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb{ background-color:#D8DAE8; border-radius:10px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover{ background-color:#C3C6DC; }

/* ==============================================================
   LOGIN PAGE
   ============================================================== */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 10px 35px rgba(0,0,0,.25);
    overflow: hidden;
}

.login-card .login-header {
    background: var(--primary);
    color: #fff;
    padding: 26px 24px 20px;
    text-align: center;
}

.login-card .login-header h1 {
    font-size: 14.5px;
    margin: 8px 0 2px;
    font-family:'Inter',sans-serif;
}

.login-card .login-header p {
    font-size: 12px;
    opacity: .85;
    margin: 0;
}

.login-card .login-body { padding: 26px 24px; }

.login-logo {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    font-weight: 700;
    color: var(--primary);
    font-size: 18px;
}

/* ==============================================================
   APP SHELL — SIDEBAR
   ============================================================== */
.app-sidebar{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--sidebar-width);
  background:var(--sidebar);
  border-right:1px solid var(--border);
  z-index:1030;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:left .25s ease;
}
.sidebar-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding:20px 14px 12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 4px 22px;
}
.brand-mark{
  width:34px; height:34px;
  border-radius:9px;
  background:linear-gradient(145deg, #4A5AF0, #3140C4);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  flex-shrink:0;
  box-shadow:0 4px 8px rgba(58,76,225,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-name{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:13px;
  line-height:1.2;
  color:var(--text);
  white-space:normal;
  word-break:break-word;
}
.nav-label{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:16px 12px 8px;
  white-space:nowrap;
}
.app-sidebar .nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:999px;
  font-size:13.5px;
  color:#565C78;
  position:relative;
  margin-bottom:4px;
  transition:background .15s, color .15s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.app-sidebar .nav-link i{
  font-size:16px;
  width:18px;
  text-align:center;
  flex-shrink:0;
  color:#8A90A6;
  transition:color .15s;
}
.app-sidebar .nav-link:hover{
  background:var(--sidebar-active);
  color:var(--text);
}
.app-sidebar .nav-link:hover i{ color:var(--text); }
.app-sidebar .nav-link.active{
  background:var(--primary-light);
  color:var(--primary);
  font-weight:600;
}
.app-sidebar .nav-link.active i{ color:var(--primary); }
.sidebar-foot{
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
  padding:14px;
  background:var(--sidebar);
}
.sidebar-foot .foot-user{ display:flex; align-items:center; gap:10px; }
.sidebar-foot .who{min-width:0; overflow:hidden; flex:1 1 auto;}
.sidebar-foot .who p{font-size:12.5px; font-weight:500; margin:0; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sidebar-foot .who span{font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.logout-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:10px 12px;
  border:1px solid var(--rose-light);
  border-radius:10px;
  background:var(--surface);
  color:var(--rose);
  font-weight:600;
  font-size:13.5px;
  font-family:'Inter',sans-serif;
}
.logout-btn i{font-size:15px;}
.logout-btn:hover{background:var(--rose-light); border-color:var(--rose-light);}

/* ==============================================================
   TOPBAR
   ============================================================== */
.app-topbar{
  position:fixed;
  top:0; left:var(--sidebar-width); right:0;
  height:var(--topbar-height);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  z-index:1020;
  transition:left .25s ease;
  gap:16px;
}
.topbar-left{ display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:0; }
.topbar-left .divider{ width:1px; height:22px; background:var(--border); flex-shrink:0; }
.page-title{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:14.5px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:-.01em;
}
.topbar-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.icon-btn{
  width:36px; height:36px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.icon-btn:hover{background:var(--bg);}
.profile-chip{
  display:flex; align-items:center; gap:9px;
  padding-left:14px;
  border-left:1px solid var(--border);
}
.profile-chip .who p{font-size:13px; font-weight:600; margin:0; color:var(--text);}
.profile-chip .who span{font-size:11px; color:var(--text-muted);}
.avatar-sm{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--primary-light);
  color:var(--primary);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ==============================================================
   CONTENT AREA
   ============================================================== */
.app-content{
  margin-left:var(--sidebar-width);
  margin-top:var(--topbar-height);
  padding:26px 28px 40px;
  transition:margin-left .25s ease;
}

/* ---------- Bootstrap component overrides ---------- */
.card{ border:1px solid var(--border); border-radius:14px; box-shadow:none; }
.card-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:15px;
}
.table{ font-size:12.5px; }
.table thead th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-muted);
  font-weight:600;
  background:var(--bg);
  border-bottom:none;
}
.table td, .table th{ border-color:var(--border); vertical-align:middle; }

.form-label{ font-size:12.5px; font-weight:600; margin-bottom:4px; }
.form-control, .form-select{ font-size:12.5px; padding:6px 10px; }
.form-control:focus, .form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-light);
}

.btn{ font-size:12.5px; padding:6px 14px; border-radius:9px; font-weight:600; }
.btn-primary{ background:var(--primary); border-color:var(--primary); }
.btn-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }

.badge{ font-weight:600; font-size:11px; }
.badge.bg-warning, .text-bg-warning{ background:var(--amber-light) !important; color:var(--amber-text, #B45309) !important; }
.badge.bg-success, .text-bg-success{ background:var(--mint-light) !important; color:var(--mint) !important; }
.badge.bg-danger, .text-bg-danger{ background:var(--rose-light) !important; color:var(--rose) !important; }

.alert{ border-radius:10px; border:1px solid transparent; font-size:13.5px; }
.alert-success{ background:var(--mint-light); color:var(--mint); border-color:var(--mint-light); }
.alert-danger{ background:var(--rose-light); color:var(--rose); border-color:var(--rose-light); }

/* ---------- Greeting banner ---------- */
.greeting-banner{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    background:linear-gradient(90deg, var(--primary-light) 0%, #FFFFFF 78%);
    border:1px solid var(--border);
    border-radius:14px;
    padding:18px 22px;
    margin-bottom:20px;
    overflow:hidden;
}
.greeting-banner .avatar-chip{
    width:42px; height:42px;
    font-size:15px;
    background:var(--primary);
    color:#fff;
    flex-shrink:0;
}
.greeting-banner .greeting-body{position:relative; z-index:1; min-width:0;}
.greeting-banner .greeting-title{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:14.5px;
    color:var(--text);
    margin:0;
}
.greeting-banner .greeting-sub{
    font-size:12.5px;
    color:var(--text-muted);
    margin-top:2px;
}
.greeting-banner .greeting-deco{
    position:absolute;
    right:0; top:0; bottom:0;
    width:260px;
    pointer-events:none;
    overflow:hidden;
}
.greeting-banner .greeting-deco span{
    position:absolute;
    border-radius:50%;
    background:var(--primary);
}
.greeting-banner .greeting-deco .d1{width:150px; height:150px; right:-50px; top:-70px; opacity:.08;}
.greeting-banner .greeting-deco .d2{width:90px; height:90px; right:60px; top:-30px; opacity:.10;}
.greeting-banner .greeting-deco .d3{width:46px; height:46px; right:30px; bottom:-18px; opacity:.14;}
.greeting-banner .greeting-deco .d4{width:14px; height:14px; right:130px; top:22px; opacity:.35;}
.greeting-banner .greeting-deco .d5{width:8px; height:8px; right:100px; bottom:20px; opacity:.4;}
@media (max-width:767.98px){
    .greeting-banner .greeting-deco{display:none;}
}

/* ---------- Stat cards (with color tones) ---------- */
.stat-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:18px 18px 16px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    height:100%;
}
.stat-card .stat-icon{
    width:38px; height:38px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:17px;
    flex-shrink:0;
}
.stat-card.tone-indigo .stat-icon{background:var(--primary-light); color:var(--primary);}
.stat-card.tone-amber .stat-icon{background:var(--amber-light); color:var(--amber);}
.stat-card.tone-mint .stat-icon{background:var(--mint-light); color:var(--mint);}
.stat-card.tone-rose .stat-icon{background:var(--rose-light); color:var(--rose);}
.stat-card .stat-body{min-width:0;}
.stat-card .stat-value{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:19px;
    color:var(--text);
    line-height:1.2;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.stat-card .stat-label{
    font-size:12px;
    color:var(--text-muted);
    margin-top:2px;
}

/* ---------- Compact stat cards (list pages — e.g. Admissions) ----------
   NOTE: renamed to -sm to avoid clashing with the tone-based .stat-card
   above (different layout/markup — horizontal icon+value, no tone-* wrapper) */
.stats-row{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
    margin-bottom:14px;
}
@media (max-width:900px){ .stats-row{grid-template-columns:repeat(2, 1fr);} }
.stat-card-sm{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:10px;
}
.stat-icon-sm{
    width:32px; height:32px;
    border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
    flex-shrink:0;
}
.stat-icon-sm.confirmed{background:var(--primary-light); color:var(--primary);}
.stat-icon-sm.amber{background:var(--amber-light); color:var(--amber);}
.stat-icon-sm.rose{background:var(--rose-light); color:var(--rose);}
.stat-icon-sm.primary{background:var(--primary-light); color:var(--primary);}
.stat-card-sm .label{
    font-size:11px;
    color:var(--text-muted);
    margin:0 0 1px;
}
.stat-card-sm .value{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:16.5px;
    color:var(--text);
    margin:0;
}

/* ---------- Generic content panel ---------- */
.card-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 22px 8px;
}
.card-panel h4{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:13.5px;
    color:var(--text);
}

/* ---------- Person cell (avatar + name in tables) ---------- */
.person-cell{
    display:flex;
    align-items:center;
    gap:10px;
}
.avatar-chip{
    width:32px; height:32px;
    border-radius:50%;
    background:var(--primary-light);
    color:var(--primary);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:12px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.person-cell .p-name{font-weight:600; font-size:13.5px; color:var(--text);}
.person-cell .p-sub{font-size:11.5px; color:var(--text-muted);}

/* ---------- Status pill (table status badges) ----------
   Single naming system: st-confirmed / st-pending / st-cancelled.
   Used across dashboard, admissions, and future list pages. */
.status-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    font-size:11.5px;
    font-weight:600;
}
.status-pill::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
}
.status-pill.st-confirmed{background:var(--mint-light); color:var(--mint);}
.status-pill.st-confirmed::before{background:var(--mint);}
.status-pill.st-pending{background:var(--amber-light); color:var(--amber);}
.status-pill.st-pending::before{background:var(--amber);}
.status-pill.st-cancelled{background:var(--rose-light); color:var(--rose);}
.status-pill.st-cancelled::before{background:var(--rose);}

/* ---------- Content-area table refinements ---------- */
.app-content .table thead th{padding-bottom:10px;}
.app-content .table td{font-size:13.5px; color:var(--text);}
.app-content .table tbody tr{border-bottom:1px solid var(--border);}
.app-content .table tbody tr:last-child{border-bottom:none;}

/* Attendance-specific status badges */
.badge-present{ background:var(--mint-light); color:var(--mint); }
.badge-absent{ background:var(--rose-light); color:var(--rose); }
.badge-late{ background:var(--amber-light); color:var(--amber); }

/* ==============================================================
   LIST-PAGE COMPONENTS (Admissions, and future list pages)
   ============================================================== */

/* ---------- Header banner (with icon + decor circles) ---------- */
.banner{
    background:linear-gradient(120deg, var(--primary-light) 0%, #F3FBF9 55%, var(--surface) 100%);
    border:1px solid var(--border);
    border-radius:14px;
    padding:15px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:14px;
    position:relative;
    overflow:hidden;
}
.banner-left{
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
    z-index:1;
}
.banner-icon{
    width:40px; height:40px;
    border-radius:11px;
    background:var(--primary);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:17px;
    flex-shrink:0;
    box-shadow:0 6px 12px rgba(58,76,225,.25);
}
.banner-left h4{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:14px;
    color:var(--text);
    margin:0 0 2px;
}
.banner-left p{
    font-size:12px;
    color:var(--text-muted);
    margin:0;
}
.banner-actions{
    display:flex;
    align-items:center;
    gap:8px;
    z-index:1;
}
.banner-decor{
    position:absolute;
    right:0; top:0; bottom:0;
    width:200px;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}
.banner-decor span{
    position:absolute;
    border-radius:50%;
    background:var(--primary);
    opacity:.14;
}
.banner-decor span.c1{width:110px; height:110px; right:-30px; top:-30px;}
.banner-decor span.c2{width:70px; height:70px; right:60px; top:35px; opacity:.18;}
.banner-decor span.c3{width:14px; height:14px; right:110px; top:30px; opacity:.5;}
.banner-decor span.c4{width:9px; height:9px; right:75px; top:68px; opacity:.4;}

/* ---------- Banner action buttons ---------- */
.btn-export{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    font-weight:600;
    font-size:12.5px;
    padding:8px 13px;
    border-radius:9px;
    transition:background .15s;
    text-decoration:none;
}
.btn-export:hover{background:var(--bg); color:var(--text); text-decoration:none;}
.btn-add{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--primary);
    border:1px solid var(--primary);
    color:#fff;
    font-weight:600;
    font-size:12.5px;
    padding:8px 15px;
    border-radius:9px;
    box-shadow:0 4px 10px rgba(58,76,225,.25);
    transition:background .15s, box-shadow .15s;
    text-decoration:none;
}
.btn-add:hover{
    background:#2E3ECB;
    border-color:#2E3ECB;
    color:#fff;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(58,76,225,.32);
}

/* ---------- List-page panel + filter row ---------- */
.panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
}
.panel-head{
    padding:14px 16px 2px;
}
.panel-head h5{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:12.5px;
    color:var(--text);
    margin:0 0 1px;
}
.panel-head p{
    font-size:11.5px;
    color:var(--text-muted);
    margin:0;
}
.filter-row{
    padding:12px 16px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.filter-row .form-control,
.filter-row .form-select{
    border:1px solid var(--border);
    border-radius:9px;
    font-size:12.5px;
    padding:7px 12px;
    color:var(--text);
    background:var(--bg);
}
.filter-row .form-control::placeholder{color:var(--text-muted);}
.filter-row .form-control:focus,
.filter-row .form-select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-light);
    background:var(--surface);
}
.filter-row .search-input{flex:1 1 220px; min-width:180px;}
.filter-row .form-select{flex:0 0 140px;}
.btn-search{
    width:34px; height:34px;
    border-radius:9px;
    border:1px solid var(--primary);
    background:var(--primary);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:13px;
    flex-shrink:0;
}
.btn-search:hover{background:#2E3ECB; border-color:#2E3ECB; color:#fff;}

/* ---------- Modern data table (list pages) ---------- */
.table-modern{margin:0;}
.table-modern thead th{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text-muted);
    font-weight:700;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    padding:9px 16px;
    white-space:nowrap;
}
.table-modern tbody td{
    padding:9px 16px;
    font-size:12.5px;
    color:var(--text);
    border-bottom:1px solid var(--border);
    vertical-align:middle;
    white-space:nowrap;
}
.table-modern tbody tr:last-child td{border-bottom:none;}
.table-modern tbody tr{transition:background .12s;}
.table-modern tbody tr:hover{background:var(--primary-light);}
.table-modern tbody tr td:first-child{position:relative;}
.table-modern tbody tr:hover td:first-child{
    box-shadow:inset 3px 0 0 var(--primary);
}

.student-cell{display:flex; align-items:center; gap:8px;}
.student-avatar{
    width:27px; height:27px;
    border-radius:50%;
    background:var(--primary-light);
    color:var(--primary);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:11px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.cell-admno{font-weight:600; color:var(--primary);}
.cell-name{font-weight:600; color:var(--text);}
.cell-muted{color:var(--text-muted);}
.cell-sno{color:var(--text-muted); font-size:11.5px;}
.cell-amount{font-weight:600; color:var(--text);}
.cell-payable{font-weight:700; color:var(--primary);}

/* ---------- Inline collect/action button (e.g. Fee Management "Collect") ---------- */
.action-btn-collect{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    font-weight:600;
    font-size:11.5px;
    padding:6px 12px;
    border-radius:8px;
    transition:background .15s, color .15s, border-color .15s;
    cursor:pointer;
}
.action-btn-collect:hover{
    background:var(--primary-light);
    color:var(--primary);
    border-color:var(--primary-light);
}

/* ---------- Row actions ---------- */
.row-actions{display:flex; gap:6px;}
.action-btn{
    width:28px; height:28px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-muted);
    display:flex; align-items:center; justify-content:center;
    font-size:12px;
    transition:background .15s, color .15s, border-color .15s;
}
.action-btn:hover{background:var(--primary-light); color:var(--primary); border-color:var(--primary-light);}
.action-btn.danger:hover{background:var(--rose-light); color:var(--rose); border-color:var(--rose-light);}

/* ---------- Empty state ---------- */
.empty-state{text-align:center; padding:38px 20px; color:var(--text-muted);}
.empty-state i{font-size:28px; display:block; margin-bottom:8px; opacity:.5;}
.empty-state p{margin:0; font-size:12.5px;}

/* ---------- Pagination wrap ---------- */
.pagination-wrap{padding:10px 16px; border-top:1px solid var(--border);}
.pagination-wrap .pagination{margin:0;}
.pagination-wrap .page-link{
    border:1px solid var(--border);
    color:var(--text);
    font-size:12px;
    border-radius:7px;
    margin:0 2px;
}
.pagination-wrap .page-item.active .page-link{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

/* ---------- Modal (site-wide restyle to match theme) ---------- */
.modal-content{border-radius:12px; border:1px solid var(--border);}
.modal-header{border-bottom:1px solid var(--border); padding:14px 18px;}
.modal-header .modal-title{font-family:'Inter',sans-serif; font-weight:700; font-size:13px; color:var(--text);}
.modal-body{padding:16px 18px;}
.modal-footer{border-top:1px solid var(--border); padding:12px 18px;}
.modal .form-label{font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:4px;}
.modal .form-control, .modal .form-select{
    border:1px solid var(--border);
    border-radius:9px;
    font-size:12.5px;
    padding:7px 12px;
    color:var(--text);
    background:var(--bg);
}
.modal .form-control:focus, .modal .form-select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-light);
    background:var(--surface);
}
.modal .btn-primary, .modal .btn-success{
    background:var(--primary);
    border-color:var(--primary);
    font-weight:600;
    font-size:12.5px;
    border-radius:9px;
}
.modal .btn-primary:hover, .modal .btn-success:hover{
    background:#2E3ECB;
    border-color:#2E3ECB;
}

/* ==============================================================
   PAGE HEAD (richer banner variant — icon, back button, decorative art)
   Use .banner for simple list-page headers; use .page-head when a
   back button and/or decorative side art is needed (detail pages,
   forms, wizards).
   ============================================================== */
.page-head{
    position:relative;
    display:flex; align-items:center; gap:14px;
    padding:15px 20px;
    margin-bottom:var(--s4);
    border-radius:var(--r-card);
    background:linear-gradient(104deg, var(--primary-light) 0%, #F7FDFB 38%, var(--surface) 72%);
    box-shadow:var(--e1);
    overflow:hidden;
}
.page-head-badge{
    position:relative; z-index:2;
    width:44px; height:44px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:13px;
    font-size:1.15rem;
    color:#fff;
    background:linear-gradient(160deg, var(--primary-hi) 0%, var(--primary) 62%, var(--primary-dark) 100%);
    box-shadow:0 1px 2px rgba(27,30,51,.16), 0 5px 12px -4px rgba(58,76,225,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.page-head-copy{ position:relative; z-index:2; min-width:0; flex:1 1 auto; }
.page-head .page-title{ margin:0 0 2px; font-size:1.05rem; font-weight:700; line-height:1.2; letter-spacing:-.032em; color:var(--text); font-family:'Inter',sans-serif; }
.page-head .page-sub{ margin:0; font-size:.825rem; letter-spacing:-.008em; color:var(--text-muted); }
.page-head-actions{ position:relative; z-index:2; display:flex; gap:8px; flex-shrink:0; }

.btn-back{
    position:relative; z-index:2;
    display:inline-flex; align-items:center; gap:6px;
    flex-shrink:0; height:38px; padding:0 16px;
    font-size:.845rem; font-weight:500;
    color:var(--text-2);
    border:1px solid var(--border);
    border-radius:var(--r-ctrl);
    background:var(--surface);
    text-decoration:none;
    transition:all var(--dur) var(--ease);
    white-space:nowrap;
}
.btn-back:hover{ color:var(--primary-dark); border-color:var(--primary-light); background:var(--primary-light); text-decoration:none; }

.btn-edit{
    position:relative; z-index:2;
    display:inline-flex; align-items:center; gap:7px;
    height:36px; padding:0 15px;
    border:0; border-radius:var(--r-ctrl);
    font-size:.84rem; font-weight:500;
    color:#fff; text-decoration:none;
    background:linear-gradient(160deg, var(--primary-hi) 0%, var(--primary) 62%, var(--primary-dark) 100%);
    box-shadow:0 1px 2px rgba(27,30,51,.16), 0 5px 12px -5px rgba(58,76,225,.55), inset 0 1px 0 rgba(255,255,255,.24);
    transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-edit:hover{ color:#fff; transform:translateY(-1px); text-decoration:none; }

.page-head-art{
    position:absolute; top:0; bottom:0; right:0;
    width:200px;
    pointer-events:none; user-select:none; z-index:0;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
}
.page-head-art svg{ width:100%; height:100%; display:block; }
@media (max-width:900px){ .page-head-art{ display:none; } }
@media (max-width:640px){
    .page-head{ flex-direction:column; align-items:stretch; gap:var(--s3); }
    .btn-back{ justify-content:center; }
}

/* ==============================================================
   FILTER CARD (standalone filter bar above a table/grid —
   distinct from the inline .filter-row that lives inside a .panel)
   ============================================================== */
.filter-card{
    border:1px solid var(--border);
    border-radius:var(--r-card);
    background:var(--surface);
    padding:16px 20px;
    margin-bottom:var(--s4);
}
.filter-card label{
    font-size:.76rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.5px;
    color:var(--text-muted);
    margin-bottom:4px;
}
.filter-form{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.filter-input{
    height:34px; padding:0 12px;
    border:1px solid var(--border);
    border-radius:var(--r-ctrl);
    background:var(--surface);
    font-size:.82rem; font-weight:500;
    color:var(--text-2);
    min-width:190px;
    transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.filter-input::placeholder{ color:var(--text-faint); font-weight:400; }
.filter-input:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.filter-select{
    appearance:none; -webkit-appearance:none;
    height:34px; padding:0 32px 0 12px;
    border:1px solid var(--border);
    border-radius:var(--r-ctrl);
    background:var(--surface);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23767C93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 11px center;
    font-size:.82rem; font-weight:500;
    color:var(--text-2);
    cursor:pointer;
    transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.filter-select:hover{ border-color:var(--primary-light); background-color:var(--primary-light); }
.filter-select:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.filter-submit, .filter-clear{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px;
    border-radius:var(--r-ctrl);
    font-size:.85rem;
    color:var(--text-muted);
    border:1px solid var(--border);
    background:var(--surface);
    cursor:pointer;
    text-decoration:none;
    transition:all var(--dur) var(--ease);
}
.filter-submit:hover{ color:var(--primary-dark); border-color:var(--primary-light); background:var(--primary-light); }
.filter-clear:hover{ color:var(--rose); border-color:var(--danger-line); background:var(--rose-light); }
.panel-actions{ display:flex; align-items:center; gap:8px; }
@media (max-width:640px){
    .filter-form{ justify-content:space-between; }
    .filter-select, .filter-input{ flex:1 1 auto; }
}

/* ==============================================================
   PANEL — extra sub-parts (body / foot) to complement .panel + .panel-head
   ============================================================== */
.panel-body{ padding:22px 24px; }
.panel-foot{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:16px 24px;
    box-shadow:inset 0 1px 0 var(--line-soft);
    font-variant-numeric:tabular-nums;
}
.panel-foot .pagination{ margin:0; gap:4px; }
.panel-foot .page-link{
    min-width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    padding:0 9px;
    border:1px solid var(--border);
    border-radius:8px !important;
    font-size:.8rem; font-weight:500;
    color:var(--text-2);
    background:var(--surface);
}
.panel-foot .page-link:hover{ background:var(--primary-light); border-color:var(--primary-light); color:var(--primary-dark); }
.panel-foot .page-item.active .page-link{
    color:#fff; border-color:transparent;
    background:linear-gradient(160deg, var(--primary-hi) 0%, var(--primary) 70%);
}
@media (max-width:640px){
    .panel-body, .panel-foot{ padding-left:16px; padding-right:16px; }
    .panel-foot{ flex-direction:column-reverse; justify-content:center; }
}

/* ==============================================================
   GRID TABLE (richer table variant — avatars, tabular-num cells,
   labeled action buttons. Use .table-modern for simple lists,
   .grid-table when rows need an avatar/name cell or labeled actions)
   ============================================================== */
.table-scroll{ overflow-x:auto; }
.grid-table{ width:100%; margin:0; border-collapse:separate; border-spacing:0; }
.grid-table thead th{
    padding:9px 15px;
    background:var(--sunk);
    font-size:.655rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.09em;
    color:var(--text-faint);
    text-align:left; white-space:nowrap;
    box-shadow:inset 0 1px 0 var(--line-soft), inset 0 -1px 0 var(--line-soft);
}
.grid-table thead th.col-actions{ text-align:right; }
.grid-table tbody td{
    padding:9px 15px;
    font-size:.855rem;
    color:var(--text-2);
    vertical-align:middle;
    box-shadow:inset 0 -1px 0 rgba(27,30,51,.04);
}
.grid-table tbody tr:last-child td{ box-shadow:none; }
.grid-table tbody tr{ transition:background 130ms var(--ease); }
.grid-table tbody tr:hover{ background:var(--sunk); }
.grid-table tbody td:first-child{ position:relative; }
.grid-table tbody td:first-child::before{
    content:""; position:absolute; left:0; top:6px; bottom:6px;
    width:2px; border-radius:0 2px 2px 0;
    background:var(--primary);
    opacity:0; transition:opacity 130ms var(--ease);
}
.grid-table tbody tr:hover td:first-child::before{ opacity:1; }
.grid-table tbody td:last-child{ text-align:right; }
.sno-cell{ color:var(--text-muted); font-variant-numeric:tabular-nums; }
.name-cell{ display:flex; align-items:center; gap:11px; min-width:0; }
.name-avatar{
    width:32px; height:32px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    font-size:.76rem; font-weight:600;
    color:var(--primary-dark);
    background:var(--primary-light);
}
.name-text{ font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grid-table a.name-text{ text-decoration:none; color:var(--text); }
.grid-table a.name-text:hover{ color:var(--primary); text-decoration:underline; }
.muted-cell{ color:var(--text-muted); }
.date-cell{ font-variant-numeric:tabular-nums; white-space:nowrap; }

.actions{ display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; white-space:nowrap; }
.actions form{ display:inline-flex; margin:0; }
.act{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px;
    border-radius:8px;
    font-size:.82rem;
    color:var(--text-muted);
    text-decoration:none;
    background:var(--surface);
    border:1px solid var(--border);
    cursor:pointer;
    transition:all var(--dur) var(--ease);
}
.act:hover{ color:var(--primary-dark); border-color:var(--primary-light); background:var(--primary-light); }
.act-danger:hover{ color:var(--rose); border-color:var(--danger-line); background:var(--rose-light); }

/* Labeled action button (icon + text) — e.g. "Mark Attendance" */
.act-label{
    display:inline-flex; align-items:center; gap:6px;
    height:32px; padding:0 14px;
    border-radius:8px;
    font-size:.8rem; font-weight:600;
    white-space:nowrap;
    text-decoration:none;
    cursor:pointer;
    transition:all var(--dur) var(--ease);
}
.act-label-primary{
    color:#fff; border:none;
    background:linear-gradient(160deg, var(--primary-hi) 0%, var(--primary) 62%, var(--primary-dark) 100%);
    box-shadow:0 1px 2px rgba(27,30,51,.16), 0 3px 8px -3px rgba(58,76,225,.5);
}
.act-label-primary:hover{ color:#fff; transform:translateY(-1px); }

/* ==============================================================
   ENTITY / PROFILE DETAIL PAGE (student/staff/batch detail views)
   ============================================================== */
.entity-strip{
    display:flex; align-items:center; gap:16px;
    padding:20px 24px;
    background:linear-gradient(104deg, var(--primary-light) 0%, var(--surface) 70%);
    border-bottom:1px solid var(--line-soft);
}
.entity-photo{ width:68px; height:68px; object-fit:cover; border-radius:14px; box-shadow:inset 0 0 0 1px var(--line-soft); }
.entity-photo-placeholder{
    width:68px; height:68px; flex-shrink:0;
    border-radius:14px;
    background:var(--primary-light); color:var(--primary-dark);
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; font-weight:700;
}
.entity-name-heading{ font-size:1.02rem; font-weight:700; color:var(--text); margin:0; font-family:'Inter',sans-serif; }
.entity-meta{ font-size:.82rem; color:var(--text-muted); margin-top:2px; }
.status-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size:.72rem; font-weight:600;
    padding:4px 10px 4px 8px;
    border-radius:999px;
    margin-top:7px;
}
.status-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-active{ background:var(--mint-light); color:var(--mint); }
.badge-inactive{ background:var(--sunk); color:var(--text-muted); }

.profile-body{ padding:22px 24px 24px; }
.info-section{
    background:var(--sunk);
    border-radius:var(--r-card);
    padding:20px 22px;
    margin-bottom:16px;
    box-shadow:inset 0 0 0 1px var(--line-soft);
}
.info-section:last-child{ margin-bottom:0; }
.info-section .section-title{
    display:flex; align-items:center; gap:8px;
    font-size:.9rem; font-weight:600;
    color:var(--text);
    margin-bottom:16px;
    font-family:'Inter',sans-serif;
}
.info-section .section-title i{ color:var(--primary); font-size:.98rem; }
.detail-item{ display:flex; align-items:flex-start; gap:11px; }
.detail-icon{
    width:32px; height:32px; flex-shrink:0; margin-top:1px;
    border-radius:9px;
    background:var(--primary-light); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:.9rem;
}
.detail-label{ font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); }
.detail-value{ font-size:.95rem; font-weight:500; color:var(--text); margin-top:4px; }

.history-timeline{ position:relative; }
.history-item{ display:flex; gap:13px; padding-bottom:16px; position:relative; }
.history-item:last-child{ padding-bottom:0; }
.history-item::before{
    content:""; position:absolute; left:14px; top:30px; bottom:0;
    width:1px; background:var(--line);
}
.history-item:last-child::before{ display:none; }
.history-icon{
    width:29px; height:29px; flex-shrink:0; z-index:1;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem;
}
.action-assigned{ background:var(--mint-light); color:var(--mint); }
.action-changed{ background:var(--amber-light); color:var(--amber); }
.action-removed{ background:var(--rose-light); color:var(--rose); }
.history-content{ flex:1; padding-top:1px; }
.history-text{ font-size:.84rem; color:var(--text-2); line-height:1.5; }
.history-text strong{ font-weight:600; color:var(--text); }
.history-meta{ font-size:.75rem; color:var(--text-faint); margin-top:3px; }
.no-history-text{ font-size:.84rem; color:var(--text-faint); text-align:center; padding:10px 0; }

/* ==============================================================
   FORM CARD / STEP WIZARD (multi-step forms — e.g. bulk import)
   ============================================================== */
.form-card{
    position:relative;
    background:var(--surface);
    border:none;
    border-radius:var(--r-card);
    box-shadow:var(--e1);
    overflow:hidden;
    transition:box-shadow 200ms var(--ease);
}
.form-card:hover{ box-shadow:var(--e2); }
.form-card .card-body{ position:relative; padding:20px !important; }
.step-badge{
    width:26px; height:26px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:.8rem; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.step-block{ display:flex; gap:12px; margin-bottom:26px; }
.step-block:last-of-type{ margin-bottom:0; }
.step-content{ flex:1; min-width:0; }
.section-hint{ font-size:.78rem; color:var(--text-muted); margin-bottom:14px; }
.btn-import{
    position:relative; z-index:2;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:0; border-radius:var(--r-ctrl);
    font-weight:500; font-size:.89rem;
    padding:12px 28px;
    color:#fff;
    background:linear-gradient(160deg, var(--primary-hi) 0%, var(--primary) 62%, var(--primary-dark) 100%);
    box-shadow:0 1px 2px rgba(27,30,51,.16), 0 5px 12px -5px rgba(58,76,225,.55), inset 0 1px 0 rgba(255,255,255,.24);
    transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    text-decoration:none;
}
.btn-import:hover{ color:#fff; transform:translateY(-1px); text-decoration:none; }
.btn-import:disabled{ background:var(--text-faint); box-shadow:none; cursor:not-allowed; transform:none; }
.file-upload-wrap{
    border:1.5px dashed var(--border);
    border-radius:12px;
    padding:30px 20px;
    text-align:center;
    background:var(--sunk);
    transition:all var(--dur) var(--ease);
}
.file-upload-wrap:hover{ border-color:var(--primary-light); background:var(--primary-light); }
.file-upload-wrap i{ font-size:1.8rem; color:var(--primary); margin-bottom:10px; display:block; }
.file-upload-wrap input[type="file"]{ max-width:340px; margin:0 auto; }
.file-hint{ font-size:.78rem; color:var(--text-faint); margin-top:10px; }
.divider-line{ border-top:1px solid var(--line-soft); margin:24px 0; }

/* ==============================================================
   BATCH GRID (card grid with CTA — e.g. Batches module)
   ============================================================== */
.batch-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.batch-card{
    background:var(--surface);
    border-radius:var(--r-card);
    box-shadow:var(--e1);
    padding:20px;
    position:relative;
    overflow:hidden;
    transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.batch-card::before{
    content:""; position:absolute; top:0; left:0; bottom:0; width:3px;
    background:linear-gradient(180deg, var(--primary-hi) 0%, var(--primary) 62%, var(--primary-dark) 100%);
    opacity:0; transition:opacity var(--dur) var(--ease);
}
.batch-card:hover::before{ opacity:1; }
.batch-card:hover{ box-shadow:0 8px 18px -6px rgba(58,76,225,.3); transform:translateY(-2px); }
.batch-card-icon{
    width:42px; height:42px; border-radius:13px; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; margin-bottom:14px;
    background:linear-gradient(160deg, var(--primary-hi) 0%, var(--primary) 62%, var(--primary-dark) 100%);
}
.batch-card-title{ font-size:.86rem; font-weight:700; color:var(--text); margin:0 0 12px; font-family:'Inter',sans-serif; }
.batch-card-row{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-muted); margin-bottom:8px; font-weight:500; }
.batch-card-row i{ color:var(--text-faint); font-size:.9rem; width:16px; flex-shrink:0; }
.batch-card-row strong{ color:var(--text); font-weight:600; }
.batch-card-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; height:38px;
    border:0; border-radius:var(--r-ctrl);
    color:#fff; font-weight:500; font-size:.82rem;
    text-decoration:none; margin-top:14px;
    background:linear-gradient(160deg, var(--primary-hi) 0%, var(--primary) 62%, var(--primary-dark) 100%);
    transition:transform var(--dur) var(--ease);
}
.batch-card-btn:hover{ color:#fff; transform:translateY(-1px); }
@media (max-width:1024px){ .batch-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .batch-grid{ grid-template-columns:1fr; } }

/* ==============================================================
   ATTENDANCE MODULE — filter bar, stat strip, record timeline
   (distinct naming from admin .filter-card so the two don't collide)
   ============================================================== */
.attend-filter-card{
    background:var(--surface);
    border-radius:var(--r-card);
    box-shadow:var(--e1);
    padding:16px 20px;
    margin-bottom:var(--s4);
}
.attend-filter-group{ margin-bottom:10px; }
.attend-filter-label{
    display:block;
    font-size:.765rem; font-weight:500;
    text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-faint);
    margin-bottom:5px;
}
.attend-filter-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:10px; }
.attend-filter-row-3{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:end; }
.attend-filter-input{
    border:1px solid var(--border);
    border-radius:var(--r-ctrl);
    padding:9px 12px;
    font-size:.85rem;
    background:var(--surface);
    color:var(--text);
    width:100%;
    transition:all var(--dur) var(--ease);
}
.attend-filter-input:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.attend-filter-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:38px; padding:0 20px;
    border:0; border-radius:var(--r-ctrl);
    font-size:.85rem; font-weight:500;
    color:#fff; cursor:pointer;
    background:linear-gradient(160deg, var(--primary-hi) 0%, var(--primary) 62%, var(--primary-dark) 100%);
    transition:transform var(--dur) var(--ease);
    white-space:nowrap;
}
.attend-filter-btn:hover{ color:#fff; transform:translateY(-1px); }
.attend-reset-btn{
    display:inline-block;
    border:1px solid var(--border);
    border-radius:var(--r-ctrl);
    padding:8px 16px;
    background:var(--surface);
    color:var(--text-2);
    font-weight:500; font-size:.8rem;
    cursor:pointer; margin-top:12px;
    text-decoration:none;
    transition:all var(--dur) var(--ease);
}
.attend-reset-btn:hover{ color:var(--primary-dark); border-color:var(--primary-light); background:var(--primary-light); }

.attend-cards{
    display:flex; gap:12px;
    padding:14px 20px;
    background:var(--primary-light);
    border-radius:var(--r-card);
    margin-bottom:var(--s4);
    flex-wrap:wrap;
}
.attend-card{
    flex:1; min-width:110px;
    background:var(--surface);
    border-radius:10px;
    padding:12px 14px;
    text-align:center;
    box-shadow:0 1px 2px rgba(27,30,51,.06);
}
.attend-card .num{ font-size:1.3rem; font-weight:700; line-height:1.2; }
.attend-card .label{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-top:3px; }
.attend-card.total .num{ color:var(--primary); }
.attend-card.present .num{ color:var(--mint); }
.attend-card.halfday .num{ color:var(--amber); }
.attend-card.absent .num{ color:var(--rose); }

.attend-section-title{
    font-size:.765rem; font-weight:600;
    margin:0 0 12px 4px;
    color:var(--text-faint);
    text-transform:uppercase; letter-spacing:.05em;
    display:flex; align-items:center; gap:8px;
}
.attend-section-title i{ color:var(--primary); font-size:.85rem; }
.detail-card{ background:var(--surface); border-radius:var(--r-card); box-shadow:var(--e1); overflow:hidden; }
.record-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 20px;
    box-shadow:inset 0 -1px 0 rgba(27,30,51,.04);
}
.record-row:last-child{ box-shadow:none; }
.record-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.record-icon{
    width:36px; height:36px; flex-shrink:0;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:.9rem; color:#fff;
    background:linear-gradient(160deg, var(--primary-hi) 0%, var(--primary) 62%, var(--primary-dark) 100%);
}
.record-date{ font-size:.85rem; font-weight:600; color:var(--text); }
.record-meta{ font-size:.765rem; color:var(--text-muted); margin-top:1px; }

/* Attendance-day status pill (distinct from st-confirmed/pending/cancelled —
   these represent a day's attendance state, incl. half-day) */
.status-present{ background:var(--mint-light); color:var(--mint); }
.status-half_day{ background:#FDF3E2; color:#B4790F; }
.status-absent{ background:var(--rose-light); color:var(--rose); }

@media (max-width:640px){
    .attend-filter-row{ grid-template-columns:1fr; }
    .attend-filter-row-3{ grid-template-columns:1fr; }
    .attend-filter-row-3 .attend-filter-btn{ width:100%; }
    .attend-cards{ padding-left:16px; padding-right:16px; }
    .record-row{ padding-left:16px; padding-right:16px; flex-wrap:wrap; }
}

/* ==============================================================
   MISC UTILITIES
   ============================================================== */
.form-control-color{ border:1px solid var(--border); border-radius:9px; padding:4px; cursor:pointer; }
.form-control-color::-webkit-color-swatch-wrapper{ padding:0; }
.form-control-color::-webkit-color-swatch{ border:none; border-radius:6px; }

/* Generic AJAX-loading state — add/remove .is-loading on any container */
.is-loading{ position:relative; opacity:.45; pointer-events:none; transition:opacity .2s ease; }
.is-loading::before{
    content:"";
    position:absolute; top:50%; left:50%;
    width:34px; height:34px; margin:-17px 0 0 -17px;
    border:4px solid var(--primary-light);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:adminAjaxSpinner .7s linear infinite;
}
@keyframes adminAjaxSpinner{ to{ transform:rotate(360deg); } }

/* ==============================================================
   DESKTOP SIDEBAR COLLAPSED (mini icon rail)
   ============================================================== */
@media (min-width:768px){
  body.sidebar-collapsed .app-sidebar{ width:var(--sidebar-collapsed-width); }
  body.sidebar-collapsed .app-topbar{ left:var(--sidebar-collapsed-width); }
  body.sidebar-collapsed .app-content{ margin-left:var(--sidebar-collapsed-width); }
  body.sidebar-collapsed .brand{ justify-content:center; padding:6px 0 22px; }
  body.sidebar-collapsed .brand-name,
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .link-text,
  body.sidebar-collapsed .sidebar-foot .foot-user{ display:none; }
  body.sidebar-collapsed .logout-btn{ width:36px; height:36px; padding:0; border-radius:9px; margin:0 auto; }
  body.sidebar-collapsed .app-sidebar .nav-link{ justify-content:center; padding:10px 0; margin-bottom:6px; }
  body.sidebar-collapsed .app-sidebar .nav-link i{ font-size:15px; width:auto; }
  body.sidebar-collapsed .sidebar-scroll{ padding:20px 10px 12px; }
  body.sidebar-collapsed .sidebar-foot{ justify-content:center; padding:14px 8px; }
  body.sidebar-collapsed .sidebar-foot .icon-btn{ margin:0 auto; }
}

/* ==============================================================
   MOBILE
   ============================================================== */
@media (max-width:767.98px){
  .app-sidebar{
    left:-100%;
    transition:left .2s ease;
  }
  .app-sidebar.show{ left:0; box-shadow:0 0 24px rgba(0,0,0,.12); }
  .app-topbar, .app-content{ margin-left:0; left:0; }
}

/* ==============================================================
   ADMISSION & STUDENT MANAGEMENT — additions
   (payment pill, inline status dropdown, filter wrap, profile tabs,
   admission-history rows — namespaced to avoid clashing with the
   existing .history-item used on entity-strip/profile pages)
   ============================================================== */

/* Filter row wrapping (index pages with multiple dropdown filters) */
.filter-row-wrap{ flex-wrap: wrap; gap: 10px; }
.filter-row-wrap .form-select,
.filter-row-wrap .search-input{ min-width: 150px; flex: 1 1 160px; }

/* Payment status pill (paid / partial / unpaid) */
.pay-pill{
    display:inline-block; padding:4px 10px; border-radius:999px;
    font-size:11.5px; font-weight:600; margin-left:6px;
}
.pay-pill.pay-paid{ background:var(--mint-light); color:var(--mint); }
.pay-pill.pay-partial{ background:var(--amber-light); color:var(--amber); }
.pay-pill.pay-unpaid{ background:var(--rose-light); color:var(--rose); }

/* Inline admission-status change dropdown (index table) */
.status-inline-form{ display:inline-block; }
.status-pill-select{
    border:none; border-radius:999px; padding:4px 10px; font-size:11.5px; font-weight:600;
    cursor:pointer; appearance:none; -webkit-appearance:none; font-family:'Inter',sans-serif;
}
.status-pill-select.st-confirmed{ background:var(--mint-light); color:var(--mint); }
.status-pill-select.st-pending{ background:var(--amber-light); color:var(--amber); }
.status-pill-select.st-cancelled{ background:var(--rose-light); color:var(--rose); }

/* Student profile tabs (Overview / Contact / History / Academic / Documents) */
.nav-tabs{ border-bottom:1px solid var(--border); }
.nav-tabs .nav-link{
    color: var(--text-muted); font-weight:600; font-size:12.5px;
    border:none; border-bottom:2px solid transparent; padding:9px 14px;
}
.nav-tabs .nav-link.active{
    color: var(--primary); border-bottom-color: var(--primary); background:none;
}
.nav-tabs .nav-link:hover{ color:var(--primary); border-bottom-color:var(--primary-light); }
.nav-tabs .nav-link i{ margin-right:4px; }

/* Admission History timeline (profile page — simple row list, distinct
   from the .history-item/.history-icon combo used in entity-strip) */
.admission-history-row{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.admission-history-row:last-child{ border-bottom:none; }
.admission-history-dot{ width:9px; height:9px; border-radius:50%; background:var(--primary); margin-top:6px; flex-shrink:0; }