/*
 * Security Features
 * Two-factor setup, session manager, API keys, audit log
 */

/* Two-Factor Setup */
.twofa-setup {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px;
}

.twofa-steps {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 32px;
}

.twofa-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.twofa-step-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-tertiary);
  border-radius: 50%;
  font-weight: 600;
}

.twofa-step-complete .twofa-step-number {
  background-color: var(--accent-green);
  color: white;
}

.twofa-step-active .twofa-step-number {
  background-color: var(--accent-primary);
  color: white;
}

.twofa-step-active {
  color: var(--text-primary);
}

.twofa-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.twofa-qr-section {
  text-align: center;
}

.twofa-qr-code {
  display: inline-block;
  padding: 12px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 16px;
}

.twofa-manual-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.twofa-manual-code {
  display: block;
  padding: 8px 16px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 2px;
}

.twofa-backup-section h4 {
  margin-bottom: 8px;
  color: var(--text-primary);
}

.twofa-backup-warning {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.twofa-backup-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.twofa-backup-codes code {
  padding: 8px 12px;
  background-color: var(--bg-tertiary);
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  text-align: center;
}

.twofa-copy-codes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: var(--bg-tertiary);
  border: none;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.twofa-copy-codes:hover {
  background-color: var(--border-color);
}

/* Session Manager */
.session-manager {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.session-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.session-item:last-of-type {
  border-bottom: none;
}

.session-device-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-tertiary);
  border-radius: 8px;
  color: var(--text-secondary);
}

.session-info {
  flex: 1;
}

.session-device {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.session-device-name {
  font-weight: 500;
  color: var(--text-primary);
}

.session-current-badge {
  padding: 2px 8px;
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--accent-green);
  border-radius: 4px;
  font-size: 11px;
}

.session-suspicious-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background-color: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border-radius: 4px;
  font-size: 11px;
}

.session-details {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.session-revoke {
  padding: 6px 12px;
  background-color: var(--bg-tertiary);
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.session-revoke:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

.session-revoke-danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.session-revoke-danger:hover {
  background-color: rgba(239, 68, 68, 0.2);
}

.session-revoke-all {
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-color);
  color: #EF4444;
  font-size: 14px;
  cursor: pointer;
}

.session-revoke-all:hover {
  background-color: rgba(239, 68, 68, 0.05);
}

.session-suspicious {
  background-color: rgba(245, 158, 11, 0.05);
}

/* API Key Manager */
.api-key-manager {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.api-key-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.api-key-header h4 {
  margin: 0;
  color: var(--text-primary);
}

.api-key-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: var(--accent-primary);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

.api-key-list {
  padding: 8px;
}

.api-key-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.api-key-item:last-child {
  margin-bottom: 0;
}

.api-key-item:hover {
  background-color: var(--bg-tertiary);
}

.api-key-info {
  flex: 1;
}

.api-key-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.api-key-value {
  display: block;
  padding: 8px 12px;
  background-color: var(--bg-tertiary);
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  margin-bottom: 8px;
}

.api-key-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.api-key-scope {
  padding: 2px 8px;
  background-color: var(--bg-tertiary);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

.api-key-details {
  font-size: 12px;
  color: var(--text-secondary);
}

.api-key-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.api-key-action {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
}

.api-key-action:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.api-key-delete:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.api-key-renew:hover {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--accent-green);
}

.api-key-expiring {
  background-color: rgba(245, 158, 11, 0.05);
}

.api-key-expiring-badge {
  padding: 2px 8px;
  background-color: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border-radius: 4px;
  font-size: 11px;
  font-weight: normal;
}

/* Audit Log Timeline */
.audit-log {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.audit-log-filters {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.audit-filter-select,
.audit-filter-date {
  padding: 8px 12px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
}

.audit-log-list {
  padding: 8px;
}

.audit-log-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
}

.audit-log-item:hover {
  background-color: var(--bg-tertiary);
}

.audit-log-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.audit-icon-success {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--accent-green);
}

.audit-icon-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.audit-icon-info {
  background-color: rgba(99, 102, 241, 0.1);
  color: #6366F1;
}

.audit-icon-danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.audit-log-content {
  flex: 1;
}

.audit-log-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.audit-log-details {
  font-size: 12px;
  color: var(--text-secondary);
}

.audit-log-time {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}