/* ============================================================
 * KDE-MES 브랜드 테마 (경도전기㈜)
 * ------------------------------------------------------------
 * Primary : #545efe (블루)   - 주요 액션/링크
 * Accent  : #ff7f6e (코랄)   - 강조/알림
 * Neutral : #515151 (차콜)   - 본문/보조
 * Company : #6d1e1a (다크버건디) - 회사명/공식 헤더
 * ============================================================ */

:root {
  /* Brand core */
  --kde-primary:        #545efe;
  --kde-primary-50:     #eff0ff;
  --kde-primary-100:    #dfe1ff;
  --kde-primary-500:    #545efe;
  --kde-primary-600:    #3d47e6;
  --kde-primary-700:    #2f37c2;

  --kde-accent:         #ff7f6e;
  --kde-accent-50:      #fff1ee;
  --kde-accent-500:     #ff7f6e;
  --kde-accent-600:     #ff6151;

  --kde-neutral:        #515151;
  --kde-neutral-50:     #f6f6f6;
  --kde-neutral-100:    #ececec;
  --kde-neutral-200:    #d9d9d9;
  --kde-neutral-500:    #515151;
  --kde-neutral-700:    #333333;
  --kde-neutral-900:    #1a1a1a;

  --kde-company:        #6d1e1a;
  --kde-company-dark:   #4d1310;

  /* Semantic tokens */
  --kde-bg:             #ffffff;
  --kde-bg-soft:        #f9fafc;
  --kde-border:         #e4e6ee;
  --kde-text:           #1a1a1a;
  --kde-text-muted:     #6b7280;

  --kde-success:        #10b981;
  --kde-warning:        #f59e0b;
  --kde-danger:         #ef4444;
  --kde-info:           #0ea5e9;

  /* 12-stage progression palette (제조 스테이지) */
  --stage-1:  #94a3b8; /* 접수 */
  --stage-2:  #64748b; /* 도면수신 */
  --stage-3:  #6366f1; /* 자재발주 */
  --stage-4:  #545efe; /* 자재입고 */
  --stage-5:  #3b82f6; /* 판재가공 */
  --stage-6:  #0ea5e9; /* 조립 */
  --stage-7:  #06b6d4; /* 배선 */
  --stage-8:  #14b8a6; /* 검사 */
  --stage-9:  #22c55e; /* 시험 */
  --stage-10: #84cc16; /* 도장/후처리 */
  --stage-11: #eab308; /* 출하대기 */
  --stage-12: #ff7f6e; /* 납품완료 (Accent) */

  /* Radii & Shadows */
  --kde-radius-sm: 6px;
  --kde-radius:    10px;
  --kde-radius-lg: 14px;
  --kde-shadow-sm: 0 1px 2px rgba(20, 20, 43, 0.06);
  --kde-shadow:    0 4px 12px rgba(20, 20, 43, 0.08);
  --kde-shadow-lg: 0 12px 28px rgba(20, 20, 43, 0.12);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR",
               "Malgun Gothic", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--kde-text);
  background: var(--kde-bg-soft);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--kde-primary); text-decoration: none; }
a:hover { color: var(--kde-primary-600); }

/* ---------- Brand header ---------- */
.kde-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--kde-border);
  box-shadow: var(--kde-shadow-sm);
}
.kde-topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.kde-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kde-brand-logo {
  height: 38px;
  width: auto;
  display: block;
  border-radius: 4px;
  object-fit: contain;
}
.kde-brand-name {
  font-weight: 700;
  color: var(--kde-company);
  font-size: 16px;
  letter-spacing: -0.2px;
}
.kde-brand-sub {
  color: var(--kde-neutral-500);
  font-size: 12px;
  margin-left: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--kde-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.btn-primary {
  background: var(--kde-primary);
  color: white;
}
.btn-primary:hover { background: var(--kde-primary-600); }

.btn-accent {
  background: var(--kde-accent);
  color: white;
}
.btn-accent:hover { background: var(--kde-accent-600); }

.btn-ghost {
  background: transparent;
  color: var(--kde-neutral-700);
  border-color: var(--kde-border);
}
.btn-ghost:hover { background: var(--kde-neutral-50); }

/* ---------- Cards ---------- */
.card {
  background: white;
  border: 1px solid var(--kde-border);
  border-radius: var(--kde-radius);
  padding: 20px;
  box-shadow: var(--kde-shadow-sm);
}

/* ---------- Stage chips (12 스테이지) ---------- */
.stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}
.stage-1  { background: var(--stage-1); }
.stage-2  { background: var(--stage-2); }
.stage-3  { background: var(--stage-3); }
.stage-4  { background: var(--stage-4); }
.stage-5  { background: var(--stage-5); }
.stage-6  { background: var(--stage-6); }
.stage-7  { background: var(--stage-7); }
.stage-8  { background: var(--stage-8); }
.stage-9  { background: var(--stage-9); }
.stage-10 { background: var(--stage-10); }
.stage-11 { background: var(--stage-11); }
.stage-12 { background: var(--stage-12); }

/* ---------- Stage progress bar ---------- */
.stage-progress {
  display: flex;
  gap: 3px;
  align-items: center;
}
.stage-progress .seg {
  flex: 1;
  height: 8px;
  border-radius: 3px;
  background: var(--kde-neutral-100);
}
.stage-progress .seg.done { background: var(--kde-primary); }
.stage-progress .seg.current {
  background: var(--kde-accent);
  box-shadow: 0 0 0 2px rgba(255, 127, 110, 0.25);
}

/* ---------- Table ---------- */
table.kde-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--kde-radius);
  overflow: hidden;
}
.kde-table th {
  background: var(--kde-neutral-50);
  color: var(--kde-neutral-700);
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--kde-border);
}
.kde-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--kde-border);
  font-size: 14px;
}
.kde-table tr:hover td { background: var(--kde-primary-50); }

/* ---------- Sidebar layout ---------- */
.kde-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 60px);
}
.kde-side {
  background: #ffffff;
  border-right: 1px solid var(--kde-border);
  padding: 20px 12px;
}
.kde-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--kde-radius-sm);
  color: var(--kde-neutral-700);
  font-size: 14px;
  margin-bottom: 3px;
}
.kde-side-item:hover { background: var(--kde-primary-50); color: var(--kde-primary); }
.kde-side-item.active { background: var(--kde-primary); color: white; }
.kde-main { padding: 20px; max-width: 1400px; }

/* ---------- Utility additions (Phase 2) ---------- */
.btn-sm { padding: 4px 10px; font-size: 12px; }
.input-sm { padding: 4px 8px; font-size: 12.5px; height: auto; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.badge-draft    { background: #e5e7eb; color: #374151; }
.badge-sent     { background: #dbeafe; color: #1e40af; }
.badge-received { background: #d1fae5; color: #065f46; }
.badge-active   { background: #fef3c7; color: #92400e; }
.badge-done     { background: #d1fae5; color: #065f46; }
.badge-canceled { background: #fee2e2; color: #991b1b; }