/* ===================================================================
   진행 중 작업지시 보드 (WorkProgressBoard.razor)

   컴포넌트 안의 <style> 이었는데, 한 화면에서 보드를 세 번 쓰게 되면서
   (오늘 기록 한 줄 + 생산 + 수리) 같은 CSS 가 DOM 에 세 벌 들어갔다.
   2026-09-22 에 여기로 옮겼다.

   index.html 에서 density.css 뒤에 읽는다. 전에는 본문 안의 <style> 이라
   head 의 전역 CSS 보다 뒤였다 — 같은 순서를 지켜야 밀도 오버라이드에
   눌리지 않는다.
   =================================================================== */

.wb { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
/* 섹션 안에서는 카드 속 카드가 되지 않게 껍데기를 벗긴다 */
.wb.flat { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 12px; }
.wb.today-only { padding: 0; border: 0; background: transparent; margin: 0 0 10px; }
.wb.today-only .wb-today { margin-bottom: 0; }
.wb.today-only .wb-recent { margin: 8px 0 0; }
.wb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wb-title { font-size: 15px; font-weight: 800; color: #0f172a; margin: 0; }
.wb-count { font-size: 12px; color: #64748b; }
.wb-seg { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.wb-seg button { height: 28px; padding: 0 10px; border: 0; background: #fff; color: #475569; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.wb-seg button + button { border-left: 1px solid #cbd5e1; }
.wb-seg button.on { background: #0f172a; color: #fff; }
.wb-chip { height: 26px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #475569; font-size: 12px; font-weight: 700; cursor: pointer; }
.wb-chip.on { background: #e0f2fe; border-color: #0ea5e9; color: #0369a1; }
.wb-chip.warn.on { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.wb-search { height: 28px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 10px; font-size: 12.5px; min-width: 160px; }
.wb-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.wb-today { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; font-size: 12.5px; color: #334155; }
.wb-today b { font-size: 14px; color: #0f172a; }
.wb-today .k { color: #64748b; }
.wb-today button { margin-left: auto; height: 24px; border: 0; background: transparent; color: #0369a1; font-weight: 700; font-size: 12px; cursor: pointer; }
.wb-recent { border: 1px solid #e2e8f0; border-radius: 8px; max-height: 190px; overflow: auto; margin-bottom: 8px; font-size: 12.5px; }
.wb-recent div { display: grid; grid-template-columns: 48px 70px 1fr auto; gap: 8px; padding: 4px 10px; border-bottom: 1px solid #f1f5f9; align-items: center; }
.wb-recent div:last-child { border-bottom: 0; }
.wb-recent .t { color: #64748b; font-variant-numeric: tabular-nums; }
.wb-recent .a { font-weight: 800; }
.wb-recent .a.s { color: #15803d; } .wb-recent .a.c { color: #1d4ed8; } .wb-recent .a.p { color: #b45309; }
.wb-recent .w { color: #64748b; font-size: 11.5px; }

.wb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wb-table th { background: #eef2f7; color: #475569; font-size: 11.5px; font-weight: 700; padding: 6px 8px; border-bottom: 2px solid #cbd5e1; text-align: left; white-space: nowrap; }
.wb-table td { padding: 5px 8px; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
.wb-table tr.wb-row { cursor: pointer; }   /* "row" 는 Bootstrap 그리드와 겹쳐 셀이 세로로 늘어선다 */
.wb-table tr.wb-row:hover td { background: #f0f9ff; }
.wb-table tr.stale td { background: #fffbeb; }
.wb-table tr.hl td { background: #fef9c3 !important; }
.wb-table tr.hl td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
.wb-notice { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; margin-bottom: 8px; }
.wb-no { font-family: Consolas, monospace; font-weight: 800; color: #0f172a; white-space: nowrap; }
.wb-sub { color: #64748b; font-size: 11.5px; white-space: nowrap; }
.wb-item { display: inline-block; font-size: 11px; font-weight: 800; color: #0369a1; background: #e0f2fe; border-radius: 4px; padding: 0 6px; margin-right: 6px; }
.wb-item.r { color: #92400e; background: #fef3c7; }

.wb-strip { display: flex; gap: 3px; align-items: center; }
.wb-st { min-width: 46px; text-align: center; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 4px; font-size: 10.5px; color: #94a3b8; line-height: 1.25; background: #fff; }
.wb-st .m { display: block; font-size: 12px; font-weight: 900; line-height: 1.1; }
.wb-st.done { color: #15803d; border-color: #86efac; background: #f0fdf4; }
.wb-st.run { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
.wb-st.pause { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.wb-st.cur { outline: 2px solid #0f172a; outline-offset: -1px; color: #0f172a; }
.wb-arrow { color: #cbd5e1; font-size: 10px; }

.wb-last { white-space: nowrap; color: #334155; }
.wb-last .w { color: #64748b; font-size: 11.5px; }
.wb-stale { display: inline-block; font-size: 11px; font-weight: 800; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.wb-stale.hard { color: #991b1b; background: #fee2e2; }
.wb-empty { padding: 18px; text-align: center; color: #94a3b8; font-size: 13px; }
.wb-scroll { overflow-x: auto; }

@media (max-width: 900px) {
    .wb-table th:nth-child(4), .wb-table td:nth-child(4) { display: none; }   /* 마지막 기록은 폰에서 숨김(정지 배지는 남김) */
    .wb-st { min-width: 36px; font-size: 9.5px; }
}
/* 폰(≤560px): 표 → 카드. 행 하나가 카드, 정지 배지는 오른쪽 위, 마지막 기록은 다시 보이게 */
@media (max-width: 560px) {
    .wb { padding: 10px; }
    .wb-right { margin-left: 0; width: 100%; }
    .wb-search { flex: 1; min-width: 0; }
    .wb-scroll { overflow: visible; }
    .wb-table thead { display: none; }
    .wb-table, .wb-table tbody, .wb-table tr, .wb-table td { display: block; width: 100%; box-sizing: border-box; }
    .wb-table tr.wb-row { position: relative; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px 8px 12px; margin-bottom: 8px; background: #fff; }
    .wb-table tr.stale { background: #fffbeb; }
    .wb-table tr.hl { background: #fef9c3; border-color: #f59e0b; }
    .wb-table td, .wb-table tr.stale td, .wb-table tr.hl td { padding: 2px 0; border-bottom: 0; background: transparent !important; box-shadow: none !important; }
    .wb-table td:nth-child(4) { display: block; }
    .wb-table td:nth-child(3)::before { content: '현재  '; color: #94a3b8; }
    .wb-table td:nth-child(5) { position: absolute; top: 8px; right: 10px; width: auto; padding: 0; }
    .wb-table td:first-child { padding-right: 84px; }
    .wb-last div { display: inline; } .wb-last .w { margin-left: 6px; }
    .wb-no, .wb-sub, .wb-last { white-space: normal; }
    .wb-strip { flex-wrap: wrap; gap: 3px; margin: 4px 0 2px; }
    .wb-arrow { display: none; }
    .wb-st { min-width: 44px; font-size: 9.5px; }
}