/* ==========================================================================
   Email Detail Page Styles
   ========================================================================== */

/* --- Email Meta (From, To, Date, Subject) --- */
.email-detail__meta {
  background: var(--color-bg-main);
  border-radius: var(--radius-md);
  padding: var(--space-base);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border-light);
}

.email-detail__meta-row {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
}

.email-detail__meta-row + .email-detail__meta-row {
  border-top: 1px solid var(--color-border-light);
}

.email-detail__meta-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  min-width: 70px;
  padding-top: 2px;
}

.email-detail__meta-value {
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  flex: 1;
}

/* --- Tags --- */
.email-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* --- Email Body --- */
.email-detail__body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
}

.email-detail__body p {
  margin-bottom: var(--space-base);
}

.email-detail__body strong {
  font-weight: var(--fw-semibold);
}

/* --- Signature --- */
.email-detail__signature {
  margin-top: var(--space-xl);
  padding-top: var(--space-base);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* --- Order Table --- */
.email-detail__order-table {
  margin: var(--space-base) 0 var(--space-lg);
}

.email-detail__order-table th {
  background: var(--color-bg-main);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-align: left;
  border-bottom: 2px solid var(--color-border);
}

.email-detail__order-table td {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-base);
  border-bottom: 1px solid var(--color-border-light);
}

.email-detail__order-table tfoot td {
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-border);
  border-bottom: none;
  font-size: var(--fs-base);
}

/* --- Stock Alert Box --- */
.email-detail__stock-alert {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-base);
  margin: var(--space-base) 0 var(--space-lg);
}

.email-detail__stock-header {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.email-detail__stock-alert .email-detail__order-table {
  margin-bottom: 0;
}

/* --- Attachments --- */
.email-detail__attachments {
  margin-top: var(--space-xl);
  padding-top: var(--space-base);
  border-top: 1px solid var(--color-border);
}

.email-detail__attachments-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.email-detail__attachments-title svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.email-detail__attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.email-detail__attachment {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-base);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.email-detail__attachment:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.email-detail__attachment svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-primary);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.email-detail__attachment-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}

.email-detail__attachment-size {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* --- AI Insights --- */
.email-detail__ai-insights {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.email-detail__ai-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-base);
  border-radius: var(--radius-md);
  border-left: 4px solid transparent;
}

.email-detail__ai-item--danger {
  background: var(--color-danger-bg);
  border-left-color: var(--color-danger);
}

.email-detail__ai-item--warning {
  background: var(--color-warning-bg);
  border-left-color: var(--color-warning);
}

.email-detail__ai-item--success {
  background: var(--color-success-bg);
  border-left-color: var(--color-success);
}

.email-detail__ai-item--info {
  background: var(--color-info-bg);
  border-left-color: var(--color-info);
}

.email-detail__ai-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.email-detail__ai-item--danger .email-detail__ai-icon svg {
  stroke: var(--color-danger);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.email-detail__ai-item--warning .email-detail__ai-icon svg {
  stroke: var(--color-warning);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.email-detail__ai-item--success .email-detail__ai-icon svg {
  stroke: var(--color-success);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.email-detail__ai-item--info .email-detail__ai-icon svg {
  stroke: var(--color-info);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.email-detail__ai-icon svg {
  width: 24px;
  height: 24px;
}

.email-detail__ai-item strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-xs);
}

.email-detail__ai-item p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
  margin: 0;
}

/* --- Action Buttons --- */
.email-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .email-detail__meta-row {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .email-detail__meta-label {
    min-width: auto;
  }

  .email-detail__attachment-list {
    flex-direction: column;
  }

  .email-detail__actions {
    flex-direction: column;
  }

  .email-detail__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .email-detail__order-table {
    font-size: var(--fs-sm);
  }

  .email-detail__order-table th,
  .email-detail__order-table td {
    padding: var(--space-xs) var(--space-sm);
  }
}