/* =====================================================
   Eventive – Account Details (Standalone stylesheet)
   This sheet contains ONLY the account details table + forms
   extracted from the former eventive-account.css
   ===================================================== */

:root {
  --primary-color: #0366d6;
  --border-color: #e2e4e8;
  --text-color: #222;
  --card-bg: #fff;
}

/* Container */
#eventive-account-details-container {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  padding: 16px;
}

/* Loader */
#eventive-login-container-details { min-height: 100px; }
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 36px; height: 36px;
  animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Heading */
#eventive-account-details-content h2 {
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  color: var(--primary-color);
}

/* Table */
#account-details-table.styled-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}
#account-details-table thead th {
  text-align: left;
  padding: 12px 14px;
  background: #f8f9fa;
  color: #333;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
}
#account-details-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
#account-details-table tbody tr:last-child td { border-bottom: none; }
#account-details-table tbody tr:hover { background: #fafafa; }

/* Field column */
#account-details-table tbody td:first-child { width: 30%; color: #444; font-weight: 600; }
/* Value column */
#account-details-table tbody td:nth-child(2) { width: 50%; color: #111; }
/* Actions column */
#account-details-table tbody td:last-child { width: 20%; }

/* Buttons */
.edit-row-button,
.submit-row-button,
.cancel-row-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.2;
}
.edit-row-button { background: #f1f5f9; color: #1f2937; border-color: #e5e7eb; }
.edit-row-button:hover { background: #e7edf5; }
.submit-row-button { background: var(--primary-color); color: #fff; }
.submit-row-button:hover { filter: brightness(0.95); }
.cancel-row-button { background: #fff; color: #374151; border-color: #e5e7eb; }
.cancel-row-button:hover { background: #f9fafb; }

/* Inline edit input */
.inline-edit-wrapper { display: flex; gap: 8px; align-items: center; }
.inline-edit-input,
.inline-edit-select,
.inline-edit-checkbox {
  font-size: 14px;
}
.inline-edit-input,
.inline-edit-select {
  width: 100%;
  max-width: 420px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
}
.inline-edit-input:focus,
.inline-edit-select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(3,102,214,.15); }

/* Row state */
tr.saving td { background: #fffbe6; }

/* Small utility */
.badge { display: inline-block; padding: 2px 6px; font-size: 11px; border-radius: 999px; background:#eef2ff; color:#3730a3; }

/* Responsive */
@media (max-width: 720px) {
  #account-details-table thead { display: none; }
  #account-details-table,
  #account-details-table tbody,
  #account-details-table tr,
  #account-details-table td { display: block; width: 100%; }
  #account-details-table tbody tr { border-bottom: 1px solid var(--border-color); }
  #account-details-table tbody td { border: none; padding: 10px 12px; }
  #account-details-table tbody td:first-child { font-weight: 700; margin-top: 6px; }
  #account-details-table tbody td:last-child { margin-bottom: 12px; }
  .inline-edit-wrapper { flex-wrap: wrap; }
}