/* ============================================================
   Sikhha Aalay Admin — Brand Theme (Navy + Gold)
   Primary: #1a2744  |  Gold Accent: #c9a227
   ============================================================ */
:root{
  --brand-navy:     #1a2744;
  --brand-navy-mid: #243160;
  --brand-navy-dk:  #0f1a30;
  --brand-gold:     #c9a227;
  --brand-gold-lt:  #e6bc45;
  --brand-gold-pale:#fdf8e8;
  --brand-grad:     linear-gradient(135deg,#1a2744 0%,#243160 55%,#1a3a6b 100%);
  --brand-gold-grad:linear-gradient(135deg,#c9a227 0%,#e6bc45 60%,#f5d060 100%);
  --brand-soft:     linear-gradient(135deg,#f0f3fa 0%,#fdf8e8 100%);
  --side: 260px;
}
*{box-sizing:border-box}
body{font-family:'Poppins',system-ui,sans-serif;background:#f4f6fb;margin:0;color:#1a2744}
a{text-decoration:none}

/* ── Sidebar ──────────────────────────────────────────────── */
.adm-side{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--side);
  background:var(--brand-navy-dk);
  color:#cfd2dc;padding:0;overflow-y:auto;transition:.3s;
}
.adm-brand{
  padding:18px 20px;display:flex;align-items:center;gap:.75rem;
  border-bottom:1px solid rgba(201,162,39,.18);
  background:linear-gradient(135deg,rgba(201,162,39,.08),rgba(201,162,39,.03));
}
.adm-brand img{
  height:68px;width:68px;object-fit:contain;
  background:#fff;padding:4px;border-radius:50%;
  border:3px solid var(--brand-gold);
  box-shadow:0 0 20px rgba(201,162,39,.5),0 0 0 5px rgba(201,162,39,.12);
  flex:0 0 68px;transition:.3s;
}
.adm-brand img:hover{box-shadow:0 0 30px rgba(201,162,39,.65),0 0 0 7px rgba(201,162,39,.18);transform:scale(1.05)}
.adm-brand strong{color:#fff;font-size:.95rem;line-height:1.2;font-weight:700}
.adm-brand small{color:var(--brand-gold);font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase}

.adm-role{
  padding:10px 20px;
  background:var(--brand-gold-grad);
  color:var(--brand-navy-dk);
  font-weight:700;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;
}

.adm-nav{padding:10px 0;list-style:none;margin:0}
.adm-nav li a{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem 20px;color:#b0b6cc;font-size:.92rem;
  border-left:3px solid transparent;transition:.2s;
}
.adm-nav li a i{font-size:1.1rem;width:22px;text-align:center}
.adm-nav li a:hover{
  background:rgba(201,162,39,.08);
  color:#fff;border-left-color:var(--brand-gold);
}
.adm-nav li a.active{
  background:rgba(201,162,39,.15);
  color:var(--brand-gold);border-left-color:var(--brand-gold);
  font-weight:600;
}
.adm-nav .group-title{
  padding:14px 20px 6px;color:#5a6080;
  font-size:.7rem;text-transform:uppercase;letter-spacing:2px;
}

/* ── Collapsible Navigation Sub-Menu ── */
.adm-nav details {
  margin: 0;
  padding: 0;
}
.adm-nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 20px;
  color: #b0b6cc;
  font-size: .92rem;
  cursor: pointer;
  list-style: none;
  border-left: 3px solid transparent;
  transition: .2s;
  user-select: none;
}
.adm-nav summary::-webkit-details-marker {
  display: none;
}
.adm-nav summary i.chevron {
  transition: transform 0.25s ease;
  font-size: 0.8rem;
}
.adm-nav details[open] summary i.chevron {
  transform: rotate(90deg);
}
.adm-nav summary:hover {
  background: rgba(201,162,39,.08);
  color: #fff;
}
.adm-nav details[open] summary {
  color: #fff;
  background: rgba(255, 255, 255, 0.02);
}
.adm-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 4px 0 4px 12px;
  background: rgba(0, 0, 0, 0.18);
}
.adm-nav .sub-menu li a {
  padding: .5rem 20px;
  font-size: .85rem;
  border-left: 2px solid transparent;
  display: flex;
}
.adm-nav .sub-menu li a.active {
  background: rgba(201, 162, 39, 0.12) !important;
  color: var(--brand-gold) !important;
  border-left-color: var(--brand-gold) !important;
  font-weight: 600;
}

/* ── Topbar ───────────────────────────────────────────────── */
.adm-main{margin-left:var(--side);min-height:100vh;display:flex;flex-direction:column}
.adm-top{
  background:#fff;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 2px 12px rgba(26,39,68,.08);
  position:sticky;top:0;z-index:10;
  border-bottom:3px solid var(--brand-gold);
}
.adm-top .toggle{background:none;border:0;font-size:1.4rem;color:var(--brand-navy)}
.adm-top h6{margin:0;font-weight:700;color:var(--brand-navy)}
.adm-top .user{display:flex;align-items:center;gap:.7rem}
.adm-top .user .avatar{
  width:38px;height:38px;border-radius:50%;
  background:var(--brand-gold-grad);
  color:var(--brand-navy-dk);
  display:flex;align-items:center;justify-content:center;font-weight:700;
}

.adm-content{padding:26px;flex:1}
.adm-page-title{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:22px;flex-wrap:wrap;gap:1rem;
}
.adm-page-title h3{margin:0;font-weight:700;color:var(--brand-navy)}
.adm-page-title .crumb{color:#888;font-size:.85rem}
.adm-page-title .crumb a{color:var(--brand-gold)}

/* ── KPI cards ────────────────────────────────────────────── */
.kpi{
  background:#fff;border-radius:14px;padding:22px;
  box-shadow:0 4px 18px rgba(0,0,0,.05);
  display:flex;align-items:center;gap:1rem;
  border-left:5px solid var(--brand-navy);
}
.kpi.green {border-left-color:#22c55e}
.kpi.orange{border-left-color:#f59e0b}
.kpi.blue  {border-left-color:#3b82f6}
.kpi.yellow{border-left-color:var(--brand-gold)}

.kpi .ico{
  width:54px;height:54px;border-radius:14px;
  background:var(--brand-grad);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;flex:0 0 54px;
}
.kpi.green  .ico{background:linear-gradient(135deg,#22c55e,#16a34a)}
.kpi.orange .ico{background:linear-gradient(135deg,#f59e0b,#d97706)}
.kpi.blue   .ico{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.kpi.yellow .ico{background:var(--brand-gold-grad);color:var(--brand-navy-dk)}
.kpi h2{margin:0;font-weight:800;font-size:1.7rem;color:var(--brand-navy)}
.kpi p {margin:0;color:#777;font-size:.85rem}

/* ── Cards ────────────────────────────────────────────────── */
.card-x{background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.05);padding:22px;margin-bottom:22px}
.card-x .card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.card-x .card-h h6{margin:0;font-weight:700;color:var(--brand-navy)}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-pri{
  background:var(--brand-grad);color:#fff;border:0;
  padding:.55rem 1.1rem;border-radius:8px;font-weight:600;font-size:.88rem;
}
.btn-pri:hover{filter:brightness(1.12);color:#fff}

.btn-gold{
  background:var(--brand-gold-grad);color:var(--brand-navy-dk);border:0;
  padding:.55rem 1.1rem;border-radius:8px;font-weight:700;font-size:.88rem;
}
.btn-gold:hover{filter:brightness(1.08);color:var(--brand-navy-dk)}

.btn-out{
  background:#fff;color:var(--brand-navy);
  border:1.5px solid var(--brand-navy);
  padding:.5rem 1rem;border-radius:8px;font-weight:600;font-size:.85rem;
}
.btn-out:hover{background:var(--brand-navy);color:#fff}

/* ── Table ────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:12px;overflow:hidden}
.tbl thead{background:var(--brand-grad);color:#fff}
.tbl th,.tbl td{padding:.85rem 1rem;text-align:left;font-size:.9rem;border-bottom:1px solid #eef0f5}
.tbl tbody tr:hover{background:#f5f7ff}

/* ── Badges ───────────────────────────────────────────────── */
.badge-x{padding:.25rem .65rem;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.b-green {background:#dcfce7;color:#166534}
.b-yellow{background:#fef9c3;color:#854d0e}
.b-red   {background:#fee2e2;color:#991b1b}
.b-blue  {background:#dbeafe;color:#1e40af}
.b-gold  {background:#fdf3c8;color:#7a5200}
.b-navy  {background:#e8ecf5;color:#1a2744}

/* ── Mobile ───────────────────────────────────────────────── */
@media(max-width:992px){
  .adm-side{transform:translateX(-100%)}
  .adm-side.open{transform:translateX(0)}
  .adm-main{margin-left:0}
  .adm-top .toggle{display:inline-block}
}
@media(min-width:993px){.adm-top .toggle{display:none}}

/* ── Login page ───────────────────────────────────────────── */
.login-wrap{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-grad);
  padding:20px;
  position:relative;overflow:hidden;
}
.login-wrap::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(201,162,39,.18) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 20%,rgba(201,162,39,.12) 0%,transparent 50%);
  pointer-events: none;
}
.login-card{
  position:relative;
  z-index:10;
  background:rgba(255, 255, 255, 0.03) !important;
  backdrop-filter:blur(20px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(125%) !important;
  border:1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius:24px !important;
  box-shadow:0 30px 60px rgba(0, 0, 0, 0.45) !important;
  width:100%;
  max-width:440px;
  padding:48px 38px !important;
  text-align:center;
}
.login-card::after {
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--brand-gold), transparent);
}
.login-card img{
  display: block;
  margin: 0 auto 1.2rem;
  height:80px;width:80px;object-fit:contain;
  border-radius:50% !important;
  border:3px solid var(--brand-gold) !important;
  padding:5px;
  background:#fff !important;
  box-shadow:0 0 25px rgba(201, 162, 39, 0.45) !important;
  transition:transform 0.4s ease;
}
.login-card img:hover {
  transform:scale(1.08) rotate(5deg);
}
.login-card h4{font-weight:800;color:#fff !important;margin-bottom:0.35rem}
.login-card p.text-muted{color:rgba(255, 255, 255, 0.55) !important}
.login-card .role-tag{
  display:inline-block;
  background:var(--brand-gold-grad) !important;
  color:var(--brand-navy-dk) !important;
  padding:0.35rem 1.1rem !important;
  border-radius:20px !important;
  font-size:0.72rem !important;
  font-weight:800 !important;
  letter-spacing:1.8px !important;
  margin-bottom:1.2rem !important;
  box-shadow:0 4px 15px rgba(201, 162, 39, 0.3) !important;
}
.login-card .form-control{
  background:rgba(255, 255, 255, 0.05) !important;
  border:1px solid rgba(255, 255, 255, 0.12) !important;
  color:#fff !important;
  padding:0.75rem 1rem !important;
  border-radius:12px !important;
  font-size:0.9rem !important;
  transition:all 0.25s ease !important;
}
.login-card .form-control::placeholder{
  color:rgba(255, 255, 255, 0.35) !important;
}
.login-card .form-control:focus{
  background:rgba(255, 255, 255, 0.08) !important;
  border-color:var(--brand-gold) !important;
  box-shadow:0 0 15px rgba(201, 162, 39, 0.25) !important;
  outline:none !important;
}
.login-card label.form-label{
  color:rgba(255, 255, 255, 0.75) !important;
}
.login-card .form-check-label{
  color:rgba(255, 255, 255, 0.65) !important;
}
.login-card a{
  color:var(--brand-gold-lt) !important;
  transition:color 0.2s ease;
}
.login-card a:hover{
  color:#fff !important;
}
.login-card .btn-pri{
  background:var(--brand-gold-grad) !important;
  color:var(--brand-navy-dk) !important;
  font-weight:700 !important;
  font-size:0.92rem !important;
  padding:0.75rem 1.5rem !important;
  border-radius:30px !important;
  border:none !important;
  box-shadow:0 8px 25px rgba(201, 162, 39, 0.35) !important;
  transition:all 0.3s ease !important;
}
.login-card .btn-pri:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 12px 30px rgba(201, 162, 39, 0.5) !important;
  filter:brightness(1.05) !important;
}

/* ── Admin Hub cards ──────────────────────────────────────── */
.hub-card{
  background:#fff;border-radius:18px;padding:36px 24px;text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.08);transition:.25s;cursor:pointer;
  text-decoration:none;color:inherit;display:block;height:100%;
  border-top:5px solid transparent;
}
.hub-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(201,162,39,.25);
  border-top-color:var(--brand-gold);color:inherit;
}
.hub-card .ico-big{
  width:80px;height:80px;border-radius:50%;margin:0 auto 1rem;
  background:var(--brand-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:2.2rem;
  transition:.25s;
}
.hub-card:hover .ico-big{background:var(--brand-gold-grad);color:var(--brand-navy-dk)}
.hub-card h5{font-weight:700;color:var(--brand-navy);margin-bottom:.4rem}
.hub-card p{color:#666;font-size:.88rem;margin:0}

/* ── Custom Premium Modals ─────────────────────────────────── */
.modal-backdrop.show {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-color: rgba(15, 26, 48, 0.45) !important;
}
.modal-content {
  border: 1px solid rgba(201, 162, 39, 0.15);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15, 26, 48, 0.22);
  background: #fff;
  overflow: hidden;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalFadeIn {
  from {
    transform: translateY(-12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.modal-header {
  background: var(--brand-grad);
  border-bottom: 3px solid var(--brand-gold);
  color: #fff;
  padding: 18px 28px;
}
.modal-header .modal-title {
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.modal-header .modal-title i {
  color: var(--brand-gold) !important;
  font-size: 1.3rem;
}
.modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: 0.8;
  transition: all 0.2s ease;
  padding: 10px;
}
.modal-header .btn-close:hover {
  opacity: 1;
  transform: scale(1.15);
}
.modal-body {
  padding: 28px 30px;
  background: #fbfcfe;
}
.modal-body .form-label {
  font-weight: 600;
  color: var(--brand-navy-mid);
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.modal-body .form-control,
.modal-body .form-select {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 0.9rem;
  color: var(--brand-navy-dk);
  background-color: #ffffff;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}
.modal-body .form-control::placeholder {
  color: #98a2b3;
}
.modal-body .form-control:focus,
.modal-body .form-select:focus {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18);
  background-color: #ffffff;
  outline: none;
}
.modal-body textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* Premium Modal Button styles */
.modal-body .btn-primary,
.modal-footer .btn-primary {
  background: var(--brand-gold-grad) !important;
  color: var(--brand-navy-dk) !important;
  border: none !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(201, 162, 39, 0.25) !important;
  transition: all 0.25s ease !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.3px;
}
.modal-body .btn-primary:hover,
.modal-footer .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.45) !important;
  filter: brightness(1.05) !important;
}
.modal-body .btn-primary:active,
.modal-footer .btn-primary:active {
  transform: translateY(0) !important;
}
.modal-body .btn-secondary,
.modal-footer .btn-secondary {
  background: #ffffff !important;
  color: #344054 !important;
  border: 1px solid #d0d5dd !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  font-size: 0.88rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.modal-body .btn-secondary:hover,
.modal-footer .btn-secondary:hover {
  background: #f9fafb !important;
  color: #1d2939 !important;
  border-color: #cbd5e1 !important;
}