/* ===========================
   HNINE Project Dashboard CSS
   =========================== */

:root {
  --gantt-bar-h: 26px;      /* 필요 시 24~30px로 조정 */
  --grid-minor: #f5f5f5;  /* 밝은 회색 (minor) -세로 선*/
  --grid-major: #94a3b8;  /* 약간 진한 회색 (major) */
  --axis-text : #64748b;  /* 축 라벨 텍스트 색 */
  --chip-bg:      #e8eef9;  /* 배경 */
  --chip-border:  #98a6b9;  /* 테두리 */
  --chip-text:    #0f172a;  /* 글자색 */
  --chip-bg-hov:  #dfe7f6;  /* hover / 선택 */
}

/* Base */
body { background: #fafafa; }

/* Dashboard container */
#gantt { overflow-x: auto; }

/* (남아있을 수 있는 SVG Gantt 대비) */
.gantt .bar { rx: 6px; ry: 6px; }

/* ---------------------------
   vis-timeline: general tone
   --------------------------- */
.vis-timeline .vis-item { border-radius: 8px; }
.vis-timeline .vis-label .vis-inner { font-weight: 600; } /* 그룹(왼쪽 라벨) */
.vis-timeline .vis-current-time { background-color: #ff3860; } /* 현재 시각 세로선 */

/* 축/그리드 톤 다운 */
.vis-time-axis .vis-text { font-size: 12px; color: #607d8b; }
.vis-time-axis .vis-grid.vis-minor { border-color: #eceff1; }
.vis-time-axis .vis-grid.vis-major { border-color: #cfd8dc; }

/* ---------------------------
   Bar base (색상은 JS 인라인 style로 주입)
   --------------------------- */
.vis-timeline .vis-item.bar {
  /* border: none !important; */
  border-radius: 5px !important;  /* 둥근 사각 */
  /* box-shadow: none !important; */
  color: #0f172a;                 /* 글자색 */
  font-size: 11px;
  line-height: 1.2;
}

/* PL 강조(테두리 없이 약한 강조) */
.vis-timeline .vis-item.bar.pl-yes {
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}

/* 퇴직 멤버 투입(과거 기록) 흐리게 */
.vis-timeline .vis-item.bar.member-resigned { opacity: .5; }

/* -------------------------------------
   일괄 편집(involvement_bulk) 행 간격
   ------------------------------------- */
.form-row { padding: .5rem .2rem; margin-bottom: 0; border: 0; }
.form-row .label { display: none; }

#form-bulkHeader .columns {
  margin-bottom: 4px !important;  /* 기본 .75rem → 4px */
  padding: 4px 8px;
  border-bottom: 1px solid #f2f2f2;
}

#form-container .columns.form-row {
  margin-bottom: 4px !important;
  padding: 4px 8px;
  border-bottom: 1px solid #f2f2f2;
}

#form-container .columns.form-row:last-child { margin-bottom: 0 !important; }

#form-container .help.is-danger {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.2;
}

#bulkHeader { margin-left: 0; margin-right: 0; }
.column.form-col { padding: .5rem 0; }


.vis-time-axis .vis-grid.vis-minor {
  border-color: var(--grid-minor) !important;
  /* 두께도 바꾸고 싶으면: border-left-width: 1px !important; */
}
.vis-time-axis .vis-grid.vis-major {
  border-color: var(--grid-major) !important;
  /* 두께: border-left-width: 2px !important; */
}

/* 축 라벨 텍스트 색 */
.vis-time-axis .vis-text { color: var(--axis-text) !important; }

/* -------------------------------------
   Gantt 바 라벨 세로 중앙 정렬 (결정판)
   ------------------------------------- */

.vis-timeline .vis-item.vis-range {
  display: flex;                        /* 바 자체를 플렉스 컨테이너로 */
  align-items: center;                  /* 세로 가운데 */
  min-height: var(--gantt-bar-h);       /* 바 최소 높이 */
  border: none;
  border-radius: 5px;
}

.vis-timeline .vis-item.vis-range .vis-item-overflow {
  display: flex;                        /* 내부도 플렉스 */
  align-items: center;
  height: 100%;                         /* 바 높이 채우기 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.vis-timeline .vis-item.vis-range .vis-item-content {
  display: flex;                        /* 라벨 컨테이너 */
  align-items: center;
  height: 100%;
  padding: 0 13px !important;            /* 좌우만 패딩 */
  line-height: 1.2;
  box-sizing: border-box;
  font-size: 11px;
}


/* 라벨을 바 길이에 상관없이 표시: 글자는 넘쳐도 보이게 */
.vis-timeline .vis-item { overflow: visible !important; }
.vis-timeline .vis-item .vis-item-overflow { overflow: visible !important; } /* ★ 이 줄이 빠져 있었음 */
.vis-timeline .vis-item .vis-item-content {
  overflow: visible !important;          /* 내용 클리핑 해제 */
  white-space: nowrap;                   /* 한 줄 유지 */
  max-width: none !important;            /* 폭 제한 해제 */
  background: transparent !important;    /* 배경이 바 밖으로 번지는 것 방지 */
  padding-right: 12px;                   /* 바 밖으로 나간 글자도 여백 */
}
/* (선택) 바 밖으로 나온 글자가 마우스 이벤트 가로채지 않도록 */
.vis-timeline .vis-item .vis-item-content span { pointer-events: none; }


/*************************************************************************
멤버 리스트
**************************************************************************/
/* 멤버 리스트 필터: 상태 체크박스 한 줄 정렬 */
#member-filters .checkbox-row{
  display:flex !important;
  align-items:center !important;
  height:2.5rem !important;   /* Bulma select 높이와 맞춤 */
  gap:12px !important;
}
#member-filters .checkbox-row .checkbox{
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  line-height:1.2 !important;
}

