/* =====================================================
   Eventive – Account Details (Elementor-safe stylesheet)
   Updated to match new markup/classes and JS behaviors.
   Backward compatible with old ID-based selectors.
   ===================================================== */

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

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

/* Loader wrapper */
.eventive-login-container { min-height: 100px; display:flex; justify-content:center; align-items:center; }
#eventive-login-container-details { min-height: 100px; } /* legacy */

/* Spinner */
.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); } }

/* Notices/messages injected by JS */
.eventive-notice {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 12px 16px;
  border-radius: 8px;
}

/* Heading */
.eventive-account-details-content h2,
#eventive-account-details-content h2 { /* legacy */
  margin: 0 0 12px 0;
  font-size: 1.3rem;
  color: var(--primary-color);
}

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

/* Column widths */
.eventive-account-details .styled-table tbody td:first-child,
#account-details-table tbody td:first-child { width: 30%; color: #444; font-weight: 600; }
.eventive-account-details .styled-table tbody td:nth-child(2),
#account-details-table tbody td:nth-child(2) { width: 50%; color: #111; }
.eventive-account-details .styled-table tbody td:last-child,
#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: 6px 10px;
  font-size: 12px;
  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 inputs (match JS class names: .edit-input / .edit-select) */
.inline-edit-wrapper { display: flex; gap: 8px; align-items: center; }
.edit-input,
.edit-select,
.inline-edit-input,
.inline-edit-select,
.inline-edit-checkbox {
  font-size: 14px;
}
.edit-input,
.edit-select,
.inline-edit-input,
.inline-edit-select {
  width: 100%;
  max-width: 420px;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.edit-input:focus,
.edit-select:focus,
.inline-edit-input:focus,
.inline-edit-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(3,102,214,.1);
}

/* Toggle switch (for sms_tickets_enabled) */
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e7eb; transition: .2s; border-radius: 999px; }
.toggle-switch .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; transition: .2s; border-radius: 50%; }
.toggle-switch input:checked + .slider { background-color: var(--primary-color); }
.toggle-switch input:checked + .slider:before { transform: translateX(20px); }

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

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

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