/* ===========================

   Admin UI - Clean Version

   =========================== */



/* CSS Variables */

:root {

  --c-bg-1: #2c3e50;

  --c-bg-2: #34495e;

  --c-surface: #94aae6;

  --c-surface-muted: #f8f9fa;

  --c-border: #dee2e6;



  --c-text: #2c3e50;

  --c-text-muted: #7f8c8d;

  --c-text-subtle: #bdc3c7;



  --c-primary: #3498db;

  --c-primary-700: #2980b9;

  --c-primary-900: #005c8a;



  --c-danger: #e74c3c;

  --c-danger-700: #c0392b;

  --c-warn: #f39c12;

  --c-warn-700: #e67e22;



  --radius-sm: 4px;

  --radius-md: 8px;

  --radius-lg: 12px;



  --shadow-md: 0 8px 25px rgba(0,0,0,0.15);

  --shadow-lg: 0 12px 35px rgba(0,0,0,0.2);



  --focus-ring: 0 0 0 3px rgba(52,152,219,0.35);

}



/* Base Styles */

a, button {

  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

}



a:focus-visible, button:focus-visible {

  outline: none;

  box-shadow: var(--focus-ring);

  border-radius: var(--radius-sm);

}



/* Navigation */

.admin-nav {

  padding: 8px;

  margin: 10px 0;

  border-radius: var(--radius-sm);

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.admin-link {

  text-decoration: none;

  margin: 0 10px 0 0;

  padding: 6px 12px;

  border-radius: 3px;

  font-size: 0.9em;

  display: inline-block;

  color: #fff;

  background-color: var(--c-bg-2);

}



.admin-link:hover,

.admin-link:focus-visible {

  background: var(--c-primary);

  color: #fff;

  transform: translateY(-2px);

}



/* Admin Layout */

.admin-content {

  padding: 20px;

}



.admin-panel {

  padding: 30px;

  max-width: 1400px;

  margin: 0 auto;

  background: linear-gradient(135deg, var(--c-bg-1) 0%, var(--c-bg-2) 100%);

  min-height: calc(100vh - 200px);

}



.admin-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

}



.admin-header h1 {

  color: #fff;

  font-size: 2.5em;

  margin-bottom: 10px;

}



.admin-subtitle {

  color: var(--c-text-subtle);

  font-size: 1.1em;

  margin: 0;

}



/* Buttons */

.admin-btn {

  padding: 8px 16px;

  border: none;

  border-radius: var(--radius-sm);

  cursor: pointer;

  text-decoration: none;

  display: inline-block;

  font-size: 1em;

  transition: background-color 0.2s ease, transform 0.2s ease;

}



.admin-btn.primary { 

  background: #007bff; 

  color: white; 

}



.admin-btn.secondary { 

  background: #6c757d; 

  color: white; 

}



.admin-btn.danger { 

  background: #dc3545; 

  color: white; 

}



.admin-btn.small { 

  padding: 4px 8px; 

  font-size: 0.875rem; 

}



.admin-btn:hover,

.admin-btn:focus-visible {

  transform: translateY(-1px);

  filter: brightness(110%);

}



/* Table Containers */

.users-table-container,

.roles-table-container {

  background: #ffffff;

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-md);

  margin-bottom: 20px;

}



/* Tables */

.admin-table,

.users-table {

  width: 100%;

  border-collapse: collapse;

  margin: 0;

}



.admin-table th,

.users-table th {

  background: var(--c-bg-2);

  color: #f5f2f2;

  padding: 12px;

  text-align: left;

  font-weight: 600;

  border-bottom: 2px solid var(--c-border);

}



.admin-table td,

.users-table td {

  padding: 12px;

  background: #adadad;

  color: #222020;

  border-bottom: 1px solid var(--c-border);

  vertical-align: middle;

  height: 60px;

  box-sizing: border-box;

}



.admin-table tbody tr:hover,

.users-table tbody tr:hover {

  background-color: var(--c-surface-muted);

}



/* User Avatars */

.user-avatar {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  margin-right: 8px;

  vertical-align: middle;

}



.table-avatar {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  border: 2px solid var(--c-primary);

}



.table-avatar-placeholder {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: var(--c-primary);

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

  margin: 0 auto;

}



/* Role Badges */

.user-roles {

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  align-items: center;

  min-height: 32px;

}



.role-badge {

  display: inline-flex;

  align-items: center;

  padding: 4px 8px;

  border-radius: var(--radius-lg);

  font-size: 0.875rem;

  font-weight: 500;

  color: white;

  background: #6c757d;

  gap: 4px;

  margin: 2px 0;

  white-space: nowrap;

}



.role-badge.admin-role {

  background: linear-gradient(135deg, var(--c-danger), var(--c-danger-700));

}