.vis-timeline .vis-item.vis-range { cursor: pointer; }

.choices { width: 100%; }               /* Bulma select처럼 꽉 차게 */
.choices__inner { min-height: 2.5em; }  /* 높이 Bulma input과 유사 */

/* 필터 박스가 타임라인보다 항상 위에 오도록 */
#filters .select,
#filters select {
  position: relative;
  z-index: 20;
}
#filters .button {
  position: relative;
  z-index: 5;    /* 드롭다운보다 낮게 */
}

/* 폼 래퍼는 넘침 허용(드롭다운이 밖으로 나와도 보이도록) */
#filters { overflow: visible; position: relative; }

/* 필터의 멀티셀렉트를 한 줄 고정 + 가로 스크롤 */
#filters .choices[data-type*="select-multiple"] .choices__inner {
  height: 40px;                /* 고정 높이 */
  min-height: 40px;
  overflow-x: auto;            /* 가로 스크롤 */
  overflow-y: hidden;
  white-space: nowrap;         /* 줄바꿈 금지 */
}

#filters .choices[data-type*="select-multiple"] .choices__list--multiple {
  display: inline-flex;        /* 칩들을 한 줄로 */
  flex-wrap: nowrap;
  gap: 4px;
}

#filters .choices[data-type*="select-multiple"] .choices__item,
#filters .choices[data-type*="select-multiple"] .choices__input--cloned {
  flex: 0 0 auto;              /* 칩/입력창이 줄바꿈되지 않도록 */
  white-space: nowrap;
}

/* === Choices 칩(태그) 커스텀: 각진 사각 + 색상 === */

/* 범위를 .choices--square 로 한정 → 다른 Choices에는 영향 X */
.choices--square .choices__list--multiple .choices__item{
  background: #2d4eb3;
  color: #ffffff;
  border: 1px solid var(--chip-border);
  border-radius: 6px;
  padding: 2px 8px;
  margin: 4px 6px 4px 0;
  box-shadow: none;
  font-weight: 500;
}


/* 칩 내부의 닫기(X) 버튼 */
.choices--square .choices__list--multiple .choices__item .choices__button{
  border-left: none;
  margin-left: 6px;
  opacity: .99;
  color: var(--chip-text);
}
.choices--square .choices__list--multiple .choices__item .choices__button:hover{
  opacity: .95;
}

/* 컨트롤 박스 자체를 세로 중앙 정렬 */
.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="select-one"] .choices__inner {
  display: flex;              /* 기본 block → flex */
  align-items: center;        /* 세로 가운데 */
  min-height: 40px;           /* Bulma input 높이 느낌 */
  padding: 4px 8px;           /* 위아래 살짝 여유 */
}

/* 칩 묶음도 flex로: 줄바꿈/갭/세로정렬 */
.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;                   /* 칩 사이 간격 */
  margin: 0;
}

/* 칩 자체도 세로 중앙 */
.choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
}

/* 입력(placeholder “선택”)도 가운데로 */
.choices__input {
  align-self: center;
  margin: 0;
  padding: 4px 0;
}

/* (선택) 각진 모서리 유지 시 */
.choices.choices--square .choices__inner {
  border-radius: 6px;
}



