/* Styles specific to profilepeeper.html */
html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Consider changing to 'auto' or 'visible' for body if content overflows */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #eee;
}

body {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    background: linear-gradient(135deg, #2b2b2b 0%, #444 50%, #2b2b2b 100%);
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    opacity: 0.8;
    z-index: -1;
}

.main-content-wrapper {
    flex-grow: 1;
    padding-bottom: 90px; /* Space for fixed footer (70px + 20px buffer) */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.image-glow {
  position: fixed;
  left: -3%;
  bottom: 0;
  filter: drop-shadow(0px 0px 12px gray);
  width: 570px;
  max-width: 40%;
  z-index: 0;
  pointer-events: none;
}
.image-glow-flipped {
  position: fixed;
  right: -3%;
  bottom: 0;
  transform: scaleX(-1);
  filter: drop-shadow(0px 0px 12px gray);
  width: 570px;
  max-width: 40%;
  z-index: 0;
  pointer-events: none;
}

/* Changed class name to match new HTML */
.profile-peeper-tool-container {
    max-width: 950px;
    margin: 20px auto;
	margin-top: 1in;
    background-color: #222;
    padding: 10px 40px;
    padding-bottom: 25px;
    border-radius: 12px;
    border: 2px solid black;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.44);
    text-align: center;
    position: relative;
    width: 90%;
    box-sizing: border-box;
}
.script-title {
  font-size: 2.2rem; 
  font-weight: bold; 
  position: relative; 
  margin-top: 0; 
  margin-bottom: 20px;
  color: #00a8ff; 
  -webkit-text-stroke: 1px black;
  text-shadow: 0px 0px 5px #00a8ff, 0px 0px 4px #0077cc;
}
.input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
  justify-content: center;
}
.input-field {
  flex: 0 1 320px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.profile-peeper-tool-container label {
  font-weight: 600; 
  margin-bottom: 6px; 
  color: #007acc; 
  font-size: 0.9rem; 
}

label[for="userId"] { /* Updated for new input ID */
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    width: 100%;
    color: #007acc;
    margin-bottom: 6px;
}
.dropdown-category label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #00a8ff;
    text-align: center;
    font-size: 0.95rem;
}

.profile-peeper-tool-container input[type="text"], 
.profile-peeper-tool-container .stats-dropdown {
  padding: 8px 12px; 
  border-radius: 6px; 
  border: 1.5px solid #007acc; 
  background-color: #121212;
  color: #eee; 
  font-size: 1rem; 
  transition: border-color 0.3s ease; 
  height: 39px;
  box-sizing: border-box;
  width: 100%;
}
.profile-peeper-tool-container input[type="text"]:focus, 
.profile-peeper-tool-container .stats-dropdown:focus {
  outline: none; 
  border-color: #00b0ff; 
  box-shadow: 0 0 8px #00b0ff;
}
.stats-dropdown { width: 100%; }

#statSelectionArea { margin-top: -10px; margin-bottom: 20px; }
.popular-options-toggle { 
  margin-bottom: 15px; 
  text-align: center; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap: 8px;
}
.popular-options-toggle label { 
  margin-bottom: 0;
  color: #ccc; 
  cursor:pointer; 
}
.popular-options-toggle input[type="checkbox"] { 
  accent-color: #00a8ff; 
  width:16px; 
  height:16px; 
  cursor:pointer;
}

