/* Theme-friendly styles (no font sizes); responsive grid; colors via CSS vars */
/* Security: Content Security Policy compliant styles */
:root {
  --awgr-star-color: #f4b400;
  --awgr-link-color: #1a73e8;
  --awgr-breakpoint: 640px;
  --awgr-security-color: #00a32a;
  --awgr-error-color: #b00020;
  --awgr-warning-color: #dba617;
}
.awgr-wrap { width: 100%; }
.awgr-grid { display: grid; gap: 16px; }
.awgr-grid[data-columns="1"] { grid-template-columns: 1fr; }
.awgr-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
.awgr-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: var(--awgr-breakpoint)) {
  .awgr-grid { grid-template-columns: 1fr !important; }
}
.awgr-card { border: 1px solid #ddd; border-radius: 10px; padding: 15px; background: #fff; }
.awgr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.awgr-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.awgr-name { display: inline-block; }
.awgr-stars { color: var(--awgr-star-color); display: block; }
.awgr-text { margin: 0 0 8px; }
.awgr-date { color: #777; display: inline-block; margin-bottom: 6px; }
.awgr-link { color: var(--awgr-link-color); text-decoration: none; }
.awgr-actions { margin-top: 12px; text-align: center; }
.awgr-load-more { 
  cursor: pointer; 
  background: var(--awgr-link-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.2s ease;
}
.awgr-load-more:hover {
  background: #0d5aa7;
}
.awgr-load-more:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.awgr-error { 
  color: var(--awgr-error-color);
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
}

/* Security-related styles */
.awgr-security-badge {
  background: var(--awgr-security-color) !important;
  color: white !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  font-weight: normal !important;
  display: inline-block;
  margin-left: 10px;
}

.awgr-security-info {
  background: #f0f6fc;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  padding: 15px;
  margin: 20px 0;
}

.awgr-security-info h3 {
  margin-top: 0;
  color: var(--awgr-security-color);
}

.awgr-security-info ul {
  margin-bottom: 0;
}

.awgr-security-info code {
  background: #f1f1f1;
  padding: 2px 4px;
  border-radius: 2px;
  font-family: monospace;
}

/* Enhanced security for form elements */
.awgr-admin input[type="text"],
.awgr-admin input[type="number"],
.awgr-admin input[type="email"],
.awgr-admin select,
.awgr-admin textarea {
  max-width: 100%;
  border: 1px solid #8c8f94;
  border-radius: 3px;
  padding: 6px 8px;
}

.awgr-admin input:invalid {
  border-color: var(--awgr-error-color);
  box-shadow: 0 0 0 1px var(--awgr-error-color);
}

.awgr-admin input:valid {
  border-color: var(--awgr-security-color);
}

/* Rate limiting indicator */
.awgr-rate-limit-warning {
  background: var(--awgr-warning-color);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
  font-weight: bold;
}

/* Security log styling */
.awgr-security-log {
  background: #f1f1f1;
  padding: 10px;
  overflow-x: auto;
  max-height: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
}

/* Cache status styling */
.awgr-cache-status {
  background: #f0f6fc;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  padding: 15px;
  margin: 20px 0;
}

.awgr-cache-status p {
  margin: 5px 0;
}

.awgr-cache-status strong {
  color: var(--awgr-security-color);
}

/* Clear cache button styling */
.button.button-secondary {
  background: #f0f6fc;
  border-color: #c3c4c7;
  color: #1d2327;
}

.button.button-secondary:hover {
  background: #e6f2ff;
  border-color: #8c8f94;
}

/* Cache refresh button specific styling */
button[value="clear_cache"] {
  position: relative;
}

button[value="clear_cache"]:hover {
  background: #e6f2ff !important;
  border-color: #1a73e8 !important;
  color: #1a73e8 !important;
}

/* Nuclear clear button styling */
button[value="nuclear_clear"] {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b00020 !important;
}

button[value="nuclear_clear"]:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

/* Debug button styling */
button[value="debug_api"] {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

button[value="debug_api"]:hover {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #075985 !important;
}

/* Alternative API button styling */
button[value="try_alternative_api"] {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}

button[value="try_alternative_api"]:hover {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #14532d !important;
}

/* Cache status indicators */
.cache-status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.cache-status-indicator.fresh {
  background-color: #00a32a;
}

.cache-status-indicator.stale {
  background-color: #dba617;
}

.cache-status-indicator.empty {
  background-color: #b00020;
}

/* Configuration status styling */
.awgr-config-status {
  background: #f0f6fc;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  padding: 15px;
  margin: 20px 0;
}

.awgr-config-status h3 {
  margin-top: 0;
  color: var(--awgr-security-color);
}

.awgr-config-status p {
  margin: 5px 0;
}

.awgr-config-status strong {
  color: var(--awgr-security-color);
}