/* === Choices.js: optgroup 헤더를 눈에 띄게 === */
.choices__list--dropdown .choices__group {
  margin: 0px 0;
  padding: 0;
}

.choices__list--dropdown .choices__group .choices__heading {
  position: sticky;        /* 스크롤해도 헤더가 위에 붙어 있음 */
  top: 0;
  z-index: 10;
  background: #f8fafc;     /* 옅은 배경 */
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #eef2f7;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 헤더 왼쪽에 발주사 색 점(스와치) */
.choices__list--dropdown .choices__group .choices__heading .client-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
}

/* 옵션은 살짝 들여쓰기 */
.choices__list--dropdown .choices__item--choice {
  padding-left: 15px;
}

/* 그룹간 여백 강화 */
.choices__list--dropdown .choices__group + .choices__group {
  margin-top: 8px;
}


/* --- Fixed GNB --- */
.navbar.is-fixed-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;            /* 타임라인/모달 위에 오도록 */
}

/* Bulma 기본 보정: 상단 네비만큼 본문 내려줌 */
body.has-navbar-fixed-top {
  padding-top: 3.25rem;     /* Bulma 기본 navbar 높이 */
}

/* 화면이 좁아져 네비 높이가 커질 때는 JS가 offsetHeight로 재보정 */



/* Editor 창 전체 폭으로 조정*/
/* ===== Project Notes modal : Editor.js full-width (toolbar + 15px gutter) ===== */
#project-notes-modal .modal-card-body {
  padding: 0 !important;
  overflow: visible;                 /* 팝오버가 바깥으로 나와도 안 잘리게 */
}
#project-notes-modal .modal-card {
  overflow: visible;                 /* Bulma 기본 hidden → popover 클립 방지 */

  /* 한 번에 조절할 변수 (필요 시 숫자만 바꾸세요) */
  --ed-toolbar-w: 40px;              /* 좌측 툴바 폭(테마에 따라 36~48px) */
  --ed-gutter:    15px;              /* 툴바와 본문 사이 간격 */
  --ed-left-pad:  calc(var(--ed-toolbar-w) + var(--ed-gutter));
}

#project-notes-modal #editorjs {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;   /* programmatic scroll feels nicer */
}

/* 본문 폭 제한 제거 + 중앙정렬 해제 */
#project-notes-modal .ce-block__content,
#project-notes-modal .ce-toolbar__content {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 본문에 ‘툴바+간격’ 만큼 전용 여백 확보 */
#project-notes-modal .codex-editor__redactor {
  padding-left: var(--ed-left-pad) !important;
  padding-right: 16px !important;
  padding-bottom: 24px !important;
}

/* 툴바를 여백 안쪽에 위치 */
#project-notes-modal .ce-toolbar {
  left: var(--ed-left-pad) !important;
}

/* 팝오버/인라인 툴바가 모달 위로 뜨게 */
#project-notes-modal .ce-popover,
#project-notes-modal .ce-inline-toolbar {
  z-index: 10010 !important;         /* Bulma modal 내부 요소보다 위 */
}

/* 좁은 모드도 동일 처리 */
#project-notes-modal .codex-editor--narrow .ce-block__content,
#project-notes-modal .codex-editor--narrow .ce-toolbar__content {
  max-width: 100% !important;
}

/* 에디터 내부에 스크롤 */
/* ===== Editor.js: 스크롤은 에디터(#editorjs) 안에서만 ===== */
#project-notes-modal .modal-card-body {
  display: flex;             /* 제목/푸터 제외하고 세로 레이아웃 */
  flex-direction: column;
  /* padding:0; overflow:visible; 는 기존 코드 그대로 유지 */
}

#project-notes-modal #editorjs {
  flex: 1 1 auto;            /* 모달 본문 남은 높이를 꽉 채움 */
  min-height: 0;             /* 자식이 부모 높이 밀어내지 않게 */
  overflow: auto;            /* ★ 내부 스크롤은 여기서만 발생 */
  position: relative;
  overscroll-behavior: contain;
}

#project-notes-modal .codex-editor {
  height: 100%;
}

#project-notes-modal .codex-editor__redactor {
  height: 100%;
  min-height: 0;
  overflow: auto;            /* (원한다면 이 줄을 제거하고 #editorjs만 overflow 줘도 OK) */
  /* 좌측 툴바 여백은 기존 값 유지 */
  /* padding-left/right/bottom 는 이미 있으니 중복 선언되면 아래가 우선 */
}



