/* ══════════════════════════════════════════════════════════
   theme.css  —  라이트 / 다크 테마
   <html data-theme="light|dark"> 으로 전환

   아래 규칙들은 .skin-on 에 걸려 있다. 다크 모드뿐 아니라 팀 테마
   (team-themes.css)에서도 같은 오버라이드가 필요해서, "기본 라이트가
   아닌 모든 화면"을 가리키는 표시로 .skin-on 을 <html>에 붙인다.
   따라서 이 규칙들에 색을 직접 적지 말고 --c-* 변수만 쓴다 —
   값이 박혀 있으면 밝은 팀 테마에 다크 모드 색이 섞여 나온다.
══════════════════════════════════════════════════════════ */

/* ── CSS 변수 ─────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --c-bg-base:         #f9fafb;   /* 전체 배경 */
  --c-bg-surface:      #ffffff;   /* 카드, 패널 */
  --c-bg-surface2:     #f3f4f6;   /* 테이블 헤더, 보조 배경 */
  --c-bg-surface3:     #e5e7eb;   /* 비활성 뱃지 등 */
  --c-bg-sidebar:      #1f2937;
  --c-bg-sidebar-hov:  #374151;
  --c-bg-sidebar-act:  #374151;
  --c-text-primary:    #111827;
  --c-text-secondary:  #4b5563;
  --c-text-muted:      #9ca3af;
  --c-text-sidebar:    #d1d5db;
  --c-border:          #e5e7eb;
  --c-border-input:    #d1d5db;
  --c-input-bg:        #ffffff;
  --c-input-ro-bg:     #f3f4f6;
  --c-input-ro-text:   #6b7280;
  --c-thead-bg:        #f9fafb;
  --c-divide:          #f3f4f6;
  --c-shadow:          0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .07);
  --c-sidebar-divide:  #374151;   /* 사이드바 구분선 */
  --c-menu-bg:         #ffffff;   /* 사이드바 사용자 메뉴 */
  --c-menu-border:     #e5e7eb;
  --c-menu-hov:        #f3f4f6;
  --c-bg-surface3-hov: #d1d5db;
  --c-accent:          #2563eb;   /* 배경·테두리용 강조색 (blue-600) */
  --c-accent-text:     #3b82f6;   /* 글자·아이콘용 강조색 (blue-500) */
  --c-accent-soft:     #dbeafe;   /* 연한 강조 배경 (blue-100) */
}

[data-theme="dark"] {
  color-scheme: dark;   /* 네이티브 select 목록·스크롤바도 어둡게 */
  --c-bg-base:         #0f172a;
  --c-bg-surface:      #1e293b;
  --c-bg-surface2:     #334155;
  --c-bg-surface3:     #475569;
  --c-bg-sidebar:      #0c1322;
  --c-bg-sidebar-hov:  #1e293b;
  --c-bg-sidebar-act:  #1e293b;
  --c-text-primary:    #f1f5f9;
  --c-text-secondary:  #94a3b8;
  --c-text-muted:      #64748b;
  --c-text-sidebar:    #cbd5e1;
  --c-border:          #334155;
  --c-border-input:    #475569;
  --c-input-bg:        #1e293b;
  --c-input-ro-bg:     #334155;
  --c-input-ro-text:   #94a3b8;
  --c-thead-bg:        #1e293b;
  --c-divide:          #334155;
  --c-shadow:          0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .3);
  --c-sidebar-divide:  #1e293b;
  --c-menu-bg:         #1e293b;
  --c-menu-border:     #334155;
  --c-menu-hov:        #334155;
  --c-bg-surface3-hov: #64748b;
  --c-accent:          #2563eb;
  --c-accent-text:     #3b82f6;
  --c-accent-soft:     #1e3a8a;
}

/* ── 기본 레이아웃 ─────────────────────────────────────── */
.skin-on body                              { background-color: var(--c-bg-base) !important; color: var(--c-text-primary); }
.skin-on #authSection                      { background-color: var(--c-bg-base) !important; }
.skin-on .flex-1.overflow-y-auto           { background-color: var(--c-bg-base) !important; }

/* ── 사이드바 ──────────────────────────────────────────── */
.skin-on aside                             { background-color: var(--c-bg-sidebar) !important; border-color: var(--c-border) !important; }
.skin-on aside .border-b,
.skin-on aside .border-t                   { border-color: var(--c-sidebar-divide) !important; }
.skin-on .menu-item:hover                  { background-color: var(--c-bg-sidebar-hov) !important; }
.skin-on #sidebarUserMenu                  { background-color: var(--c-menu-bg) !important; border-color: var(--c-menu-border) !important; }
.skin-on #sidebarUserMenu button:hover,
.skin-on #sidebarUserMenu a:hover          { background-color: var(--c-menu-hov) !important; }

