/* ==========================================================================
   Korni-Mail Taskpane — Design System Styles
   Based on: docs/design-system.md ("Architectural Blueprint" / Operational Precision)
   ========================================================================== */

/* ---------- Color Tokens ---------- */
:root {
  /* Surfaces (tonal layering hierarchy) */
  --surface:                    #f9f9f9;
  --surface-container-low:      #f3f3f3;
  --surface-container:          #ededed;
  --surface-container-high:     #e8e8e8;
  --surface-container-highest:  #e2e2e2;
  --surface-container-lowest:   #ffffff;

  /* Primary (Haberkorn Blue) */
  --primary:          #006096;
  --on-primary:       #ffffff;
  --primary-fixed:    #cde5ff;
  --surface-tint:     #00639a;

  /* Text */
  --on-surface:           #1a1c1c;
  --on-surface-variant:   #404850;

  /* Structural */
  --outline:          #707881;
  --outline-variant:  #bfc7d2;

  /* Accent (Restrained Yellow) */
  --tertiary:            #6d5e00;
  --tertiary-container:  #c6aa00;

  /* Semantic */
  --status-ok:       #006096;
  --status-warning:  #c6aa00;
  --status-error:    #ba1a1a;
  --status-success:  #107c10;
}

/* ---------- Global Reset ---------- */
* {
  border-radius: 0 !important;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--surface);
  color: var(--on-surface);
  min-width: 300px;
  overflow-x: hidden;
}

/* ---------- Typography Scale ---------- */
.display-lg  { font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.02em; }
.display-md  { font-size: 1.75rem; line-height: 2rem; letter-spacing: -0.02em; }
.headline-lg { font-size: 1.5rem; line-height: 1.75rem; letter-spacing: -0.02em; }
.headline-md { font-size: 1.25rem; line-height: 1.5rem; }
.headline-sm { font-size: 1.125rem; line-height: 1.375rem; }
.body-lg     { font-size: 1rem; line-height: 1.5rem; }
.body-md     { font-size: 0.875rem; line-height: 1.25rem; }
.body-sm     { font-size: 0.75rem; line-height: 1rem; }
.label-lg    { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.label-md    { font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.label-sm    { font-size: 0.6875rem; line-height: 0.875rem; font-weight: 500; }

/* ---------- Haberkorn Shape Header ---------- */
.header {
  position: relative;
  background-color: var(--surface-container-highest);
  overflow: hidden;
  padding: 0;
}
.header-diagonal {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 100%;
  background-color: var(--primary);
  transform-origin: top right;
  transform: skewX(-15deg) translateX(24px);
}
.header h1 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--on-surface);
  padding: 14px 16px;
  margin: 0;
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
}

/* ---------- Progress Indicator ---------- */
.progress-indicator {
  padding: 10px 16px 6px 16px;
  background-color: var(--surface);
}
.progress-indicator .spinner {
  width: 100%;
  height: 3px;
  background-color: var(--surface-container-high);
  overflow: hidden;
  margin-bottom: 6px;
}
.progress-indicator .spinner-bar {
  width: 40%;
  height: 100%;
  background-color: var(--primary);
  animation: spinner-slide 1.2s ease-in-out infinite;
}
.progress-indicator .body-sm {
  color: var(--on-surface-variant);
}
.progress-indicator.progress-done .body-sm {
  color: var(--status-ok);
  font-weight: 500;
}
.progress-indicator.progress-error .body-sm {
  color: var(--status-error);
  font-weight: 500;
}

@keyframes spinner-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ---------- Inline Spinner (for processing items) ---------- */
.spinner-inline {
  width: 16px;
  height: 16px;
  border: 2px solid var(--surface-container-high);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spinner-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.processing-item {
  opacity: 0.7;
}

/* ---------- Document Area ---------- */
.document-area {
  padding: 8px 16px;
}

/* ---------- Section Surfaces ---------- */
.section-surface {
  margin: 0 0 8px 0;
}
.section-surface-active {
  background-color: var(--surface-container-lowest);
  padding-left: 3px;
  border-left: 3px solid var(--primary);
}
.section-surface-inactive {
  background-color: var(--surface-container-low);
}
.section-content {
  padding: 12px 16px;
}
.section-title {
  color: var(--on-surface-variant);
  margin-bottom: 10px;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--primary);
  color: var(--on-primary);
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
}
.btn-primary:not(:disabled):hover {
  background-color: var(--surface-tint);
}
.btn-primary:disabled {
  background-color: var(--surface-container-high);
  color: var(--outline);
  cursor: not-allowed;
}

