/**
 * File: /Library/WebServer/Documents/Macroscope/assets/css/components.css
 * Purpose: Reusable UI components - buttons, forms, cards, badges
 * Updated: November 16, 2025 - Added login/logout button styles
 */

/* ===== BUTTONS ===== */

/* Base button styles */
.btn-login,
.btn-logout,
.profile-btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 2px solid var(--color-border);
}

/* Login button */
.btn-login {
  background: var(--color-accent);
  color: var(--color-bg-paper);
  border-color: var(--color-accent);
}

.btn-login:hover {
  background: var(--color-text);
  border-color: var(--color-text);
}

/* Logout button */
.btn-logout {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-logout:hover {
  background: var(--color-accent);
  color: var(--color-bg-paper);
  border-color: var(--color-accent);
}

/* Profile button */
.profile-btn {
  background: transparent;
  color: var(--color-text);
  padding: var(--spacing-sm);
}

.profile-btn:hover {
  background: var(--color-bg);
}

/* Settings save button */
.btn-save-settings {
  background: var(--color-accent);
  color: var(--color-bg-paper);
  border: 2px solid var(--color-accent);
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-save-settings:hover {
  background: var(--color-text);
  border-color: var(--color-text);
}

/* ===== USERNAME DISPLAY ===== */
.username {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-right: var(--spacing-md);
}

/* ===== SENSOR BADGES ===== */
.sensor-badge-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: var(--spacing-xs);
}

.sensor-badge-icon.fresh {
  background: #7ED321;
}

.sensor-badge-icon.stale {
  background: #F5A623;
}

.sensor-badge-icon.offline {
  background: #D0021B;
}

/* ===== STATUS BADGES ===== */
.status-badge {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: var(--spacing-md);
}

.status-badge.authenticated {
  background: rgba(126, 211, 33, 0.1);
  border-color: #7ED321;
  color: var(--color-text);
}

/* ===== CARDS ===== */

/* Place card */
.place-card {
  background: var(--color-bg-paper);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.place-card h3 {
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.place-card p {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Dashboard card (also defined in admin.css for admin-specific styling) */
.dashboard-card {
  background: var(--color-bg-paper);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-lg);
}

/* Placeholder card */
.placeholder-card {
  background: var(--color-bg-paper);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-xl);
  max-width: 600px;
  margin: var(--spacing-xl) auto;
  text-align: center;
}

.placeholder-card h2 {
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  font-size: 1.75rem;
}

.placeholder-card p {
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

/* ===== FORMS ===== */

/* Form group */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

/* Form inputs */
.form-input {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--font-sans);
  background: var(--color-bg-paper);
  color: var(--color-text);
  transition: border-color 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Form select */
.form-select {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--font-sans);
  background: var(--color-bg-paper);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232a2a2a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  padding-right: calc(var(--spacing-md) * 3);
}

.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ===== SETTINGS FORMS ===== */
.settings-section {
  background: var(--color-bg-paper);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.settings-section h2 {
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
  font-size: 1.5rem;
}

/* ===== PUBLIC PAGE COMPONENTS ===== */
.main-content {
  flex: 1;
  padding: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .username {
    display: none;
  }
  
  .main-content {
    padding: var(--spacing-md);
  }
  
  .placeholder-card {
    padding: var(--spacing-lg);
  }
}