/* ── 카드 / 패널 (bg-white) ───────────────────────────── */
.skin-on .bg-white                         { background-color: var(--c-bg-surface) !important; }
.skin-on .shadow-lg                        { box-shadow: var(--c-shadow) !important; }

/* ── 보조 배경 (bg-gray-50) ───────────────────────────── */
.skin-on .bg-gray-50:not(body):not(#authSection) { background-color: var(--c-bg-surface2) !important; }
.skin-on .bg-gray-100                      { background-color: var(--c-bg-surface2) !important; }

/* ── 텍스트 ───────────────────────────────────────────── */
.skin-on .text-gray-900                    { color: var(--c-text-primary)   !important; }
.skin-on .text-gray-800                    { color: var(--c-text-primary)   !important; }
.skin-on .text-gray-700                    { color: var(--c-text-secondary) !important; }
.skin-on .text-gray-600                    { color: var(--c-text-secondary) !important; }
.skin-on .text-gray-500                    { color: var(--c-text-muted)     !important; }
.skin-on .text-gray-400                    { color: var(--c-text-muted)     !important; }

/* ── 테두리 ───────────────────────────────────────────── */
.skin-on .border-b                         { border-color: var(--c-border) !important; }
.skin-on .border-t                         { border-color: var(--c-border) !important; }
.skin-on .border-gray-100                  { border-color: var(--c-border) !important; }
.skin-on .border-gray-200                  { border-color: var(--c-border) !important; }
.skin-on .border-gray-300                  { border-color: var(--c-border-input) !important; }
.skin-on .divide-y > * + *                 { border-color: var(--c-divide) !important; }
.skin-on .divide-gray-100 > * + *          { border-color: var(--c-divide) !important; }

/* ── 입력 필드 ────────────────────────────────────────── */
.skin-on input:not([type="checkbox"]):not([type="radio"]),
.skin-on select,
.skin-on textarea {
  background-color: var(--c-input-bg)   !important;
  border-color:     var(--c-border-input) !important;
  color:            var(--c-text-primary) !important;
}
.skin-on input[readonly],
.skin-on input.bg-gray-100,
.skin-on select[disabled] {
  background-color: var(--c-input-ro-bg)   !important;
  color:            var(--c-input-ro-text) !important;
}
.skin-on input::placeholder,
.skin-on textarea::placeholder { color: var(--c-text-muted) !important; }

/* ── 테이블 헤더 ──────────────────────────────────────── */
.skin-on thead,
.skin-on .bg-gray-50.border-b { background-color: var(--c-thead-bg) !important; }
.skin-on tbody tr:hover        { background-color: var(--c-bg-surface2) !important; }

/* ── 탭 네비게이션 ────────────────────────────────────── */
.skin-on nav.flex.border-b    { border-color: var(--c-border) !important; }
.skin-on .border-b-2          { border-color: inherit; }

/* ── 로그인 카드 ──────────────────────────────────────── */
.skin-on .bg-gradient-to-r.from-blue-600 { /* 헤더 그라데이션 유지 */ }
.skin-on .bg-gray-50.border-b            { background-color: var(--c-bg-surface2) !important; }

/* ── 버튼 (회색 계열만 오버라이드, blue/green/red 유지) ─ */
.skin-on .bg-gray-200                    { background-color: var(--c-bg-surface3) !important; }
.skin-on .bg-gray-200:hover,
.skin-on .hover\:bg-gray-300:hover       { background-color: var(--c-bg-surface3-hov) !important; }
.skin-on .text-gray-700.bg-gray-200      { color: var(--c-text-primary) !important; }

/* ── 뱃지 / 태그 ──────────────────────────────────────── */
.skin-on .bg-gray-100.text-gray-600      { background-color: var(--c-bg-surface3) !important; color: var(--c-text-secondary) !important; }

/* 사이드바 사용자 메뉴: 라이트에서 배경이 흰색이라 text-gray-300 글자가 안 보인다 */
.skin-on #sidebarUserMenu button:not(.theme-btn),
.skin-on #sidebarUserMenu a                { color: var(--c-text-primary) !important; }
.skin-on #sidebarUserMenu .theme-btn:not(.active) { color: var(--c-text-secondary); }
.skin-on #sidebarUserMenu .border-gray-600 { border-color: var(--c-menu-border) !important; }

/* select 펼침 목록: 배경이 투명인 select(주간보고 업무구분 등)는 일부 OS/브라우저에서
   목록이 흰 배경 + 밝은 글자로 뜬다. 목록 항목에 배경·글자색을 명시한다 */
.skin-on select option,
.skin-on select optgroup {
  background-color: var(--c-bg-surface);
  color:            var(--c-text-primary);
}

/* ── 호버 배경 ────────────────────────────────────────── */
.skin-on .hover\:bg-gray-50:hover        { background-color: var(--c-bg-surface2) !important; }

/* ── 드롭다운(select) 커스텀 ──────────────────────────────
   브라우저 기본 화살표는 테두리에 바짝 붙고 OS마다 모양이 달라, 같은 화면의
   일반 입력 필드와 결이 맞지 않는다. 네이티브 화살표를 끄고 여백을 둔 화살표를
   배경으로 깔아 입력 필드와 같은 모양으로 통일한다.
   padding-right는 Tailwind의 px-* 와 충돌하므로 !important가 필요하다.      */
select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.75 10 12.25l4.5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.05rem 1.05rem;
    padding-right: 2.4rem !important;
}
/* 테이블 셀 안의 테두리 없는 드롭다운은 폭이 좁아 화살표를 작게/가깝게 */
#taskTemplateTable select:not([multiple]),
select.border-0:not([multiple]) {
    background-position: right 0.25rem center;
    background-size: 0.8rem 0.8rem;
    padding-right: 1.25rem !important;
}
/* 어두운 배경 위(사이드바 팀 전환)에서는 밝은 화살표.
   사이드바는 폭이 좁고 "팀명 (역할 · 주소속)"이 길어 여백을 조금 줄인다 */