.stat-dropdowns-container { display: flex; flex-direction: column; gap: 15px; }
.dropdown-row { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.dropdown-row .dropdown-category { 
  flex: 1 1 calc(33.333% - 10px);
  min-width: 200px;
  max-width: 280px;
}
.dropdown-row.single-dropdown .dropdown-category { 
  flex-basis: 100%; 
  max-width: 300px;
  margin: 0 auto;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #2b2b2b;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: #007acc;
    border-radius: 5px;
    border: 2px solid #2b2b2b;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #00a8ff;
}
::-webkit-scrollbar-corner {
    background: #222;
}
#selectedStatsDisplay {
  margin-top: 20px; padding: 10px; background-color: rgba(0,0,0,0.2); border-radius: 8px;
  min-height: 40px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
}
.selected-stat-tag {
  background-color: #00a8ff; color: #111; padding: 5px 10px; border-radius: 15px;
  font-size: 0.9em; display: flex; align-items: center;
}
.selected-stat-tag .remove-tag {
  margin-left: 8px; color: #fff; background-color: #007acc; border: none; border-radius: 50%;
  width: 18px; height: 18px; font-weight: bold; cursor: pointer; line-height: 16px; text-align: center;
  padding:0;
}
.selected-stat-tag .remove-tag:hover { background-color: #005f99; }

.action-buttons-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.action-btn {
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  min-width: 150px;
  text-align: center;
}
.action-btn.fetch-btn { background-color: #28a745; color: #000; }
.action-btn.fetch-btn:hover { background-color: #218838; }
.clear-btn { background-color: #f39c12; color: #000; }
.clear-btn:hover { background-color: #e08e0b; }
.download-btn { background-color: #00a8ff; color: #222; }
.download-btn:hover { background-color: #0086d1; }

.error-message { color: #ff4d4d; font-size: 0.9rem; font-weight: bold; margin-top: 6px; text-align: left; min-height: 1.2em; }
#statsError { text-align: center; }
.main-input-error-feedback {
  color: #ff4d4d;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

/* Loading Spinner Styles */
.loading-overlay {
  position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);
  display: flex;justify-content: center;align-items: center;z-index: 2000;backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);visibility: hidden;opacity: 0;transition: visibility 0s, opacity 0.3s ease-in-out;
}
.loading-overlay.visible {visibility: visible;opacity: 1;}
.spinner {
  border: 8px solid #333;border-top: 8px solid #00a8ff;border-radius: 50%;
  width: 60px;height: 60px;animation: spin 1s linear infinite;
}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

/* Modal Styles */
.modal-overlay {
  position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);
  display: flex;justify-content: center;align-items: center;z-index: 1500;visibility: hidden;opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;padding: 20px;box-sizing: border-box;
}
.modal-overlay.visible {visibility: visible;opacity: 1;}
.modal-content {
  background-color: #222;border-radius: 12px;box-shadow: 0 0 25px rgba(0, 168, 255, 0.6);
  padding: 30px;width: 90%;max-width: 600px;max-height: 90vh;overflow-y: auto;position: relative;
  transform: translateY(20px);opacity: 0;transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  display: flex; flex-direction: column; margin-top: 70px;
}
.modal-overlay.visible .modal-content {transform: translateY(0);opacity: 1;}
.modal-close-btn {
  position: absolute;top: 15px;right: 15px;background: none;border: none;
  font-size: 1.8rem;color: #00a8ff;cursor: pointer;z-index: 10;
}
.modal-close-btn:hover {color: #00e0ff;}
.modal-title {color: #00a8ff;font-size: 1.8rem;margin-top: 0;margin-bottom: 20px;text-align: center;}
.modal-summary {margin-bottom: 20px;font-size: 1.1rem;color: #ccc;text-align: center;}
.modal-summary span {font-weight: bold;color: #eee;}
.modal-table-container {
    max-height: calc(90vh - 250px);
    overflow-y: auto;border: 1px solid #007acc;border-radius: 8px;margin-top: 15px;
    flex-grow: 1;
}
.modal-table {width: 100%;border-collapse: collapse;margin: 0;background-color: #1a1a1a;}
.modal-table thead th {
  background-color: #007acc;color: #000;padding: 10px 15px;text-align: left;
  border: 1px solid #005f99;position: sticky;top: 0;z-index: 10;
}
.modal-table tbody tr:nth-child(even) {background-color: #222;}
.modal-table tbody tr:nth-child(odd) {background-color: #2b2b2b;}
.modal-table tbody td {padding: 8px 15px;border: 1px solid #333;color: #eee;font-size: 0.9rem;text-align: left;}
/* NEW: Make the first column (the stat name) bold for clarity */
.modal-table tbody td:first-child {
    font-weight: bold;
    color: #00a8ff;
}
.modal-table tbody tr:hover {background-color: #3a3a3a;}
.modal-action-area { text-align: center; padding-top: 20px; flex-shrink: 0; }

/* Responsive Media Queries */
@media (max-width: 920px) {
  .dropdown-row .dropdown-category { flex-basis: calc(50% - 8px); }
}
@media (max-width: 768px) {
    .main-content-wrapper {
        display: block !important;
        padding-top: -50px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        height: auto !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    .profile-peeper-tool-container {
        padding: 10px 15px;
        width: 95%;
		margin-top: 115px;
	}
	
	 header #headerEditProfileBtn {
    display: none !important;
  }

	
	
	
    .modal-content {
        width: 95% !important;
        max-width: 100% !important;
        padding: 15px !important;
        max-height: calc(100vh - 100px) !important;
        margin-top: 93px !important;
    }
    .modal-title { font-size: 1.5rem; }
    .modal-summary { font-size: 0.9rem; }
    .modal-table thead th, 
    .modal-table tbody td {
        padding: 5px 8px !important;
        font-size: 0.75rem !important;
    }
    .image-glow, .image-glow-flipped {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .profile-peeper-tool-container {
        padding: 10px;
    }
    .script-title {
        font-size: 1.8rem;
    }
    .action-buttons-container .action-btn {
        min-width: unset;
        width: 100%;
		margin-bottom; 20px 
    }
    .modal-content {
        padding: 10px !important;
    }
    .modal-table thead th,
    .modal-table tbody td {
        font-size: 0.7rem !important;
    }
}