/*
 * Tech Support Panel Organism
 * ===========================
 * Styling for the Tech Support dashboard panel.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ==========================================================================
 * Panel Container
 * ========================================================================== */

.panel-tech-support {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

/* ==========================================================================
 * Header
 * ========================================================================== */

.tech-support-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default, #3f3f46);
  flex-shrink: 0;
}

.tech-support-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.tech-support-header .panel-icon {
  display: inline-flex;
  align-items: center;
}

.tech-support-header .panel-icon .svg-icon {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  overflow: hidden;
}

.tech-support-header .panel-icon .svg-icon svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
 * Body
 * ========================================================================== */

.tech-support-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

.tech-support-section {
  margin-bottom: var(--space-4);
}

.tech-support-section .section-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ==========================================================================
 * Request List
 * ========================================================================== */

.request-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.request-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.request-item:last-child {
  border-bottom: none;
}

.request-item:hover {
  background: var(--color-bg-hover);
}

.request-ref {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  white-space: nowrap;
}

.request-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.request-status {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--font-weight-medium);
}

.request-votes {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Status Colors */
.status-pending {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.status-acknowledged {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.status-in_progress {
  background: var(--color-accent-bg);
  color: var(--color-accent-primary);
}

.status-completed {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.status-wont_fix,
.status-duplicate {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

/* ==========================================================================
 * Empty State
 * ========================================================================== */

.empty-state {
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
}

/* ==========================================================================
 * Footer
 * ========================================================================== */

.tech-support-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-default, #3f3f46);
  flex-shrink: 0;
}

.exit-btn {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  padding: var(--space-3) !important;
  background: transparent !important;
  border: 1px solid var(--color-border-default, #3f3f46) !important;
  border-radius: var(--radius-md, 6px) !important;
  font-size: var(--font-size-sm, 0.875rem) !important;
  color: var(--color-text-secondary, #a1a1aa) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast, 0.15s) !important;
}

.exit-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.exit-btn .btn-icon {
  font-size: 1.5rem;
}

.exit-btn .btn-icon .svg-icon {
  width: 24px;
  height: 24px;
}

.exit-btn .btn-icon .svg-icon svg {
  width: 100%;
  height: 100%;
}