/* ===== Admin Login ===== */
.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--dark));
  padding:20px;
}
.login-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:46px 38px;
  width:100%;
  max-width:380px;
  text-align:center;
}
.login-card .badge{
  width:60px;height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  margin:0 auto 18px;
}
.login-card h2{color:var(--primary);font-weight:800;margin-bottom:6px}
.login-card p{color:var(--gray);font-size:.9rem;margin-bottom:26px}
.login-card input{
  width:100%;
  padding:13px 16px;
  border:1.5px solid #e1e8e5;
  border-radius:10px;
  margin-bottom:14px;
  font-family:inherit;
  font-size:.95rem;
}
.login-card input:focus{outline:none;border-color:var(--primary-light)}
.login-error{
  color:#e23b3b;
  font-size:.85rem;
  font-weight:700;
  margin-bottom:10px;
  display:none;
}
.login-error.show{display:block}

/* ===== Admin shell ===== */
.admin-body{background:var(--light)}
.admin-header{
  background:var(--primary);
  color:#fff;
  padding:16px 0;
}
.admin-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.admin-header .logo{color:#fff}
.admin-header .logo span{color:var(--accent)}
.btn-logout{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:9px 20px;
  border-radius:30px;
  font-weight:700;
  font-size:.88rem;
  cursor:pointer;
  transition:.2s;
}
.btn-logout:hover{background:rgba(255,255,255,.22)}
.header-actions{display:flex;gap:10px;flex-wrap:wrap}

.admin-main{padding:36px 0 70px}

.admin-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:34px;
}
.stat-card{
  background:#fff;
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  gap:16px;
}
.stat-card .icon{
  width:50px;height:50px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  color:#fff;
  flex-shrink:0;
}
.stat-card.s1 .icon{background:var(--primary-light)}
.stat-card.s2 .icon{background:var(--accent)}
.stat-card.s3 .icon{background:#2e9e5b}
.stat-card.s4 .icon{background:#c43b3b}
.stat-card .num{font-size:1.5rem;font-weight:800;color:var(--dark)}
.stat-card .label{font-size:.85rem;color:var(--gray)}

.admin-tabs{
  display:flex;
  gap:10px;
  margin-bottom:26px;
  border-bottom:2px solid #e7ede9;
}
.admin-tab{
  padding:12px 24px;
  font-weight:700;
  color:var(--gray);
  cursor:pointer;
  border-bottom:3px solid transparent;
  transition:.2s;
}
.admin-tab.active{color:var(--primary);border-color:var(--accent)}
.tab-panel{display:none}
.tab-panel.active{display:block}

.admin-panel{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:30px;
}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
  flex-wrap:wrap;
  gap:12px;
}
.panel-head h3{color:var(--primary);font-weight:800;font-size:1.2rem}
.filter-row{display:flex;gap:10px;flex-wrap:wrap}
.filter-row select, .filter-row input{
  padding:9px 14px;
  border:1.5px solid #e1e8e5;
  border-radius:8px;
  font-family:inherit;
  font-size:.88rem;
}

.trainer-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:14px;
  margin-bottom:26px;
  align-items:end;
}
.trainer-form-grid .form-group label{
  display:block;font-size:.85rem;font-weight:700;margin-bottom:6px;color:var(--dark);
}
.trainer-form-grid input, .trainer-form-grid select{
  width:100%;
  padding:11px 14px;
  border:1.5px solid #e1e8e5;
  border-radius:8px;
  font-family:inherit;
  font-size:.9rem;
}
.btn-sm{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:11px 22px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:.2s;
}
.btn-sm:hover{background:var(--primary-light)}