/* 이미지가 기본적으로 컨테이너(에디터) 너비를 꽉 채우도록 */
#project-notes-modal .image-tool__image-picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* 리사이즈 컨트롤(우하단 작은 바) */
#project-notes-modal .img-size-bar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 6px;
  background: rgba(0,0,0,0.5);
  padding: 4px 6px;
  border-radius: 6px;
  z-index: 10020; /* 모달 위로 */
}

#project-notes-modal .img-size-btn {
  border: 0;
  background: #fff;
  color: #111827;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}

#project-notes-modal .img-size-btn.is-active {
  background: #2563eb;
  color: #fff;
}

#project-notes-modal .image-tool {
  position: relative; /* 컨트롤 배치를 위해 */
}

/* 선택된 폭이 100%가 아닐 때 중앙 정렬을 보기 좋게 */
#project-notes-modal .image-tool__image {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* 스크롤은 에디터 래퍼(#editorjs)에서만 */
#project-notes-modal #editorjs {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;             /* 내부 스크롤 */
  position: relative;
  overscroll-behavior: contain;
}

/* redactor는 클리핑하지 않도록 (스크롤 부여 X) */
#project-notes-modal .codex-editor__redactor {
  overflow: visible;          /* ← 여기엔 overflow 주지 말기 */
}

/* 모달 쪽은 팝오버가 잘 보이게 클리핑 해제 */
#project-notes-modal .modal-card,
#project-notes-modal .modal-card-body {
  overflow: visible !important;
}

/* 팝오버/인라인 툴바 z-index 보정 */
#project-notes-modal .ce-popover,
#project-notes-modal .ce-inline-toolbar {
  z-index: 10010 !important;
}

/* Edit내 블록 드래그 비활성 */
#project-notes-modal .image-tool__image img,
#project-notes-modal .cdx-image img {
  -webkit-user-drag: none; /* Safari/Chrome */
  user-drag: none;
}



/**/
/* ===== Member 필터: 팀명(그룹 헤더) 강조 ===== */
#filters #member + .choices .choices__list--dropdown .choices__list {
  max-height: 360px;                 /* 드롭다운 스크롤 높이 */
}

/* 그룹 헤더 바 형태 + 스티키(스크롤해도 상단 고정) */
#filters #member + .choices .choices__list--dropdown .choices__group {
  position: static;      /* ← 스티키 해제 */
  top: auto;
  z-index: auto;
  margin: 8px 8px 4px;
  padding: 6px 10px;
  background: #eef2ff;               /* 연한 인디고 톤 */
  border-left: 4px solid #6366f1;    /* 포인트 컬러 바 */
  border-radius: 6px;
}

/* 팀명 텍스트 강조 */
#filters #member + .choices .choices__list--dropdown .choices__heading {
  position: static;      /* ← 스티키 해제 */
  top: auto;
  z-index: auto;
  font-weight: 700;
  color: #3730a3;
  letter-spacing: .2px;
}

/* 팀 항목과 간격 조금 */
#filters #member + .choices .choices__list--dropdown .choices__group + .choices__item--choice {
  margin-top: 2px;
}

/* 드롭다운이 다른 요소와 겹치지 않게 z-index 보정 */
#filters #member + .choices .choices__list--dropdown {
  z-index: 1008;
}


/* ===== Member 필터: 팀명(그룹 헤더) 강조 ===== */
.choices--member .choices__list--dropdown .choices__list {
  max-height: 360px !important;           /* 드롭다운 스크롤 높이 */
}

/* 그룹 헤더 바 + 스티키 */
.choices--member .choices__list--dropdown .choices__group {
  position: static !important; /* ← 스티키 해제 */
  top: auto !important;
  z-index: auto !important;
  /* margin: 8px 8px 4px !important; */
  padding: 2px 2px !important;
  background: #eef2ff !important;         /* 연한 인디고 */
  border-left: 4px solid #6366f1 !important;
  border-radius: 3px !important;
}

/* 팀명 텍스트 강조 */
.choices--member .choices__list--dropdown .choices__heading {
  position: static !important;  /* ← 스티키 해제 */
  top: auto !important;
  z-index: auto !important;
  font-weight: 700 !important;
  color: #3730a3 !important;
  letter-spacing: .2px !important;
}

/* 팀 항목과 간격 조금 */
/* .choices--member .choices__list--dropdown .choices__group + .choices__item--choice {
  margin-top: 2px !important;
} */

/* 드롭다운이 다른 버튼과 겹치지 않게 */
.choices--member .choices__list--dropdown {
  z-index: 1008 !important;
}