/**
 * Energy Dashboards View-Specific Styles
 * Page-level layouts and view-specific components
 */

/* ── Login Page ──────────────────────────────────────────────────────────── */
.login-wordmark {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  text-align: center;
  margin-bottom: var(--space-2);
}

.login-wordmark span {
  color: var(--green-bright);
}

.login-tagline {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--space-8);
}

.login-card-inner {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--bg-border);
}

/* Login error shake animation */
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.login-card-inner--error {
  animation: login-shake 0.5s ease;
  border-color: rgba(255, 77, 109, 0.4);
}

.login-error-msg {
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--grid-import);
  font-size: 0.875rem;
  margin-bottom: var(--space-5);
  text-align: center;
}

/* ── Dashboard (super admin) ─────────────────────────────────────────────── */
.dashboard-header {
  padding: var(--space-6) 0 var(--space-4);
}

.dashboard-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

.dashboard-subtitle {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-top: var(--space-1);
}

/* ── Site Dashboard ──────────────────────────────────────────────────────── */
.site-name-display {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.site-address-display {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Summary bar labels */
.summary-item {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  animation: card-reveal 0.4s ease both;
  animation-delay: calc(var(--stagger-index, 0) * 60ms);
}

.summary-item__label {
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}

.summary-item__value {
  font-family: var(--font-data);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--readout);
}

/* ── Environmental Section ───────────────────────────────────────────────── */
.env-section {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.env-section__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.env-metric {
  padding: var(--space-4) 0;
}

.env-metric + .env-metric {
  border-top: 1px solid var(--bg-border);
}

.env-metric__label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.env-metric__value {
  font-family: var(--font-data);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--green-bright);
}

.env-metric__sub {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Carbon intensity indicator */
.carbon-intensity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.carbon-intensity__badge {
  font-family: var(--font-data);
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.carbon-intensity__label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.carbon-intensity__index {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.carbon-intensity__index--low    { background: rgba(0, 232, 122, 0.1); color: var(--green-bright); }
.carbon-intensity__index--moderate { background: rgba(240, 192, 64, 0.1); color: var(--solar); }
.carbon-intensity__index--high   { background: rgba(255, 77, 109, 0.1); color: var(--grid-import); }

.generation-mix {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-2);
}

.generation-mix__segment {
  height: 100%;
  transition: width 0.6s ease;
}

.generation-mix__segment--wind    { background: var(--ev); }
.generation-mix__segment--solar   { background: var(--solar); }
.generation-mix__segment--nuclear { background: var(--green-mid); }
.generation-mix__segment--gas     { background: var(--battery-drain); }
.generation-mix__segment--biomass { background: var(--consumption); }
.generation-mix__segment--other   { background: var(--bg-border); }

/* ── History Page ────────────────────────────────────────────────────────── */
.history-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.range-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.range-picker input[type="date"] {
  width: auto;
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  color-scheme: dark;
}

.sensor-multiselect {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.sensor-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  cursor: pointer;
  border: 1px solid var(--bg-border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.sensor-toggle.selected {
  border-color: var(--green-dim);
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.sensor-toggle__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-container {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
  min-height: 300px;
}

/* ── Settings Page ───────────────────────────────────────────────────────── */
.settings-tab-content {
  padding-top: var(--space-2);
}

.ingest-token-display {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-data);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.ingest-token-display__token {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sensor-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sensor-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.sensor-list-item__key {
  font-family: var(--font-data);
  font-size: 0.8125rem;
  color: var(--text-dim);
  min-width: 120px;
  flex-shrink: 0;
}

.sensor-list-item__label {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.sensor-list-item__type {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* ── Admin Page ──────────────────────────────────────────────────────────── */
.admin-nav {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

.admin-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  font-family: var(--font-body);
}

.admin-nav__link:hover {
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.admin-nav__link.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.admin-table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.admin-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}