/* ===== 업무요청 — cs2 컬러 시스템 적용 (페이지 스코프 한정) =====
   기존 클래스명 유지, #page-tasks 안에서 변수만 오버라이드.
   다른 페이지에는 영향 없음. */
#page-tasks{
  /* cs2 토큰 정의 */
  --cs2-bg:#FFFFFF;
  --cs2-surface:#FFFFFF;
  --cs2-bg-2:#F5F5F5;
  --cs2-bg-chat:#FAFAFA;
  --cs2-border:#EAEAEA;
  --cs2-border-strong:#D4D4D4;
  --cs2-ink:#1A1A1A;
  --cs2-ink-2:#3A3A3A;
  --cs2-ink-3:#6B6B6B;
  --cs2-muted:#9A9A9A;
  --cs2-muted-2:#C4C4C4;
  --cs2-danger:#D14343;
  --cs2-danger-bg:#FDECEC;
  --cs2-warn-bg:#FEF3DA;
  --cs2-warn-ink:#7A4A08;
  --cs2-info-bg:#E6F1FB;
  --cs2-info-ink:#1565C0;
  --cs2-ok-bg:#E1F5EE;
  --cs2-ok-ink:#0F6E56;
  --cs2-purple-bg:#EEEDFE;
  --cs2-purple-ink:#3C3489;
  --cs2-accent:#D97706;
  --cs2-accent-hover:#B45309;
  --cs2-accent-soft:#FEF3DA;
  --cs2-accent-softer:#FFFBF0;
  --cs2-success:#0F6E56;
  --cs2-success-hover:#0A5942;

  /* 기존 변수 → cs2 매핑 (페이지 스코프 안에서만 덮어쓰기) */
  --bg:#FFFFFF;
  --bg2:#F5F5F5;
  --bg3:#FFFFFF;
  --border:#EAEAEA;
  --border2:#D4D4D4;
  --txt:#1A1A1A;
  --txt2:#3A3A3A;
  --txt3:#6B6B6B;
  --green:#D97706;
  --green-bg:#FEF3DA;
}
/* 다크모드 */
body.dark #page-tasks{
  --cs2-bg:#1a1917;
  --cs2-surface:#242220;
  --cs2-bg-2:#2d2b28;
  --cs2-border:#3a3733;
  --cs2-border-strong:#4d4a45;
  --cs2-ink:#EDEAE4;
  --cs2-ink-2:#C8C4BC;
  --cs2-ink-3:#9A9690;
  --cs2-muted:#6F6C67;
  --cs2-muted-2:#4f4c47;
  --bg:#1a1917;
  --bg2:#2d2b28;
  --bg3:#242220;
  --border:#3a3733;
  --border2:#4d4a45;
  --txt:#EDEAE4;
  --txt2:#C8C4BC;
  --txt3:#9A9690;
}
/* 페이지 자체 배경 (--bg 베이지가 부모 body에서 잡혀있어서 명시 필요) */
#page-tasks{background:var(--cs2-bg)}

/* ===== 페이지 전체 스크롤 모드 — 더 많은 행을 한눈에 ===== */
/* 페이지 컨테이너가 직접 스크롤. main/left/table-wrap의 내부 overflow는 해제.
   #page-tasks는 index.html에 인라인 style="overflow:hidden"이 박혀있어서 !important 필요 */