.role-badge.user-role {

  background: linear-gradient(135deg, #28a745, #1e7e34);

}



.role-badge.moderator-role {

  background: linear-gradient(135deg, var(--c-warn), var(--c-warn-700));

}



.remove-role {

  background: none;

  border: none;

  color: inherit;

  cursor: pointer;

  font-size: 14px;

  font-weight: bold;

  padding: 0;

  margin-left: 4px;

  opacity: 0.7;

  transition: opacity 0.2s ease, transform 0.2s ease;

}



.remove-role:hover,

.remove-role:focus-visible {

  opacity: 1;

  transform: scale(1.1);

}



/* Form Elements */

.role-select,

.role-select-small {

  padding: 6px 10px;

  border: 1px solid var(--c-border);

  border-radius: var(--radius-sm);

  background: white;

  cursor: pointer;

  font-size: 0.9em;

  width: 100%;

}



.role-select:focus,

.role-select-small:focus {

  outline: none;

  border-color: var(--c-primary);

  box-shadow: var(--focus-ring);

}



/* Modals */

.admin-modal {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.5);

  justify-content: center;

  align-items: center;

  z-index: 1000;

}



.modal-content {

  background: white;

  padding: 20px;

  border-radius: var(--radius-md);

  width: 90%;

  max-width: 500px;

  box-shadow: var(--shadow-lg);

}



.modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

}



.modal-header h2 {

  margin: 0;

  color: var(--c-text);

}



.close-btn {

  font-size: 24px;

  cursor: pointer;

  color: var(--c-text-muted);

  transition: color 0.2s ease;

}



.close-btn:hover {

  color: var(--c-text);

}



.form-group {

  margin-bottom: 15px;

}



.form-group label {

  display: block;

  margin-bottom: 5px;

  font-weight: 600;

  color: var(--c-text);

}



.form-group input, 

.form-group textarea {

  width: 100%;

  padding: 8px;

  border: 1px solid var(--c-border);

  border-radius: var(--radius-sm);

  font-size: 1em;

  box-sizing: border-box;

}



.form-group input:focus, 

.form-group textarea:focus {

  outline: none;

  border-color: var(--c-primary);

  box-shadow: var(--focus-ring);

}



.modal-actions {

  display: flex;

  gap: 10px;

  justify-content: flex-end;

  margin-top: 20px;

}



/* Utility Classes */

.discord-id {

  font-family: 'Times New Roman', Times, serif;

  font-size: 1.1rem;

  color: #f8f7f7;

}



.no-roles-text {

  color: var(--c-text-muted);

  font-style: italic;

}



.admin-actions {

  margin-top: 20px;

  text-align: center;

}



/* Responsive Design */

@media (max-width: 768px) {

  .admin-header {

    flex-direction: column;

    gap: 15px;

    text-align: center;

  }

  

  .admin-header h1 {

    font-size: 2em;

  }

  

  .admin-table th,

  .admin-table td,

  .users-table th,

  .users-table td {

    padding: 8px;

    font-size: 0.9em;

  }

}



/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

  * {

    transition: none !important;

  }

  

  .admin-link:hover,

  .admin-btn:hover {

    transform: none !important;

  }

}



.admin-sections {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 25px;

  margin-top: 30px;

}



.admin-card {

  color: #edeef3;

  border: 1px solid var(--c-border);

  border-radius: var(--radius-lg);

  background:  #0f1b4e;

  padding: 25px;

  text-align: center;

  box-shadow: var(--shadow-md);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.admin-card:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-lg);

}



.admin-card.future {

  opacity: 0.75;

  background:  #0f1b4e;

}



.admin-card h2 {

  color: #fff;

  margin-bottom: 15px;

  font-size: 1.5em;

}



.admin-card p {

  color: var(--c-text-muted);

  margin-bottom: 20px;

  font-size: 1.1em;

}



/* orange links inside admin cards */

.admin-card a,

.admin-card a:visited {

  color: #ff8a00; /* orange */

}



.admin-card a:hover,

.admin-card a:focus-visible {

  color: #ffb251;           /* lighter on hover/focus */

  text-decoration: underline;

}



.admin-btn.disabled {

  background: #959ba6;

  color: #fff;

  cursor: not-allowed;

  opacity: 0.6;

}



.admin-btn.disabled:hover {

  transform: none;

  filter: none;

}



.admin-footer {

  text-align: center;

  margin-top: 40px;

  padding-top: 30px;

  border-top: 2px solid var(--c-border);

}



.admin-footer h3 {

  color: #fff;

  margin-bottom: 10px;

}



.admin-footer p {

  color: var(--c-text-subtle);

}



@media (max-width: 768px) {

  .admin-sections {

    grid-template-columns: 1fr;

    gap: 20px;

  }

  

  .admin-card {

    padding: 20px;

  }

}