/* ==========================================================================
   production.css — 생산관리 모듈 전용 스타일
   ========================================================================== */

/* ── 헤더 액션 버튼 줄바꿈 방지 (데스크톱) ─────────────────────────────── */
@media (min-width: 992px) {
    .header-actions {
        flex-wrap: nowrap !important;
    }
}

/* ── 요약 스트립 (summary-strip / strip-card) ────────────────────────────── */
.summary-strip {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.strip-card {
    flex: 1;
    min-width: 130px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.strip-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.strip-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

/* ── 삭제 버튼 ───────────────────────────────────────────────────────────── */
.btn-delete-multi {
    padding: 8px 14px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.btn-delete-multi:hover { background: #dc2626; }
.btn-delete-multi:disabled { opacity: 0.4; cursor: not-allowed; background: #ef4444; }

/* ── 액션 버튼 (행 편집/삭제) ────────────────────────────────────────────── */
.action-btns { display: flex; gap: 4px; }

.btn-action {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-surface, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s;
    padding: 0;
    position: relative; /* tooltip 기준점 */
}

/* ── 행 액션 버튼 툴팁 (아이콘만 표시 + hover 시 말풍선) ──────────────── */
.btn-action[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.88);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    padding: 3px 10px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    letter-spacing: 0;
}
.btn-action[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(20, 20, 20, 0.88);
    pointer-events: none;
    z-index: 9999;
}

.btn-action[title]:hover::after,
.btn-action[title]:hover::before,
.btn-action[data-tooltip]:hover::after,
.btn-action[data-tooltip]:hover::before {
    display: none !important;
}

.btn-edit   { color: #1565c0; }
.btn-edit:hover   { background: #1565c0; color: #fff; border-color: #1565c0; }
.btn-ok     { color: #2e7d32; }
.btn-ok:hover     { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.btn-detail { color: #6a1b9a; }
.btn-detail:hover { background: #6a1b9a; color: #fff; border-color: #6a1b9a; }

/* ── 로딩 / 빈 데이터 ───────────────────────────────────────────────────── */
.loading-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted, #94a3b8);
    gap: 10px;
    font-size: 13.5px;
}

.empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted, #94a3b8);
    gap: 8px;
    text-align: center;
}
.empty-wrap i  { font-size: 36px; opacity: 0.35; }
.empty-wrap p  { margin: 0; font-size: 13.5px; }

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--accent, #667eea);
    border-radius: 50%;
    animation: prod-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes prod-spin { to { transform: rotate(360deg); } }

/* ── 모달 크기 변형 ──────────────────────────────────────────────────────── */
.modal-panel.modal-sm { width: 440px !important; }
.modal-panel.modal-lg { width: 720px !important; }
.modal-panel.modal-xl { width: 900px !important; }

/* ── 모달 하단 버튼 ──────────────────────────────────────────────────────── */
.modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.btn-modal-save,
.btn-modal-ok {
    padding: 8px 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-modal-save:hover:not(:disabled),
.btn-modal-ok:hover:not(:disabled) { opacity: 0.9; }
.btn-modal-save:disabled,
.btn-modal-ok:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-danger-save,
.btn-modal-danger { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; }

.btn-modal-cancel {
    padding: 8px 24px;
    background: var(--bg-surface, #fff);
    color: var(--text-secondary, #64748b);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-modal-cancel:hover { background: var(--hover-bg, #f8fafc); }

/* ── 필드 그리드 (모달 폼) ───────────────────────────────────────────────── */
.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

/* 패딩 포함 2칸 그리드 래퍼 (신규 모달에서 field-grid + modal-body-content 합친 형태) */
.modal-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding: 20px 22px;
}

.field-item { display: flex; flex-direction: column; gap: 5px; }
.field-item.full-span { grid-column: span 2; }

.field-item label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.req { color: #dc2626; }

/* ── 인쇄 미리보기 ───────────────────────────────────────────────────────── */
/*
 * 인쇄 미리보기는 다크/라이트 테마에 관계없이 항상 라이트 모드로 렌더링.
 * CSS 변수를 .status-print-overlay 스코프에서 라이트 값으로 강제 재정의.
 * [data-theme="dark"] 규칙보다 높은 우선순위를 위해 !important 사용.
 */

/* 다크모드에서도 print overlay 내부는 강제 라이트 */
/* ──────────────────────────────────────────────────────────────────────────── */
/* 다크 테마: 모든 인쇄 미리보기는 항상 라이트 모드 색상 강제 */
/* ItemManagement.razor.css 라이트 모드를 기준으로 정확히 통일 */
/* ──────────────────────────────────────────────────────────────────────────── */

/* ✅ 인쇄 오버레이: ProjectDetail.razor에서 data-theme="light" 속성 사용
   따라서 html[data-theme="dark"]선택자가 매칭되지 않음
   모든 dark theme 규칙 제거 - light mode 기본 스타일 사용! */

.status-print-overlay {
    position: fixed;
    inset: 0;
    background: #ffffff !important;
    z-index: 9999;
    overflow-y: auto;
    /* CSS 변수 라이트 모드 강제 */
    --bg-main:          #f8fafc;
    --bg-surface:       #ffffff;
    --bg-input:         #ffffff;
    --border-color:     #e5e7eb;
    --border-color-light: #f1f3f5;
    --text-primary:     #1e293b;
    --text-secondary:   #64748b;
    --text-muted:       #94a3b8;
    --hover-bg:         #f8fafc;
    --accent:           #667eea;
    color-scheme: light;
    /* 다크모드 상위(.content)에서 상속되는 흰색 텍스트 차단 */
    color: #1e293b !important;
}

/* 다크 테마에서도 프린트 오버레이 배경은 라이트 */
[data-theme="dark"] .status-print-overlay {
    background: #ffffff !important;
}

/* 인쇄 미리보기 내부 모든 텍스트 요소 — toolbar/badge/bar 제외 강제 라이트 */
.status-print-overlay .print-paper,
.status-print-overlay .print-paper p,
.status-print-overlay .print-paper span,
.status-print-overlay .print-paper td,
.status-print-overlay .print-paper th,
.status-print-overlay .print-paper div,
.status-print-overlay .print-paper strong,
.status-print-overlay .print-paper b,
.status-print-overlay .print-paper small,
.status-print-overlay .print-paper label {
    color: #1e293b !important;
}
.status-print-overlay .print-paper .text-muted,
.status-print-overlay .print-paper small { color: #64748b !important; }
/* 배지 계열은 원래 색 유지 */
.status-print-overlay .print-paper .type-badge,
.status-print-overlay .print-paper .role-badge,
.status-print-overlay .print-paper [class*="badge"],
.status-print-overlay .print-paper [class*="gantt-bar"],
.status-print-overlay .print-paper .print-toolbar,
.status-print-overlay .print-paper .print-toolbar * { color: unset !important; }
/* rpt-data-table 헤더는 흰색 유지 */
.status-print-overlay .rpt-data-table thead th { color: #ffffff !important; }
/* wbs print 헤더도 흰색 유지 */
.status-print-overlay [class*="wbs-print"] thead th { color: #ffffff !important; }

/* WBS 제목: 흰색 텍스트 유지 (scoped CSS 우선순위 극복) */
/* ===== 인쇄 미리보기: 다크 테마여도 라이트 모드로 표시 =====
   ProjectDetail.razor에서 data-theme="light" 속성 사용으로
   모든 dark theme CSS가 무시되고 light mode 스타일 그대로 적용됨

   따라서 production.css의 dark theme 규칙은 필요 없음!
   인쇄는 항상 light mode와 동일하게 표시됨 ✅
*/

[data-theme="dark"] .status-print-overlay .print-paper .text-muted,
[data-theme="dark"] .status-print-overlay .print-paper small {
    color: #64748b !important;
}

.print-toolbar {
    position: sticky;
    top: 0;
    background: #1a1a2e;
    color: #fff;
    padding: 12px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 다크 테마에서도 프린트 도구 바는 동일 */
[data-theme="dark"] .print-toolbar {
    background: #1a1a2e !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.print-title-bar { font-size: 14px; font-weight: 600; display: flex; align-items: center; color: #ffffff; }

/* 다크 테마에서도 제목 색상 흰색 */
[data-theme="dark"] .print-title-bar {
    color: #ffffff !important;
}
.print-toolbar-btns { display: flex; gap: 8px; }

.btn-do-print {
    padding: 8px 20px;
    background: #217346;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-do-print:hover { background: #1a5c38; }

/* 다크 테마에서도 프린트 버튼 스타일 유지 */
[data-theme="dark"] .btn-do-print {
    background: #217346 !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-do-print:hover { background: #1a5c38 !important; }

.btn-do-pdf {
    padding: 8px 20px;
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-do-pdf:hover { background: #922b21; }

/* 다크 테마에서도 PDF 버튼 스타일 유지 */
[data-theme="dark"] .btn-do-pdf {
    background: #c0392b !important;
    color: #fff !important;
}
[data-theme="dark"] .btn-do-pdf:hover { background: #922b21 !important; }

.btn-close-print {
    padding: 8px 20px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-close-print:hover { background: rgba(255,255,255,0.1); }

/* 다크 테마에서도 닫기 버튼 스타일 유지 */
[data-theme="dark"] .btn-close-print {
    /*background: #666 !important;*/
    color: #fff !important;
    border-color: rgba(255,255,255,0.35) !important;
}
/*[data-theme="dark"] .btn-close-print:hover { background: #555 !important; }*/

.print-paper {
    max-width: 900px;
    margin: 28px auto 60px;
    background: #fff;
    padding: 52px;
    border-radius: 4px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    color: #111;
    font-size: 13px;
}

.rpt-header {
    text-align: center;
    margin-bottom: 36px;
    border-bottom: 2px solid #1a1a2e;
    padding-bottom: 20px;
}

.rpt-company { font-size: 12px; color: #666; margin-bottom: 4px; letter-spacing: 1px; }
.rpt-title   { font-size: 22px; font-weight: 700; color: #1a1a2e; margin: 8px 0; }
.rpt-meta    { font-size: 12px; color: #666; }
.rpt-section { margin-bottom: 32px; }
.rpt-footer  { margin-top: 40px; padding-top: 12px; border-top: 1px solid #ccc; text-align: center; font-size: 11px; color: #888; }

/* 인쇄미리보기 내부 요소 — 모든 테마에서 라이트 모드 강제 */
.status-print-overlay .print-paper {
    background: #ffffff !important;
    color: #111111 !important;
}
.status-print-overlay .rpt-company,
.status-print-overlay .rpt-meta,
.status-print-overlay .rpt-footer {
    color: #666666 !important;
}
.status-print-overlay .rpt-title {
    color: #1a1a2e !important;
}
.status-print-overlay .rpt-header {
    border-bottom-color: #1a1a2e !important;
}
/* 테이블 라이트 모드 강제 */
.status-print-overlay .mgmt-table thead th {
    background: #f1f3f5 !important;
    color: #374151 !important;
    border-color: #dee2e6 !important;
}
.status-print-overlay .mgmt-table tbody td {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: #dee2e6 !important;
}
.status-print-overlay .mgmt-table tbody tr:nth-child(even) td {
    background: #f8fafc !important;
}

/* ✅ 제거됨: data-theme="light" 사용으로 불필요 */

/* QR/바코드 라벨 인쇄 팝업도 항상 흰 배경 */
#label-preview canvas,
#label-preview svg {
    background: #ffffff !important;
}

@media print {
    /* ── 배경색 인쇄 강제 (전역) ─────────────────────────────────────────────
       브라우저 기본값은 배경색/이미지 인쇄 차단.
       모든 요소에 색상 인쇄를 허용해야 테이블 헤더·배지·배경색이 출력됨. */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .no-print { display: none !important; }

    /* ── 오버레이 인쇄 모드: visibility 기법 ──────────────────────────────────
       .status-print-overlay 는 body 직계 자식이 아닌 Blazor 컴포넌트 내부에
       중첩되어 있으므로 display:none 직계 자식 방식은 동작하지 않음.
       visibility: hidden 으로 모든 요소를 투명하게 만든 후
       overlay 와 그 하위만 visible 로 복원하는 표준 기법을 사용. */
    body.has-print-overlay * {
        visibility: hidden !important;
    }
    body.has-print-overlay .status-print-overlay {
        visibility: visible !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        overflow: visible !important;
    }
    body.has-print-overlay .status-print-overlay * {
        visibility: visible !important;
    }

    .status-print-overlay {
        position: static;
        background: #ffffff;
        color: #1e293b !important;
        /* 인쇄 시 CSS 변수 강제 */
        --text-primary:   #1e293b;
        --text-secondary: #64748b;
        --text-muted:     #94a3b8;
        --bg-surface:     #ffffff;
        --bg-main:        #f8fafc;
        --border-color:   #e5e7eb;
        color-scheme: light;
    }
    /* 인쇄 시 모든 텍스트 강제 검정 (다크모드 override) */
    .status-print-overlay *:not(.type-badge):not(.role-badge):not([class*="badge"]):not(.gantt-bar):not(.gantt-bar-plan):not(.gantt-print-bar):not(.gantt-print-bar-plan) {
        color: #1e293b !important;
    }
    .status-print-overlay .text-muted {
        color: #64748b !important;
    }
    .print-paper {
        max-width: none;
        margin: 0;
        padding: 15mm;
        box-shadow: none;
        background: #ffffff !important;
        color: #1e293b !important;
    }
    /* 인쇄 시 테이블도 라이트 강제 */
    .mgmt-table thead th,
    .status-print-overlay thead th,
    .wbs-print-table thead th {
        background: #f1f3f5 !important;
        color: #374151 !important;
    }
    .mgmt-table tbody td,
    .status-print-overlay tbody td,
    .wbs-print-table tbody td {
        background: #ffffff !important;
        color: #1e293b !important;
    }
}

/* ── 반응형 ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .summary-strip { gap: 8px; }
    .strip-card { min-width: 100px; }
    .field-grid { grid-template-columns: 1fr; }
    .modal-body-grid { grid-template-columns: 1fr; }
    .field-item.full-span { grid-column: span 1; }
    .modal-panel.modal-lg,
    .modal-panel.modal-xl { width: 95vw !important; }
}

@media (max-width: 480px) {
    .modal-panel.modal-sm { width: 95vw !important; }
    .print-paper { padding: 20px; }
}

/* =========================================================================
   이하 기존 생산관리 전용 CSS (피벗, KPI, 검사 등)
   ========================================================================= */

/* ── 피벗 테이블 ─────────────────────────────────────────────────────────── */
.pivot-table th,
.pivot-table td {
    font-size: 0.8rem;
    padding: 6px 7px;
}

.pivot-plan {
    background: #f8f9ff !important;
    color: #1a56db !important;
}

.pivot-actual {
    background: #f0fdf4 !important;
    color: #166534 !important;
}

.pivot-total {
    background: #fff8f0 !important;
}

.pivot-total-cell {
    background: #fff8f0 !important;
    font-weight: 600;
}

.pivot-sum-row td {
    background: #f0f2f5 !important;
    font-weight: 700;
    border-top: 2px solid var(--border-color, #dee2e6);
}

/* ── 달성률 배지 ─────────────────────────────────────────────────────────── */
.achiev-high { color: #16a34a; font-weight: 700; }
.achiev-mid  { color: #ca8a04; font-weight: 600; }
.achiev-low  { color: #dc2626; font-weight: 600; }

/* ── 일일계획 상태 배지 (status-badge 위에 추가 색상) ─────────────────────── */
.status-badge.status-plan   { background: #dbeafe; color: #1d4ed8; }
.status-badge.status-wip    { background: #fef3c7; color: #92400e; }
.status-badge.status-done   { background: #dcfce7; color: #166534; }
.status-badge.status-cancel { background: #f3f4f6; color: #6b7280; }

/* ── KPI 카드 (생산일보, 연간계획) ──────────────────────────────────────── */
.prod-kpi-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.prod-kpi-card {
    flex: 1;
    min-width: 130px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* summary-strip 안에 prod-kpi-card 쓸 때 override */
.summary-strip .prod-kpi-card {
    border-radius: 8px;
    padding: 10px 14px;
}

.prod-kpi-card.kpi-actual    { border-top: 3px solid #2e7d32; }
.prod-kpi-card.kpi-rate      { border-top: 3px solid #1565c0; }
.prod-kpi-card.kpi-rate-good { border-top: 3px solid #2e7d32; background: #f0fdf4; }
.prod-kpi-card.kpi-rate-mid  { border-top: 3px solid #e65100; background: #fff3e0; }
.prod-kpi-card.kpi-rate-bad  { border-top: 3px solid #b71c1c; background: #fce4ec; }

.kpi-label {
    font-size: 0.78rem;
    color: var(--text-muted, #6c757d);
    margin-bottom: 6px;
    font-weight: 500;
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #212529);
}

.summary-strip .kpi-value { font-size: 1.1rem; }

.kpi-unit {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted, #6c757d);
    margin-left: 2px;
}

/* ── 검사항목 섹션 ───────────────────────────────────────────────────────── */
.insp-check-section {
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 12px;
}

.insp-check-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--table-header-bg, #f0f2f5);
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.insp-check-table { min-width: 400px; }
.insp-check-table th,
.insp-check-table td { padding: 6px 10px; font-size: 0.82rem; }

/* ── 검사 결과 배지 ──────────────────────────────────────────────────────── */
.insp-result-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.insp-pass { background: #e8f5e9; color: #2e7d32; }
.insp-fail { background: #fce4ec; color: #b71c1c; }
.insp-cond { background: #fff3e0; color: #e65100; }
.insp-none { background: #f5f5f5; color: #757575; }

/* ── 검사 항목 판정 select ───────────────────────────────────────────────── */
.check-pass { border-color: #4caf50 !important; color: #2e7d32 !important; }
.check-fail { border-color: #f44336 !important; color: #b71c1c !important; }

/* ── 초중종물 탭 ─────────────────────────────────────────────────────────── */
.insp-article-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--border-color, #dee2e6);
}

.insp-article-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted, #6c757d);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.insp-article-tab:hover { color: var(--primary-color, #0d6efd); }

.insp-article-tab.active {
    color: var(--primary-color, #0d6efd);
    border-bottom-color: var(--primary-color, #0d6efd);
    font-weight: 700;
}

.insp-tab-count {
    background: var(--border-color, #dee2e6);
    color: var(--text-secondary, #495057);
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.insp-article-tab.active .insp-tab-count {
    background: var(--primary-color, #0d6efd);
    color: #fff;
}

/* ── 초중종물 구분 배지 ──────────────────────────────────────────────────── */
.article-type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.article-first { background: #e3f2fd; color: #1565c0; }
.article-mid   { background: #f3e5f5; color: #6a1b9a; }
.article-last  { background: #e8f5e9; color: #2e7d32; }

/* ── 주간 날짜 범위 라벨 ─────────────────────────────────────────────────── */
.prod-week-label {
    font-size: 0.82rem;
    color: var(--text-muted, #6c757d);
    font-style: italic;
}

/* ── 반응형 ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .prod-kpi-card { min-width: 100px; }
    .kpi-value { font-size: 1.2rem; }
    .insp-article-tabs { flex-wrap: wrap; }
    .pivot-table th,
    .pivot-table td { font-size: 0.72rem; padding: 4px 5px; }
}

/* ==========================================================================
   다크 테마 오버라이드 — 생산관리 전용
   ========================================================================== */

/* 피벗 테이블 컬럼 색상 */
[data-theme="dark"] .pivot-plan {
    background: rgba(29, 78, 216, 0.14) !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .pivot-actual {
    background: rgba(22, 101, 52, 0.14) !important;
    color: #86efac !important;
}
[data-theme="dark"] .pivot-total,
[data-theme="dark"] .pivot-total-cell {
    background: rgba(120, 53, 15, 0.14) !important;
}
[data-theme="dark"] .pivot-sum-row td {
    background: var(--bg-main) !important;
    border-top-color: var(--border-color) !important;
}

/* KPI 카드 */
[data-theme="dark"] .prod-kpi-card {
    background: var(--bg-surface);
    border-color: var(--border-color);
}
[data-theme="dark"] .prod-kpi-card.kpi-rate-good { background: rgba(22, 163, 74, 0.10); }
[data-theme="dark"] .prod-kpi-card.kpi-rate-mid  { background: rgba(230, 81, 0, 0.10); }
[data-theme="dark"] .prod-kpi-card.kpi-rate-bad  { background: rgba(183, 28, 28, 0.10); }

/* 달성률 텍스트 (achiev-* 는 색상만 유지, 배경 없음 → 다크 유지) */

/* 일일계획 상태 배지 */
[data-theme="dark"] .status-badge.status-plan   { background: rgba(29, 78, 216, 0.15); color: #93c5fd; border-color: rgba(147,197,253,0.2); }
[data-theme="dark"] .status-badge.status-wip    { background: rgba(146, 64, 14, 0.15); color: #fcd34d; border-color: rgba(252,211,77,0.2); }
[data-theme="dark"] .status-badge.status-done   { background: rgba(22, 101, 52, 0.15); color: #86efac; border-color: rgba(134,239,172,0.2); }
[data-theme="dark"] .status-badge.status-cancel { background: var(--bg-main); color: var(--text-muted); border-color: var(--border-color); }

/* 검사 결과 배지 */
[data-theme="dark"] .insp-pass { background: rgba(46, 125, 50, 0.15); color: #86efac; }
[data-theme="dark"] .insp-fail { background: rgba(183, 28, 28, 0.15); color: #fca5a5; }
[data-theme="dark"] .insp-cond { background: rgba(230, 81, 0, 0.15);  color: #fdba74; }
[data-theme="dark"] .insp-none { background: var(--bg-main); color: var(--text-muted); }

/* 검사항목 섹션 */
[data-theme="dark"] .insp-check-section  { border-color: var(--border-color); }
[data-theme="dark"] .insp-check-header   { background: var(--bg-main); border-bottom-color: var(--border-color); }

/* 초중종물 탭 */
[data-theme="dark"] .insp-article-tabs       { border-bottom-color: var(--border-color); }
[data-theme="dark"] .insp-article-tab        { color: var(--text-muted); }
[data-theme="dark"] .insp-article-tab:hover  { color: var(--accent); }
[data-theme="dark"] .insp-article-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .insp-tab-count          { background: var(--bg-main); color: var(--text-secondary); }
[data-theme="dark"] .insp-article-tab.active .insp-tab-count { background: var(--accent); color: #fff; }

/* 초중종물 구분 배지 */
[data-theme="dark"] .article-first { background: rgba(21, 101, 192, 0.15); color: #93c5fd; }
[data-theme="dark"] .article-mid   { background: rgba(106, 27, 154, 0.15); color: #d8b4fe; }
[data-theme="dark"] .article-last  { background: rgba(46, 125, 50, 0.15);  color: #86efac; }

/* 판정 select */
[data-theme="dark"] .check-pass { border-color: #4ade80 !important; color: #4ade80 !important; }
[data-theme="dark"] .check-fail { border-color: #f87171 !important; color: #f87171 !important; }

/* ──────────────────────────────────────────
   주간생산계획 — 주간 날짜 범위 선택기
────────────────────────────────────────── */
.week-range-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 12px;
}

.week-range-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.week-range-sep {
    color: var(--text-muted);
    font-weight: 500;
}

.week-date-input {
    border: none !important;
    background: transparent !important;
    padding: 2px 4px !important;
    font-size: 13px !important;
    min-width: 130px;
    max-width: 140px;
    box-shadow: none !important;
    color: var(--text-primary);
}

.week-date-input:read-only {
    color: var(--accent);
    font-weight: 600;
    cursor: default;
}

.week-badge {
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* 이전/다음 주 네비게이션 버튼 */
.btn-week-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.btn-week-nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* 다크 테마 */
[data-theme="dark"] .week-range-picker {
    background: var(--bg-surface);
    border-color: var(--border-color);
}
[data-theme="dark"] .week-date-input {
    background: transparent !important;
    color: var(--text-primary);
}
[data-theme="dark"] .week-date-input:read-only {
    color: var(--accent);
}
[data-theme="dark"] .btn-week-nav {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .btn-week-nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ── 안전재고 미달 알림 패널 (StockStatus.razor) ──────────────────────────── */
.safety-alert-panel {
    background: #fff8f0;
    border: 1.5px solid #f97316;
    border-left: 5px solid #f97316;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    animation: safetyAlertIn 0.25s ease;
}

@keyframes safetyAlertIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.safety-alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff3e0;
    border-bottom: 1px solid #fed7aa;
    font-size: 14px;
    color: #9a3412;
    font-weight: 600;
    gap: 8px;
}

.safety-alert-count {
    color: #dc2626;
    font-size: 15px;
}

.safety-alert-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: #9a3412;
    opacity: 0.7;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.safety-alert-dismiss:hover { opacity: 1; background: rgba(249,115,22,0.15); }

.safety-alert-body {
    padding: 10px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.safety-alert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid #fed7aa;
    border-radius: 7px;
    font-size: 13px;
    flex-wrap: wrap;
}

.safety-item-code { flex-shrink: 0; }
.safety-item-name { flex: 1; min-width: 120px; font-weight: 600; color: var(--text-primary, #1e293b); }
.safety-item-stock { white-space: nowrap; color: var(--text-muted, #64748b); }
.safety-item-sep { color: var(--border-color, #e5e7eb); }
.safety-item-safe { white-space: nowrap; color: var(--text-muted, #64748b); }

.safety-item-short {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 700;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fee2e2;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
}

.safety-alert-more {
    font-size: 12px;
    color: #9a3412;
    padding: 4px 10px;
    text-align: center;
    background: #fff3e0;
    border-radius: 6px;
    border: 1px dashed #f97316;
}

/* 다크 테마 */
[data-theme="dark"] .safety-alert-panel {
    background: rgba(249,115,22,0.08);
    border-color: #f97316;
}
[data-theme="dark"] .safety-alert-header {
    background: rgba(249,115,22,0.12);
    border-bottom-color: rgba(249,115,22,0.3);
    color: #fdba74;
}
[data-theme="dark"] .safety-alert-count { color: #f87171; }
[data-theme="dark"] .safety-alert-dismiss { color: #fdba74; }
[data-theme="dark"] .safety-alert-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(249,115,22,0.3);
}
[data-theme="dark"] .safety-item-short {
    background: rgba(220,38,38,0.2);
    color: #f87171;
}
[data-theme="dark"] .safety-alert-more {
    background: rgba(249,115,22,0.08);
    border-color: rgba(249,115,22,0.4);
    color: #fdba74;
}

/* ── 네비게이션 결재대기 뱃지 (MenuNode.razor) ────────────────────────────── */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    margin-left: auto;
    line-height: 1;
    flex-shrink: 0;
    animation: badgePop 0.2s ease;
}

/* 축소 사이드바용 - 아이콘 우상단에 작은 빨간 점 */
.nav-badge-dot {
    position: absolute;
    top: -3px;
    right: -4px;
    width: 8px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid var(--sidebar-bg, #1e293b);
}

@keyframes badgePop {
    0%   { transform: scale(0.5); opacity: 0; }
    80%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════
   표준 폼 패널 — HR·문서 입력 페이지 공통 레이아웃
   (hr-form-card 계열의 표준 대체 클래스)
════════════════════════════════════════════════════════════════ */

/* ── 폼 카드 패널 ── */
.form-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.form-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
    gap: 10px;
    flex-wrap: wrap;
}
.form-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── 필드 그리드 ── */
.form-field-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; margin-bottom: 18px; }
.form-field-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; margin-bottom: 18px; }
.form-field        { display: flex; flex-direction: column; gap: 5px; }
.form-field label  { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.form-field-span2  { grid-column: span 2; }
.form-field-span3  { grid-column: span 3; }

/* ── 반려 안내 박스 ── */
.form-reject-notice {
    background: #fce4ec;
    border: 1px solid #ef9a9a;
    color: #c62828;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ── 폼 하단 액션 버튼 영역 ── */
.form-panel-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

/* ── 폼 액션 버튼 ── */
.btn-form-save   { padding: 9px 22px; background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-form-save:hover { opacity: 0.9; }
.btn-form-save:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-form-submit { padding: 9px 22px; background: #2e7d32; color: #fff; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-form-submit:hover { background: #1b5e20; }
.btn-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-form-del    { padding: 9px 22px; background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-form-del:hover { background: #c62828; color: #fff; }
.btn-form-cancel { padding: 9px 22px; background: var(--bg-main); color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-form-cancel:hover { background: var(--hover-bg); }

/* ── 목록 섹션 (입력 폼 하단) ── */
.mgmt-list-section { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; }
.mgmt-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-main);
    flex-wrap: wrap;
    gap: 8px;
}
.mgmt-list-head span { font-size: 13.5px; font-weight: 700; }

/* ── 강조 스트립 카드 (잔여 연차 등 중요 수치 강조) ── */
.strip-card-accent {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
}
.strip-card-accent .strip-label { color: rgba(255,255,255,0.85); }
.strip-card-accent .strip-value { color: #fff; }

/* ── 반응형 ── */
@media (max-width: 768px) {
    .form-field-grid   { grid-template-columns: 1fr 1fr; }
    .form-field-grid-2 { grid-template-columns: 1fr; }
    .form-field-span2, .form-field-span3 { grid-column: span 1; }
}
@media (max-width: 480px) {
    .form-field-grid { grid-template-columns: 1fr; }
    .form-field-span2 { grid-column: span 1; }
}

/* ── 다크 테마 ── */
[data-theme="dark"] .form-reject-notice {
    background: rgba(198,40,40,0.15);
    border-color: rgba(239,154,154,0.3);
    color: #ef9a9a;
}
[data-theme="dark"] .btn-form-del {
    background: rgba(198,40,40,0.15);
    color: #ef9a9a;
    border-color: rgba(239,154,154,0.3);
}
[data-theme="dark"] .btn-form-del:hover { background: #c62828; color: #fff; }
[data-theme="dark"] .btn-form-cancel { background: var(--bg-main); border-color: var(--border-color); }

/* ════════════════════════════════════════════════════════════════
   폼 명세 영역 — 구매/발주 등 품목 상세 테이블 섹션
════════════════════════════════════════════════════════════════ */

/* ── 명세 영역 컨테이너 ── */
.form-detail-area { margin-bottom: 18px; }
.form-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 10px 0;
    margin-bottom: 8px;
}
.form-detail-head span { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }

/* ── 명세 행 추가 버튼 ── */
.btn-detail-add {
    padding: 5px 14px;
    background: none;
    border: 1.5px dashed var(--border-color);
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}
.btn-detail-add:hover { border-color: #667eea; color: #667eea; background: #f5f0ff; }

/* ── 발주완료 처리 버튼 ── */
.btn-form-dispatch {
    padding: 9px 22px;
    background: linear-gradient(135deg, #43a047, #2e7d32);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-form-dispatch:hover { opacity: 0.88; }
.btn-form-dispatch:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 문서 출력 버튼 ── */
.btn-doc {
    padding: 8px 14px;
    background: #37474f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.btn-doc:hover { background: #263238; }
.btn-doc:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 연관 문서 참조 배지 ── */
.ref-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    margin-left: 6px;
}

/* ── 품목코드 셀 (입력 + 검색버튼 인라인) ── */
.item-code-cell { display: flex; gap: 4px; align-items: center; }

/* ── 전역 뱃지 — type-badge + 색상 조합 ────────────────────────────────── */
/* 모든 페이지에서 사용. 스코프 CSS 없이도 동작하도록 production.css에 전역 정의 */
.type-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-blue   { background: #e3f2fd; color: #1565c0; }
.badge-green  { background: #e8f5e9; color: #2e7d32; }
.badge-red    { background: #fce4ec; color: #c62828; }
.badge-orange { background: #fff3e0; color: #e65100; }
.badge-purple { background: #f3e5f5; color: #6a1b9a; }
.badge-gray   { background: #eceff1; color: #546e7a; }
.badge-teal   { background: #e0f2f1; color: #00695c; }

/* ── 전역 토스트 — 모달 위에 항상 표시 ── */
.mgmt-toast {
    position: fixed;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 10px;
    min-width: 280px;
    max-width: 520px;
    width: max-content;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    animation: toastIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
    white-space: pre-wrap;
    word-break: break-word;
}
.toast-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.toast-error   { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }
.toast-warn    { background: #fff8e1; color: #e65100; border: 1px solid #ffcc80; }
@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.95); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1);    }
}

/* ── 전역 진행률 바 ── */
.progress-bar-wrap {
    flex: 1; height: 8px; background: var(--border-color);
    border-radius: 4px; overflow: hidden;
}
.progress-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s; }

/* ── 다크 테마 뱃지 ── */
[data-theme="dark"] .badge-blue   { background: rgba(21,101,192,0.2);  color: #90caf9; }
[data-theme="dark"] .badge-green  { background: rgba(46,125,50,0.2);   color: #a5d6a7; }
[data-theme="dark"] .badge-red    { background: rgba(198,40,40,0.2);   color: #ef9a9a; }
[data-theme="dark"] .badge-orange { background: rgba(230,81,0,0.2);    color: #ffcc80; }
[data-theme="dark"] .badge-purple { background: rgba(106,27,154,0.2);  color: #ce93d8; }
[data-theme="dark"] .badge-gray   { background: rgba(84,110,122,0.2);  color: #b0bec5; }
[data-theme="dark"] .badge-teal   { background: rgba(0,105,92,0.2);    color: #80cbc4; }
[data-theme="dark"] .toast-success { background: rgba(46,125,50,0.2);  color: #a5d6a7; border-color: rgba(165,214,167,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
[data-theme="dark"] .toast-error   { background: rgba(198,40,40,0.2);  color: #ef9a9a; border-color: rgba(239,154,154,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
[data-theme="dark"] .toast-warn    { background: rgba(230,81,0,0.2);   color: #ffcc80; border-color: rgba(255,204,128,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }

/* ── 다크 테마 ── */
[data-theme="dark"] .ref-badge { background: rgba(21,101,192,0.2); border-color: rgba(144,202,249,0.3); color: #90caf9; }
[data-theme="dark"] .btn-doc { background: #455a64; }
[data-theme="dark"] .btn-doc:hover { background: #37474f; }
[data-theme="dark"] .btn-detail-add:hover { border-color: #9f7aea; color: #9f7aea; background: rgba(102,126,234,0.08); }

/* ── 헤더 조회 조건 표준 클래스 ── */
.date-input {
    max-width: 140px !important;
    width: auto !important;
    font-size: 13px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

.date-sep {
    color: var(--text-muted);
    font-size: 13px;
    flex-shrink: 0;
    margin: 0 4px;
}

.search-input {
    max-width: 240px !important;
    flex-grow: 1;
    font-size: 13px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

.filter-select {
    min-width: 110px !important;
    font-size: 13px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

.conv-search .search-input,
.friend-search .search-input {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.conversation-list-container .conv-search,
.friend-list-container .friend-search {
    width: 100% !important;
    box-sizing: border-box !important;
}

.conversation-list-container .conv-item {
    grid-template-columns: 48px minmax(0, 1fr) minmax(42px, auto) !important;
}

.conversation-list-container .conv-side {
    align-self: stretch !important;
    min-width: 42px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 12px !important;
}

.conversation-list-container .conv-type-badge {
    margin-left: auto !important;
}

.conversation-list-container .conv-time {
    text-align: right !important;
}

[data-theme="dark"] .date-input {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .date-sep {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .search-input {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .filter-select {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ── 요약 카드 강조 (폰트 색상만) ────────────────────────────────────────── */
.strip-active .strip-value {
    color: #0d6efd !important;
    font-weight: 700 !important;
}

.strip-product .strip-value {
    color: #198754 !important;
    font-weight: 700 !important;
}