/* admin-styles.css - Styles for admin role management */

.admin-container {
  max-width: 1000px;
  margin: 1.5rem auto;
  padding: 1rem;
}

.admin-header h1 {
  margin: 0 0 0.25rem 0;
  font-size: 1.4rem;
}
.admin-header .muted {
  color: #666;
  margin: 0 0 0.5rem 0;
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 6px 20px rgba(20,20,40,0.05);
  margin-bottom: 1rem;
}

.search-row {
  display:flex;
  gap:0.5rem;
  align-items:center;
}
.search-row input[type="search"]{flex:1;padding:0.5rem;border:1px solid #ddd;border-radius:6px}
.create-admin{display:flex;gap:0.5rem;margin-top:0.6rem}
.create-admin input{flex:1;padding:0.5rem;border:1px solid #ddd;border-radius:6px}

.responsive-table{width:100%;border-collapse:collapse}
.responsive-table thead{background:#f7f7fb}
.responsive-table th, .responsive-table td{padding:0.6rem;border-bottom:1px solid #eee;text-align:left}
.responsive-table tbody tr{transition:transform .2s ease, opacity .2s ease}
.responsive-table tbody tr.fade-in{animation:fadeInUp .28s ease both}

.btn{padding:0.45rem 0.6rem;border-radius:6px;border:1px solid #ccc;background:#fff;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;border:none}
.btn:active{transform:scale(.995)}

.role-badge{display:inline-block;padding:0.2rem 0.45rem;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:600;font-size:.8rem}
.role-badge.user{background:#eef6ee;color:#166534}
.role-badge.hr{background:#fff7ed;color:#92400e}

.toast{position:fixed;right:1rem;bottom:1rem;background:#111;color:#fff;padding:0.6rem 0.9rem;border-radius:6px;opacity:0;transform:translateY(12px);transition:all .18s ease}
.toast.show{opacity:1;transform:none}

/* Animations */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.fade-in-up{animation:fadeInUp .35s ease both}

/* Responsive behavior */
@media (max-width: 720px){
  .admin-container{padding:0.5rem;margin:0.6rem}
  .responsive-table thead{display:none}
  .responsive-table tbody tr{display:block;border:1px solid #f0f0f4;margin-bottom:0.6rem;padding:0.5rem}
  .responsive-table tbody td{display:flex;justify-content:space-between;padding:0.4rem 0;border:none}
  .responsive-table tbody td:before{content:attr(data-label);font-weight:600;color:#333;margin-right:8px}
  .search-row{flex-direction:column}
  .create-admin{flex-direction:column}
}