.btn-secondary {
  background-color: var(--surface-container-highest);
  color: var(--on-surface);
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
}
.btn-secondary:not(:disabled):hover {
  background-color: var(--surface-container-high);
}
.btn-secondary:disabled {
  background-color: var(--surface-container-high);
  color: var(--outline);
  cursor: not-allowed;
  opacity: 0.55;
}

.btn-tertiary {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0;
}
.btn-tertiary:not(:disabled):hover {
  text-decoration: underline;
}

/* ---------- Action Bar ---------- */
.action-bar {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.selection-count {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
}

.action-bar .btn-primary i,
.action-bar .btn-secondary i {
  margin-left: 6px;
  font-size: 0.75rem;
}

.action-bar-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Pages ---------- */
.page {
  display: block;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 12px 16px 4px;
}
.btn-back:hover {
  text-decoration: underline;
}
.btn-back i {
  font-size: 0.75rem;
}

/* ---------- Status Badges ---------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 500;
}
.badge-ok {
  background-color: rgba(0, 96, 150, 0.12);
  color: var(--primary);
}
.badge-warning {
  background-color: rgba(198, 170, 0, 0.15);
  color: var(--tertiary);
}
.badge-error {
  background-color: rgba(186, 26, 26, 0.10);
  color: var(--status-error);
}
.badge-neutral {
  background-color: var(--surface-container-high);
  color: var(--on-surface-variant);
}

/* ---------- Document List ---------- */
.document-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
}
.document-list-item:nth-child(odd) {
  background-color: var(--surface-container-low);
}
.document-list-item:nth-child(even) {
  background-color: var(--surface);
}
.document-list-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.document-filename {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.confidence-indicator {
  font-size: 0.625rem;
  font-weight: 500;
  padding: 1px 4px;
  color: var(--on-surface-variant);
}
.confidence-high {
  color: var(--status-ok);
}
.confidence-medium {
  color: var(--status-warning);
}
.confidence-low {
  color: var(--outline);
  opacity: 0.7;
}
.document-status-badge {
  font-size: 0.625rem;
}

/* ---------- Override Button (low confidence) ---------- */
.btn-override {
  font-size: 0.625rem;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
}

/* ---------- Tooltip ---------- */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 0;
  background-color: var(--on-surface);
  color: var(--on-primary);
  padding: 4px 8px;
  font-size: 0.6875rem;
  white-space: nowrap;
  z-index: 10;
}

/* ---------- Animations ---------- */
.fade-in {
  animation: fadeIn 0.2s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Utility ---------- */
.hidden {
  display: none !important;
}

/* ---------- Review Section (per document) ---------- */
.review-section {
  background-color: var(--surface-container-lowest);
  border-left: 3px solid var(--primary);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.review-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.review-field-errors {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.review-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.review-actions .btn-primary {
  padding: 6px 14px;
  font-size: 0.8125rem;
}
.review-actions .btn-secondary {
  padding: 6px 14px;
  font-size: 0.8125rem;
}
.review-actions .btn-tertiary {
  font-size: 0.8125rem;
}

.review-warnings {
  margin: 6px 0;
}

.warning-confirm {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  cursor: pointer;
}
.warning-confirm input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--status-warning);
  flex-shrink: 0;
}
.warning-confirm .label-sm {
  color: var(--tertiary);
}

/* Error state per document */
.doc-error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(186, 26, 26, 0.08);
  padding: 6px 10px;
  margin: 6px 0;
}
.doc-error-banner .body-sm {
  color: var(--status-error);
  flex: 1;
}
.doc-error-banner .btn-retry {
  background: none;
  border: none;
  color: var(--status-error);
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* Done state */
.doc-done {
  opacity: 0.7;
}

/* Validation result display */
.validation-results {
  margin: 8px 0;
}
.validation-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.validation-status-row .validation-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.validation-icon-ok {
  color: #107c10;
  color: var(--status-success);
}
.validation-icon-fail {
  color: var(--status-error);
}
.validation-icon-warning {
  color: var(--status-warning);
}
.validation-icon-neutral {
  color: var(--on-surface-variant);
}
.validation-status-row .validation-label {
  font-size: 0.8125rem;
  color: var(--on-surface);
}
.validation-status-row .validation-value {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  margin-left: auto;
}

/* ---------- Dispatch button (Abschließen) ---------- */
.btn-dispatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
}
.btn-dispatch:not(:disabled) {
  background-color: var(--status-success);
  color: #ffffff;
}
.btn-dispatch:not(:disabled):hover {
  background-color: #0a5e0a;
}
.btn-dispatch .ms-Icon {
  font-size: 13px;
  opacity: 0.85;
  pointer-events: none;
}

/* Icon-only button */
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text-secondary);
  border-radius: 4px;
}
.btn-icon:not(:disabled):hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}