/* ==== Uposthiti – Pro UI Theme (Hind Siliguri) ==== */

/* Typography */
html, body{
  font-family: "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans Bengali", "Noto Sans",
               sans-serif, "Apple Color Emoji","Segoe UI Emoji";
  font-weight: 400; line-height: 1.55;
}

/* Brand palette */
:root{
  --brand:#0ea5e9; --brand-2:#2563eb; --ink:#0f172a; --muted:#64748b;
  --surface:#ffffff; --bg-1:#f0f9ff; --border:#e2e8f0; --ring:rgba(14,165,233,.35);
  --present:#16a34a; --absent:#dc2626; --late:#d97706;
}

/* Background */
body{ background: linear-gradient(180deg, var(--bg-1) 0%, #f9fafb 35%, #fff 100%); color:var(--ink); }

/* Navbar */
.navbar{
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.85)!important; border-bottom: 1px solid rgba(14,165,233,.12)!important;
}
.navbar-brand{ color:var(--brand)!important; }
.navbar .nav-link{ color:#334155; border-radius:10px; padding:.45rem .75rem; }
.navbar .nav-link:hover{ background: rgba(14,165,233,.08); color:var(--brand-2);}
.navbar .nav-link.active{
  color:#fff!important; background: linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 100%);
  box-shadow: 0 6px 14px rgba(37,99,235,.15);
}

/* Cards */
.card{ border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 30px rgba(2,6,23,.06); }
.card.shadow-sm{ box-shadow:0 10px 30px rgba(2,6,23,.06)!important; }

/* Buttons */
.btn{ border-radius:12px; }
.btn-primary{
  border:none;color:#fff;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  box-shadow:0 8px 18px rgba(37,99,235,.2);
}
.btn-primary:hover{ filter:brightness(1.03); transform:translateY(-1px); }
.btn-success{
  border:none;color:#fff;background:linear-gradient(135deg,#22c55e 0%, #16a34a 100%);
  box-shadow:0 8px 18px rgba(34,197,94,.18);
}
.btn-outline-secondary{ border-color:var(--border); color:#334155; }
.btn-outline-danger{ border-color:#fecaca; color:#dc2626; }

/* Forms */
.form-label{ color:#334155; font-weight:600; }
.form-control,.form-select{
  border:1px solid var(--border); background:#fbfdff; border-radius:12px; padding:.6rem .8rem; font-weight:500;
}
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 .25rem var(--ring); }
input[type=file].form-control{ padding:.45rem .8rem; background:#fff; }

/* Tables */
.table{ --bs-table-striped-bg:#f8fafc; --bs-table-hover-bg:#eef6ff; border-radius:12px; overflow:hidden; }
.table thead{ background: linear-gradient(135deg,#e2f2ff 0%, #eef2ff 100%); }
.table thead th{ color:#334155; text-transform:uppercase; letter-spacing:.04em; font-size:.78rem; border-bottom:none!important; }
.table tbody td{ vertical-align:middle; }
.table tbody tr:hover{ background: var(--bs-table-hover-bg); }

/* KPI */
.kpi-card{ background:linear-gradient(180deg,#fff 0%, #f5fbff 100%); border:1px solid var(--border)!important; border-radius:16px!important; }
.kpi-card .kpi-title{ font-size:.8rem; color:#6b7280; margin-bottom:.25rem; font-weight:600; }
.kpi-card .kpi-value{ font-size:1.7rem; font-weight:800; }

/* Badges & Progress */
.badge-present{ background:var(--present)!important; }
.badge-absent{ background:var(--absent)!important; }
.badge-late{ background:var(--late)!important; }
.progress{ height:12px; border-radius:999px; background:#eef2f7; overflow:hidden; }
.progress-pres .progress-bar{ background:linear-gradient(90deg,#22c55e,#16a34a); }
.progress-abs .progress-bar{ background:linear-gradient(90deg,#f87171,#dc2626); }
.progress-late .progress-bar{ background:linear-gradient(90deg,#fbbf24,#d97706); }

/* Utilities */
.text-success{ color:var(--present)!important; }
.text-danger{ color:var(--absent)!important; }
.text-warning{ color:var(--late)!important; }
.navbar-brand img{ filter: drop-shadow(0 4px 10px rgba(14,165,233,.25)); }

/* Footer (legacy) */
footer .text-center{ color:#64748b; }
footer strong{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* === Avatar utilities === */
.avatar{ display:inline-block; width:84px; height:84px; object-fit:cover; border-radius:18px; border:2px solid #e5e7eb; background:#eef2ff; }
.avatar-56{  width:56px;  height:56px;  border-radius:12px; }  /* NEW: dashboard thumbs */
.avatar-64{  width:64px;  height:64px;  border-radius:14px; }
.avatar-80{  width:80px;  height:80px;  border-radius:16px; }
.avatar-96{  width:96px;  height:96px;  border-radius:18px; }
.avatar-104{ width:104px; height:104px; border-radius:20px; } /* View */
.avatar-112{ width:112px; height:112px; border-radius:20px; }
.avatar-128{ width:128px; height:128px; border-radius:22px; }
/* Reports table avatars */
.avatar-40{ width:40px; height:40px; border-radius:10px; }

.avatar-placeholder{ display:flex; align-items:center; justify-content:center; color:#475569; font-weight:700; }

/* === Recently Added: force uniform 56×56 thumbnails === */
.recent-list{ display:flex; flex-wrap:wrap; gap:12px; }
.recent-list a{ text-decoration:none; }
.recent-list img{ width:56px; height:56px; object-fit:cover; border-radius:12px; border:2px solid #e5e7eb; background:#eef2ff; display:block; }
.recent-list .name{ max-width:72px; text-align:center; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; color:#334155; font-size:.82rem; }

/* === Rankings: mobile-friendly avatars & text === */
.rank-card .avatar-32{
  width:32px; height:32px; border-radius:8px; border:2px solid #e5e7eb;
  object-fit:cover; background:#eef2ff; display:block;
}
.rank-item{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.rank-meta{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.rank-meta .name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.rank-meta .sub{ font-size:.8rem; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }

/* Phones */
@media (max-width:576px){
  .rank-card .avatar-32{ width:24px; height:24px; border-radius:6px; border-width:1.5px; }
  .rank-item{ margin-bottom:.35rem; }
  .rank-meta .name{ font-size:.9rem; max-width:140px; }
  .rank-meta .sub{ font-size:.72rem; max-width:140px; }
}

/* === Std Quality badges (Bangla) === */
.badge-qual{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:999px;
  font-weight:700;
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
  letter-spacing:.01em;
}
.badge-qual.sm{ font-size:.78rem; padding:.25rem .5rem; }

/* খুব ভালো */
.badge-qual.q-exc{
  background:linear-gradient(90deg,#10b981,#22c55e); /* teal → green */
  color:#fff; border-color:rgba(16,185,129,.35);
}
/* ভালো */
.badge-qual.q-good{
  background:linear-gradient(90deg,#60a5fa,#2563eb); /* light blue → indigo */
  color:#fff; border-color:rgba(37,99,235,.35);
}
/* মাঝারি */
.badge-qual.q-mid{
  background:linear-gradient(90deg,#fde68a,#f59e0b); /* amber */
  color:#111827; border-color:rgba(245,158,11,.35);
}
/* উন্নতি প্রয়োজন */
.badge-qual.q-need{
  background:linear-gradient(90deg,#fecaca,#f87171); /* light red */
  color:#7f1d1d; border-color:rgba(220,38,38,.35);
}

/* === Behavior badges (Bangla) === */
.badge-beh{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.30rem .55rem; border-radius:999px; font-weight:700;
  border:1px solid transparent; letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
  line-height:1;
}
.badge-beh.sm{ font-size:.78rem; padding:.20rem .45rem; }
.badge-beh .ico{ width:14px; height:14px; display:inline-block; }

/* খুব ভালো */
.badge-beh.beh-great{
  background:linear-gradient(90deg,#34d399,#10b981);
  color:#052e2b; border-color:rgba(16,185,129,.3);
}
/* ভালো */
.badge-beh.beh-good{
  background:linear-gradient(90deg,#7dd3fc,#38bdf8);
  color:#083344; border-color:rgba(56,189,248,.35);
}
/* মাঝারি */
.badge-beh.beh-mid{
  background:linear-gradient(90deg,#fde68a,#f59e0b);
  color:#111827; border-color:rgba(245,158,11,.35);
}
/* উন্নতি প্রয়োজন */
.badge-beh.beh-need{
  background:linear-gradient(90deg,#fecaca,#f87171);
  color:#7f1d1d; border-color:rgba(220,38,38,.35);
}

/* ============ Global Sticky Footer (screen only) ============ */
:root{
  --af-h: 74px;                 /* desktop/tablet */
  --af-blue:#0ea5e9;            /* base */
  --af-blue-mid:#45c7f2;        /* mid tint */
  --af-white:#ffffff;           /* end */
  --af-text:#0f172a;            /* deep slate (খুব স্পষ্ট) */
  --af-muted:#334155;
  --af-shadow:0 -8px 22px rgba(14,165,233,.18);
}

/* Reserve space so content never hides under footer */
html, body{ min-height:100%; }
body{ padding-bottom: var(--af-h); }

/* Sticky footer */
.app-footer{
  position:fixed !important; left:0; right:0; bottom:0; z-index:9999;
  background: linear-gradient(135deg, var(--af-blue) 0%, var(--af-blue-mid) 42%, var(--af-white) 100%) !important;
  box-shadow: var(--af-shadow);
  border-top: 1px solid rgba(14,165,233,.25);
  color: var(--af-text);
  font-family:'Hind Siliguri', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.app-footer .af-wrap{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:10px 18px; min-height:var(--af-h);
  text-align:center; /* ডেস্কটপে সেন্টার */
}

/* --- Logo --- */
.app-footer .af-logo{
  width:40px; height:40px; border-radius:10px; object-fit:cover;
  border:1px solid rgba(15,23,42,.10); background:#fff0; flex:0 0 40px;
}

/* --- Text lines --- */
.app-footer .af-text{ line-height:1.35; min-width:0 }
.app-footer .af-line{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color: var(--af-muted);
}
.app-footer .af-l1{ font-weight:800; color: var(--af-text); }
.app-footer .af-l2{ color: var(--af-text); }
.app-footer .af-l3{ color: var(--af-muted); }

/* নাম/লিংক/আইকন—স্পষ্ট ডার্ক কালার (footer strong গ্রেডিয়েন্ট ওভাররাইড) */
.app-footer strong,
.app-footer .af-name{
  background:none !important;
  -webkit-background-clip:initial !important;
  color: var(--af-text) !important;
  text-shadow:none !important;
  font-weight:800;
}
.app-footer .af-link{
  color: var(--af-text) !important; text-decoration:underline; text-underline-offset:2px; font-weight:800;
}
.app-footer .af-link:hover{ text-decoration:none }

/* বড় আইকন */
.app-footer .af-ico{
  display:inline-flex; width:20px; height:20px; margin-right:8px;
  color: var(--af-text); vertical-align:middle;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.app-footer .af-ico svg{ width:20px; height:20px; display:block; }

/* | সেপারেটরের চারপাশে স্পেস */
.app-footer .af-sep{ margin: 0 10px; color: var(--af-text) }

/* Desktop: এক লাইনে সেন্টার */
@media (min-width:1024px){
  :root{ --af-h: 68px; }
  .app-footer .af-text{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:nowrap; }
  .app-footer .af-line{ display:inline-flex; }
}

/* Mobile: বাম-এলাইন + তিন লাইনের সাথে সমান লোগো */
@media (max-width:640px){
  :root{ --af-h: 86px; } /* তিন লাইন + প্যাডিং মেলাতে */
  .app-footer .af-wrap{
    align-items:flex-start; justify-content:flex-start;
    padding:10px 12px; gap:10px; text-align:left;   /* ◀️ বামে */
  }
  .app-footer .af-text{ display:block; width:100%; }
  .app-footer .af-line{ white-space:normal; }
  .app-footer .af-logo{ width:58px; height:58px; border-radius:12px; } /* ◀️ তিন লাইনের সমান */
  .app-footer .af-l1{ font-size:1rem; }
  .app-footer .af-l2, .app-footer .af-l3{ font-size:.95rem; }
}

/* Print: global sticky footer hidden */
@media print{
  body{ padding-bottom:0 !important; }
  .app-footer{ display:none !important; }
}
/* === Smart Uposthiti brand === */
.navbar-brand .brand-logo{
  width:28px;height:28px;border-radius:6px;object-fit:cover;
  border:1px solid rgba(14,165,233,.15);
  box-shadow:0 3px 10px rgba(14,165,233,.25);
}
.navbar-brand .brand-text{
  font-weight:800; letter-spacing:.2px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
<script>
  /* ...তোমার আগের JS থাকবে... */

  // === Confetti generator (vanilla, no dependency) ===
  function fireConfetti(side = 'right') {
    const colors = ['#22c55e','#16a34a','#06b6d4','#0ea5e9','#f59e0b','#ef4444','#a855f7','#f43f5e','#84cc16'];
    const count = 48; // কনফেটির সংখ্যা
    const xBase = side === 'right' ? (window.innerWidth - 240) : 40;

    for (let i=0; i<count; i++){
      const p = document.createElement('span');
      p.className = 'confetti-piece';
      p.style.left = (xBase + (Math.random()*200 - 60)) + 'px';
      p.style.background = colors[i % colors.length];
      p.style.animationDelay = (Math.random()*0.25) + 's';
      p.style.transform = `translateY(${-20 - Math.random()*40}px) rotate(${Math.random()*90}deg)`;
      document.body.appendChild(p);
      // cleanup
      setTimeout(()=>{ p.remove(); }, 2400);
    }
  }