#affiliationSwitcherSelect {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.75 10 12.25l4.5-4.5'/%3E%3C/svg%3E");
    background-position: right 0.55rem center;
    padding-right: 1.9rem !important;
}
.skin-on select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.75 10 12.25l4.5-4.5'/%3E%3C/svg%3E");
}

/* ── 주간보고 행 드래그 순서 변경 ────────────────────── */
#taskTemplateBody tr.weekly-drop-target {
    border-top: 2px solid #3b82f6;
}
#taskTemplateBody tr.opacity-40 {
    opacity: 0.4;
}
#taskTemplateBody .weekly-drag-handle {
    cursor: grab;
}
#taskTemplateBody .weekly-drag-handle:active {
    cursor: grabbing;
}

/* ── 주간보고 템플릿 테이블 셀 입력 필드 ─────────────── */
#taskTemplateTable input,
#taskTemplateTable select,
#taskTemplateTable textarea {
    border: none;
    /* background 단축 속성을 쓰면 select의 커스텀 화살표(background-image)까지 지워진다 */
    background-color: transparent;
}
/* 날짜 셀 커서 / 가운데 정렬 / 포커스 링 */
#taskTemplateTable .weekly-date-cell {
    cursor: pointer;
}
#taskTemplateTable .weekly-date-cell .date-display {
    text-align: center;
}
#taskTemplateTable .weekly-date-cell:focus {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    border-radius: 4px;
}

/* 업무구분 드롭다운 커서 */
#taskTemplateTable select {
    cursor: pointer;
}

/* 업무비중 숫자 input 스핀버튼 제거 */
#weightSliders input[type="number"]::-webkit-inner-spin-button,
#weightSliders input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
#weightSliders input[type="number"] {
    -moz-appearance: textfield;
}
.skin-on #taskTemplateTable input,
.skin-on #taskTemplateTable select,
.skin-on #taskTemplateTable textarea {
    background-color: transparent !important;
    border-color: transparent !important;
}
.skin-on #taskTemplateTable tbody tr {
    background-color: var(--c-bg-surface) !important;
}
.skin-on #taskTemplateTable tbody tr:hover {
    background-color: var(--c-bg-surface2) !important;
}
.skin-on #taskTemplateTable thead tr {
    background-color: var(--c-thead-bg) !important;
}

/* ── 사이드바 메인콘텐츠 마진 트랜지션 ─────────────────── */
#mainContent {
    transition: margin-left 0.2s ease;
}

/* ── 테마 선택 버튼 ───────────────────────────────────── */
.theme-btn {
  padding: .3rem .25rem;
  border-radius: .375rem;
  font-size: .68rem;
  color: #b4bcc8;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.theme-btn:hover                                     { background-color: #374151; color: #fff; }
.theme-btn.active                                    { background-color: var(--c-accent); color: #fff; }
.skin-on .theme-btn:hover                 { background-color: var(--c-bg-sidebar-hov); color: var(--c-text-sidebar); }
.skin-on .theme-btn.active                { background-color: color-mix(in srgb, var(--c-accent) 72%, #000); color: #fff; }   /* 밝은 팀 색에서도 흰 글자가 읽히도록 살짝 어둡게 */