#page-tasks{overflow-y:auto!important;overflow-x:hidden!important}
#page-tasks .main{overflow:visible;flex:none;min-height:0}
#page-tasks .left{overflow:visible;flex:1 1 auto;min-height:0}
#page-tasks .table-wrap{flex:none;overflow:visible;padding-bottom:120px}
/* 헤더 / stats / 필터바를 페이지 상단에 sticky 고정 */
#page-tasks > .header{position:sticky;top:0;z-index:5;background:var(--cs2-bg)}
#page-tasks > .stats{position:sticky;top:73px;z-index:4;background:var(--cs2-bg)}
#page-tasks .left .filters{position:sticky;top:124px;z-index:3;background:var(--cs2-bg)}
/* 테이블 헤더는 필터바 바로 아래에 sticky — z-index:2 (패널(.right)보다 낮게) */
#page-tasks .table-wrap thead{top:172px;z-index:2}
/* 좌측 알림 패널(taskAlertPanel)은 자체 sticky */
#page-tasks #taskAlertPanel{position:sticky;top:124px;align-self:flex-start;max-height:calc(100vh - 140px);overflow-y:auto}
/* 모바일에서는 sticky top 값 조정 (헤더가 더 컴팩트) */
@media (max-width:760px){
  #page-tasks > .header{position:relative}
  #page-tasks > .stats,
  #page-tasks .left .filters,
  #page-tasks .table-wrap thead,
  #page-tasks #taskAlertPanel{position:relative;top:auto}
  #page-tasks .table-wrap{padding-bottom:80px}
}

/* 배지 셀은 ellipsis 해제 (글로벌 td에 overflow:hidden이 걸려있으므로 명시적 해제) */
#page-tasks td[data-field][data-type="select"]{overflow:visible;text-overflow:clip;white-space:nowrap}
/* 담당자 셀 넘침 방지 */
#page-tasks td[data-field="assignee"]{overflow:hidden;white-space:nowrap}
/* 내용(body) 컬럼 폭 강제 축소 */
#page-tasks td[data-field="body"]{max-width:120px}
/* 상세 패널이 sticky thead 위에 오도록 */
#page-tasks .right{z-index:10}

/* 주요 액션 버튼 (＋ 새로 만들기) — 앰버 톤 강제, hover는 한 단계 어둡게 */
#page-tasks .btn-new{background:var(--cs2-accent);color:#FFFFFF;border:none}
#page-tasks .btn-new:hover{background:var(--cs2-accent-hover)}
/* 보조 액션 버튼 (상황별 보기, 템플릿 관리) — 인라인 스타일을 덮어쓰기 위해 좀 더 강한 셀렉터 */
#page-tasks .header .btn-new[onclick*="openKanbanModal"],
#page-tasks .header .btn-new[onclick*="openTemplateManager"]{background:#FFFFFF;color:var(--cs2-ink-2);border:1px solid var(--cs2-border)}
#page-tasks .header .btn-new[onclick*="openKanbanModal"]:hover,
#page-tasks .header .btn-new[onclick*="openTemplateManager"]:hover{background:var(--cs2-bg-2);border-color:var(--cs2-border-strong)}

/* 활성 행 — 앰버 soft 틴트 (기존 그린 톤 덮어쓰기) */
#page-tasks tr.row-active td{background:var(--cs2-accent-softer)!important}
/* 짝수 행 stripe 제거 — 새 디자인은 깔끔한 흰 배경 */
#page-tasks tbody tr:nth-child(even) td{background:transparent}
#page-tasks tbody tr:hover td{background:var(--cs2-accent-softer)}
#page-tasks tbody tr.row-active:hover td{background:var(--cs2-accent-softer)!important}

/* 필터 칩 활성 시 앰버 라인 + 소프트 배경 */
#page-tasks .filter-tag.active{border-color:var(--cs2-accent);background:var(--cs2-accent-soft);color:var(--cs2-accent-hover)}

/* 일괄 액션바 색 톤 조정 */
#page-tasks .bulk-bar{background:var(--cs2-accent-soft)}
#page-tasks .bulk-count{color:var(--cs2-accent-hover)}
#page-tasks .bulk-btn:hover{border-color:var(--cs2-accent);color:var(--cs2-accent-hover)}