.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.data-table th{
  text-align:right;
  padding:13px 14px;
  background:#f3f7f5;
  color:var(--primary);
  font-weight:800;
  white-space:nowrap;
}
.data-table td{
  padding:13px 14px;
  border-bottom:1px solid #eef2f0;
  vertical-align:middle;
}
.data-table tr:hover td{background:#fafcfb}
.empty-row td{text-align:center;color:var(--gray);padding:40px}

.badge-pill{
  padding:5px 14px;
  border-radius:30px;
  font-size:.78rem;
  font-weight:700;
  display:inline-block;
}
.badge-pending{background:#fdf1da;color:#b9790a}
.badge-approved{background:#e1f6e9;color:#1c7a44}
.badge-rejected{background:#fce3e3;color:#c43b3b}
.badge-paid{background:#e1f6e9;color:#1c7a44}
.badge-unpaid{background:#fce3e3;color:#c43b3b}
.payment-toggle, .level-toggle{
  border:none;background:none;cursor:pointer;padding:0;display:inline-flex;
}
.payment-toggle:hover .badge-pill, .level-toggle:hover .badge-pill{filter:brightness(.92)}

.icon-btn{
  width:34px;height:34px;
  border-radius:8px;
  border:1.5px solid #e1e8e5;
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  color:var(--primary);
  transition:.2s;
}
.icon-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.icon-btn.danger:hover{background:#c43b3b;border-color:#c43b3b}
.action-cell{display:flex;gap:8px}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(11,19,16,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
  padding:20px;
}
.modal-overlay.show{display:flex}
.modal-box{
  background:#fff;
  border-radius:var(--radius);
  width:100%;
  max-width:640px;
  max-height:88vh;
  overflow-y:auto;
  padding:32px;
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.modal-head h3{color:var(--primary);font-weight:800}
.modal-close{
  background:#f3f7f5;
  border:none;
  width:34px;height:34px;
  border-radius:50%;
  cursor:pointer;
  font-size:1rem;
}
.detail-row{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid #f0f3f1;
  font-size:.92rem;
  gap:16px;
}
.detail-row .k{color:var(--gray);font-weight:700;flex-shrink:0}
.detail-row .v{text-align:left;font-weight:600}
.assign-box{
  background:#f7faf8;
  border-radius:10px;
  padding:20px;
  margin-top:20px;
}
.assign-box .form-grid{grid-template-columns:1fr 1fr}
.assign-box label{display:block;font-weight:700;font-size:.88rem;margin-bottom:8px}
.assign-box select, .assign-box input{
  width:100%;
  padding:11px 14px;
  border:1.5px solid #e1e8e5;
  border-radius:8px;
  font-family:inherit;
  margin-bottom:14px;
}
.modal-actions{display:flex;gap:12px;margin-top:10px}
.btn-approve{
  flex:1;background:#1c7a44;color:#fff;border:none;padding:13px;border-radius:8px;font-weight:700;cursor:pointer;
}
.btn-reject{
  flex:1;background:#c43b3b;color:#fff;border:none;padding:13px;border-radius:8px;font-weight:700;cursor:pointer;
}
.btn-save{
  flex:1;background:var(--primary);color:#fff;border:none;padding:13px;border-radius:8px;font-weight:700;cursor:pointer;
}

/* ===== Roster (manual group attendance) ===== */
.roster-table{width:100%;border-collapse:collapse;font-size:.9rem}
.roster-table th{
  text-align:right;padding:11px 12px;background:#f3f7f5;color:var(--primary);font-weight:800;
}
.roster-table td{padding:11px 12px;border-bottom:1px solid #eef2f0}
.roster-status-group{display:flex;gap:8px;flex-wrap:wrap}
.roster-pill{position:relative}
.roster-pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
.roster-pill label{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:30px;border:1.5px solid #e1e8e5;
  cursor:pointer;font-weight:700;font-size:.82rem;margin:0;
}
.roster-pill input[value="present"]:checked + label{background:#1c7a44;border-color:#1c7a44;color:#fff}
.roster-pill input[value="absent"]:checked + label{background:#c43b3b;border-color:#c43b3b;color:#fff}
.roster-empty{color:var(--gray);text-align:center;padding:30px}

/* ===== Printable card ===== */
.print-card{
  width:340px;
  border:2px dashed var(--primary);
  border-radius:16px;
  padding:24px;
  text-align:center;
  font-family:'Tajawal',sans-serif;
  margin:30px auto;
}
.print-card .card-logo{font-weight:800;color:#0b3d2e;font-size:1.1rem;margin-bottom:6px}
.print-card .card-logo span{color:#f5a623}
.print-card img{width:200px;height:200px;margin:14px auto}
.print-card h3{margin:10px 0 4px;color:#0b3d2e}
.print-card p{margin:2px 0;color:#444;font-size:.9rem}

/* ===== Trainer form 5-col ===== */
.trainer-form-grid-5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}

/* ===== Trainer financial stats ===== */
.trainer-fin-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:4px;
}
.tfin-card{
  background:#f7faf8;
  border-radius:12px;
  padding:16px;
  text-align:center;
}
.tfin-card.tfin-total{background:#f0f9ff}
.tfin-icon{
  width:42px;height:42px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  margin:0 auto 10px;
}
.tfin-num{font-size:1.2rem;font-weight:800;color:var(--dark)}
.tfin-num small{font-size:.72rem;font-weight:600;color:var(--gray)}
.tfin-label{font-size:.75rem;color:var(--gray);margin-top:4px}

.days-grid{grid-template-columns:repeat(4,1fr)}
.roster-trigger-grid{grid-template-columns:1fr 1fr auto}

@media (max-width:992px){
  .admin-header .container{flex-wrap:wrap;gap:10px}
  .trainer-form-grid-5{grid-template-columns:1fr 1fr 1fr}
  .trainer-fin-stats{grid-template-columns:repeat(2,1fr)}
  .trainer-attend-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:768px){
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .trainer-form-grid, .trainer-form-grid-5, .roster-trigger-grid, .trainer-attend-grid{grid-template-columns:1fr}
  .trainer-form-grid button, .roster-trigger-grid button{width:100%}
  .days-grid{grid-template-columns:repeat(3,1fr)}
  .data-table{display:block;overflow-x:auto;white-space:nowrap}
  .admin-panel{padding:20px}
  .admin-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .admin-tab{padding:12px 16px;white-space:nowrap;flex-shrink:0}
  .modal-box{padding:22px;max-height:92vh}
  .modal-actions{flex-direction:column}
  .filter-row{width:100%}
  .filter-row select, .filter-row input{flex:1 1 140px}
  #checkinQrImg{width:170px;height:170px}
}

@media (max-width:480px){
  .admin-header .logo{font-size:1.05rem}
  .admin-header .logo .badge{width:34px;height:34px;font-size:.9rem}
  .btn-logout{padding:8px 14px;font-size:.8rem}
  .stat-card{padding:16px;gap:12px}
  .stat-card .icon{width:42px;height:42px;font-size:1.1rem}
  .stat-card .num{font-size:1.25rem}
  .days-grid{grid-template-columns:repeat(2,1fr)}
  .login-card{padding:32px 22px}
  .btn-sm{white-space:normal;text-align:center}
  .trainer-fin-stats{grid-template-columns:1fr 1fr}
  .tfin-num{font-size:1rem}
}

/* ===== Image Upload Widget ===== */
.img-upload-wrap{
  border:2px dashed #d1ddd9;
  border-radius:10px;
  background:#fbfcfb;
  transition:.2s;
  overflow:hidden;
}
.img-upload-wrap.drag-over{border-color:var(--primary-light);background:#f0f8f4}
.img-upload-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:22px 16px;
  cursor:pointer;
  color:var(--gray);
  text-align:center;
}
.img-upload-label i{font-size:1.8rem;color:var(--primary-light)}
.img-upload-label span{font-weight:700;color:var(--dark);font-size:.95rem}
.img-upload-label small{font-size:.8rem}
.img-preview{
  position:relative;
  max-height:180px;
  overflow:hidden;
}
.img-preview img{
  width:100%;
  max-height:180px;
  object-fit:cover;
  display:block;
}
.img-remove-btn{
  position:absolute;
  top:8px;left:8px;
  width:30px;height:30px;
  border-radius:50%;
  background:rgba(196,59,59,.9);
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;
  transition:.2s;
}
.img-remove-btn:hover{background:#c43b3b;transform:scale(1.1)}
.img-upload-progress{
  height:4px;
  background:#e0ede8;
}
.img-progress-bar{
  height:4px;
  background:var(--primary-light);
  width:0%;
  transition:width .3s;
}