/* ===== 업무요청 (일괄 액션바) ===== */
.bulk-bar{display:flex;align-items:center;gap:10px;padding:10px 24px;border-bottom:1px solid var(--border);background:var(--green-bg)}
.bulk-count{font-size:14px;font-weight:700;color:var(--green)}
.bulk-btn{background:none;border:1px solid var(--border2);border-radius:6px;padding:6px 14px;font-size:13px;cursor:pointer;color:var(--txt);font-family:inherit;font-weight:600}
.bulk-btn:hover{border-color:var(--green);color:var(--green)}
.bulk-btn#bulkDelete{color:#E24B4A;border-color:rgba(226,75,74,0.3)}
.bulk-btn#bulkDelete:hover{background:#FCEBEB;border-color:#E24B4A}
.bulk-cancel{color:var(--txt3)}

/* ===== 업무요청 — 내 업무 패널 ===== */
.my-tasks-panel{background:var(--cs2-bg-chat,#FAFAFA);border-bottom:1px solid var(--cs2-border,#EAEAEA);padding:14px 24px 14px;flex-shrink:0;max-height:none;overflow:visible}
.my-tasks-panel.collapsed{padding:8px 24px;max-height:none}
.mtp-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.mtp-head-avatar{width:32px;height:32px;border-radius:50%;background:#CECBF6;color:#26215C;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.mtp-head-info{flex:1;min-width:0}
.mtp-head-title{font-size:13px;color:var(--txt2);font-weight:500}
.mtp-head-stats{display:flex;gap:14px;align-items:baseline;margin-top:3px;flex-wrap:wrap}
.mtp-head-stats .mtp-total{font-size:20px;font-weight:700;color:var(--txt)}
.mtp-head-stats .mtp-stat{font-size:12px;color:var(--txt3)}
.mtp-head-stats .mtp-stat b{font-weight:700;margin-left:2px}
.mtp-head-stats .mtp-urgent{font-size:12px;color:#B45309;font-weight:700}
.mtp-progress-wrap{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex-shrink:0}
.mtp-progress-lbl{font-size:11px;color:var(--txt3)}
.mtp-progress-bar{width:120px;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden}
.mtp-progress-fill{height:100%;background:var(--green);transition:width 0.3s ease}
.mtp-progress-txt{font-size:11px;color:var(--txt3)}
.mtp-collapse-btn{background:none;border:1px solid var(--border);border-radius:6px;width:26px;height:26px;cursor:pointer;color:var(--txt2);font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit;line-height:1}
.mtp-collapse-btn:hover{background:var(--bg2);color:var(--txt)}
.mtp-list{display:flex;flex-direction:column;gap:6px}
.mtp-card{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg3);border:1px solid var(--border);border-left:3px solid #B4B2A9;border-radius:6px;cursor:pointer;transition:all 0.12s;font-size:13px}
.mtp-card:hover{border-color:var(--border2);background:var(--bg)}
.mtp-card.urgent{border-left-color:#E24B4A}
.mtp-card.ing{border-left-color:#185FA5}
.mtp-card.ready{border-left-color:#B4B2A9}
.mtp-card.dimmed{opacity:0.65}
.mtp-card-icon{font-size:13px;width:14px;text-align:center;flex-shrink:0}
.mtp-card-title{flex:1;min-width:0;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtp-card-tag{padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600;flex-shrink:0}
.mtp-card-status{padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600;flex-shrink:0}
.mtp-card-dday{font-size:11px;font-weight:700;min-width:38px;text-align:right;flex-shrink:0;color:var(--txt3)}
.mtp-card-dday.urgent{color:#791F1F}
.mtp-card-dday.over{color:#791F1F}
.mtp-empty{padding:12px 0;font-size:12px;color:var(--txt3);text-align:center}
.mtp-more{padding:8px 0 0;font-size:11px;color:var(--txt3);text-align:center;cursor:pointer}
.mtp-more:hover{color:var(--green)}

/* ─── 내 업무 테이블 (아래 전체 테이블과 동일한 폭/스타일) ─── */
.my-tasks-panel{max-height:none;padding:14px 0 0}
.my-tasks-panel .mtp-head{padding:0 24px}
.mtp-table-wrap{background:transparent;border:none;border-radius:0;overflow:visible;margin-top:10px}
.mtp-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.mtp-table thead th{background:var(--bg2);color:var(--txt2);font-weight:700;font-size:12px;padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;letter-spacing:0.04em;text-transform:uppercase}
.mtp-table thead th.mtp-c-fire,
.mtp-table thead th.mtp-c-date,
.mtp-table thead th.mtp-c-status{text-align:center}
.mtp-table tbody td{padding:12px 14px;border-bottom:1px solid var(--border);border-right:1px solid rgba(168,152,128,0.08);text-align:center;color:var(--txt);font-size:13px;vertical-align:middle}
.mtp-table tbody td:last-child{border-right:none;padding-right:24px}
/* 제목/내용 셀만 ellipsis (긴 텍스트), 배지 셀은 overflow visible */
.mtp-table tbody td.mtp-c-title,
.mtp-table tbody td.mtp-c-body{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtp-table tbody tr:last-child td{border-bottom:1px solid var(--border)}
.mtp-table tbody tr.mtp-row{transition:background .1s}
.mtp-table tbody tr.mtp-row:hover td{background:var(--cs2-accent-softer,#FFFBF0)}
/* select 셀: 편집 가능 — 호버 시 한 단계 더 진하게 */
.mtp-table tbody td[data-field]{cursor:pointer}
.mtp-table tbody td[data-field]:hover{background:#FEF3DA!important;outline:1px solid #FAC775;outline-offset:-1px}
/* 빈 영역(제목/내용/D-day 등): 패널 열기 커서 */
.mtp-table tbody .mtp-c-open,
.mtp-table tbody .mtp-c-fire,
.mtp-table tbody .mtp-c-date{cursor:pointer}
/* 좌측 바 (임박/진행중/지남) */
.mtp-table tbody tr.mtp-row td:first-child{border-left:3px solid transparent}
.mtp-table tbody tr.mtp-row.ing td:first-child{border-left-color:#185FA5}
.mtp-table tbody tr.mtp-row.urgent td:first-child{border-left-color:#D97706}
.mtp-table tbody tr.mtp-row.urgent.over td:first-child{border-left-color:#D14343}
/* 컬럼 너비 — 아래 전체 테이블과 동일하게 */
.mtp-table col.mtp-col-fire,.mtp-table th.mtp-c-fire,.mtp-table td.mtp-c-fire{width:36px;padding:0;text-align:center;font-size:13px}
.mtp-table .mtp-c-date{width:100px;font-size:12px;color:var(--txt2);white-space:nowrap}
.mtp-table th:nth-child(2),.mtp-table td:nth-child(2){width:110px}
.mtp-table th:nth-child(3),.mtp-table td:nth-child(3){width:100px}
.mtp-table th:nth-child(4),.mtp-table td:nth-child(4){width:120px}
.mtp-table .mtp-c-title{min-width:250px;text-align:left}
.mtp-table .mtp-row-title{font-weight:700;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}
.mtp-table .mtp-c-body{text-align:left;font-size:12px;color:var(--txt2);width:120px}
.mtp-table th:nth-child(9),.mtp-table td:nth-child(9){width:70px}
.mtp-table th:nth-child(10),.mtp-table td:nth-child(10){width:80px}
.mtp-table th:nth-child(11),.mtp-table td:nth-child(11){width:70px}
.mtp-table .mtp-c-status{width:80px;white-space:nowrap}
.mtp-row-dday{display:inline-block;margin-left:4px;font-size:10px;font-weight:700;color:var(--txt3)}
.mtp-row-dday.urgent{color:#B45309}
.mtp-row-dday.over{color:#D14343}
.mtp-table .mtp-more-row td{padding:9px 0;text-align:center;font-size:12px;color:var(--txt3);cursor:pointer;background:var(--bg2);border-left:none!important}
.mtp-table .mtp-more-row td:hover{color:var(--green);background:var(--bg3)}

/* "내 업무만" 토글 칩 */
.my-toggle-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;background:#EEEDFE;border:1px solid #CECBF6;border-radius:14px;font-size:11px;color:#3C3489;font-weight:700;cursor:pointer;transition:all 0.15s;margin-left:auto;font-family:inherit}
.my-toggle-chip:hover{background:#E0DDF8}
.my-toggle-chip.off{background:var(--bg2);border-color:var(--border);color:var(--txt3)}
.my-toggle-switch{width:22px;height:12px;background:#534AB7;border-radius:6px;position:relative;flex-shrink:0;transition:background 0.15s}
.my-toggle-chip.off .my-toggle-switch{background:var(--border2)}
.my-toggle-switch::after{content:'';width:10px;height:10px;background:#fff;border-radius:50%;position:absolute;top:1px;right:1px;transition:right 0.15s}
.my-toggle-chip.off .my-toggle-switch::after{right:11px}

/* 모바일 */
@media (max-width:760px){
  .my-tasks-panel{padding:10px 16px}
  .mtp-head-stats{gap:10px}
  .mtp-head-stats .mtp-total{font-size:17px}
  .mtp-progress-wrap{display:none}
  .mtp-card-tag,.mtp-card-status{display:none}
  .mtp-table .mtp-c-body,
  .mtp-table thead th:nth-child(5),
  .mtp-table tbody td:nth-child(5){display:none}
}

/* ===== 업무요청 — 헤더 아래 stats 배치 (좀 더 컴팩트) ===== */
#page-tasks > .stats{padding:9px 24px;gap:8px;background:var(--bg3);border-top:1px solid var(--border)}
#page-tasks > .stats .stat{padding:7px 14px;gap:5px}
#page-tasks > .stats .stat .num{font-size:16px}
#page-tasks > .stats .stat .lbl{font-size:11px}
@media (max-width:760px){
  #page-tasks > .stats{padding:7px 16px;gap:5px;flex-wrap:wrap}
  #page-tasks > .stats .stat{padding:5px 10px}
  #page-tasks > .stats .stat .num{font-size:14px}
}

/* ===== 업무요청 — 컬러칩 셀 가운데 정렬 ===== */
#page-tasks tbody td[data-field="taskType"],
#page-tasks tbody td[data-field="brand"],
#page-tasks tbody td[data-field="cat"]{text-align:center}

/* ===== 우측 60px 안전 여백 (플로팅 버튼 영역 보호) ===== */
/* 모든 메인 페이지의 우측에 60px 여백을 두어 플로팅 버튼이 데이터를 가리지 않게 함 */
.content-area{padding-right:60px;box-sizing:border-box;transition:padding 0.15s}
/* 채팅 페이지는 사이드바/대화창이 60px까지 차있어야 자연스러움 → JS로 클래스 토글 */
.content-area.no-right-pad{padding-right:0}
/* 모바일에서는 화면이 좁으니 여백 줄임 */
@media (max-width:768px){
  .content-area{padding-right:0}
}

/* 배정된 담당자만 상태 변경 가능 — 권한 없는 사용자의 status 셀 */
td.status-readonly{cursor:not-allowed !important;opacity:0.75}
td.status-readonly:hover{background:transparent !important}

/* ─── 통합 탭바 (2026-04-12) ─── */
/* report ↔ report-admin / csguide ↔ inquiries / settings ↔ trash */
.unified-tabbar{display:flex;gap:6px;padding:10px 24px;background:var(--bg3);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.unified-tabbar .utab{background:var(--bg);color:var(--txt2);border:1px solid var(--border);padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .12s}
.unified-tabbar .utab:hover{background:var(--cs2-accent-softer,#FFFBF0);border-color:var(--cs2-accent,#D97706);color:var(--cs2-accent,#D97706)}
.unified-tabbar .utab.active{background:var(--cs2-accent,#D97706);border-color:var(--cs2-accent,#D97706);color:#fff}
.unified-tabbar .utab.active:hover{background:var(--cs2-accent-hover,#B45309)}
@media (max-width:760px){
  .unified-tabbar{padding:8px 16px;gap:4px}
  .unified-tabbar .utab{padding:6px 12px;font-size:12px}
}