/* ============================================ */
/* 소임관리 사이드바 스타일                     */
/* ============================================ */

/* 오버레이 */
.work-sidebar-overlay {
    position: fixed;
    top: var(--top-header-height);  /* 상단 헤더 아래부터 */
    left: 0;
    right: 0;
    bottom: var(--bottom-nav-height);  /* 하단 네비 위까지 */
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.work-sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* 사이드바 (우측에서 열림) */
.work-sidebar {
    position: fixed;
    top: var(--top-header-height);  /* 상단바 아래부터 시작 */
    right: -320px;  /* 기본: 우측 밖 */
    width: 320px;
    height: calc(100vh - var(--top-header-height) - var(--bottom-nav-height));  /* 상단바 + 하단바 제외 */
    background: var(--bg-primary, white);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1);  /* 좌측 그림자 */
    z-index: 999;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.work-sidebar.open {
    right: 0;  /* 열릴 때: 화면 우측에 붙음 */
}

/* 헤더 */
.work-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    min-height: 48px;  /* 고정 높이 (56px → 48px) */
    border-bottom: 1px solid var(--gray-200);
    background: var(--primary);
    color: white;
    flex-shrink: 0;  /* 헤더 축소 방지 */
}

.work-sidebar-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.work-sidebar-header .btn-icon {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.work-sidebar-header .btn-icon:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 내용 */
.work-sidebar-content {
    flex: 1;
    min-height: 0;  /* flex 자식의 스크롤을 위해 필요 */
    overflow-y: auto;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;  /* iOS 부드러운 스크롤 */
}

/* 섹션 */
.sidebar-section {
    margin-bottom: 1rem;  /* 1.5rem → 1rem (간격 축소) */
}

.sidebar-section:last-child {
    margin-bottom: 0;
}

.sidebar-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.75rem;
}

.sidebar-label i {
    color: var(--primary);
    font-size: 1rem;
}

/* 칩 그룹 */
.sidebar-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    padding: 0.375rem 0.5rem;  /* 0.5rem 0.875rem → 0.375rem 0.5rem (공간 절약) */
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 6px;  /* 20px → 6px (모던 + 효율) */
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.chip:hover {
    background: var(--gray-50);
    border-color: var(--primary);
}

.chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    font-weight: 600;
}

.chip.active i {
    color: white;
}

/* 검색 입력 */
.sidebar-section .work-search {
    position: relative;
}

.sidebar-section .work-search input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.9375rem;
}

.sidebar-section .work-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Select 스타일 */
.sidebar-section .form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.9375rem;
    background: white;
}

.sidebar-section .form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* 푸터 */
.work-sidebar-footer {
    padding: 0.75rem;
    min-height: 64px;  /* 고정 높이 (72px → 64px) */
    border-top: 1px solid var(--gray-200);
    background: var(--bg-secondary, #f9fafb);
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;  /* 푸터 축소 방지 */
}

.work-sidebar-footer .btn-block {
    flex: 1;
}

/* 모바일 최적화 */
@media (max-width: 420px) {
    .work-sidebar-overlay {
        top: 52px;  /* 모바일 상단바 높이 */
        bottom: 56px;  /* 모바일 하단바 높이 */
    }
    
    .work-sidebar {
        width: 85vw;
        max-width: 320px;
        right: -85vw;  /* 우측 밖 */
        top: 52px;  /* 모바일 상단바 높이 */
        height: calc(100vh - 52px - 56px);  /* 상단바 52px + 하단바 56px 제외 */
    }
    
    .work-sidebar-header {
        padding: 0.625rem 0.75rem;  /* 패딩 축소 */
        min-height: 44px;  /* 48px → 44px */
    }
    
    .work-sidebar-header h3 {
        font-size: 12px;  /* 11px → 12px (제목과 비슷한 크기) */
    }
    
    .work-sidebar-content {
        padding: 0.75rem;  /* 1rem → 0.75rem */
    }
    
    .sidebar-section {
        margin-bottom: 0.75rem;  /* 1rem → 0.75rem */
    }
    
    .work-sidebar-footer {
        padding: 0.625rem 0.75rem;  /* 패딩 축소 */
        min-height: 60px;  /* 64px → 60px */
    }
    
    .sidebar-label {
        font-size: 10px;  /* 9px → 10px */
    }
    
    .chip {
        padding: 0.25rem 0.5rem;  /* 0.375rem 0.625rem → 0.25rem 0.5rem (모바일 공간 절약) */
        font-size: 10px;  /* 9px → 10px */
        border-radius: 6px;  /* 20px → 6px */
    }
    
    .sidebar-section .form-control,
    .sidebar-section .work-search input {
        font-size: 11px;  /* 10px → 11px */
        padding: 0.5rem 0.75rem;
    }
}

/* 데스크톱 (최소 폭 769px 이상에서는 사이드바 숨김) */
@media (min-width: 769px) {
    .work-sidebar,
    .work-sidebar-overlay {
        display: none;
    }
}

/* 플로팅 필터 버튼 (모바일 전용, 우측 하단) */
.floating-filter-btn {
    position: fixed;
    bottom: 80px; /* 하단 탭 위 */
    right: 16px;  /* 우측 하단 (오른손 엄지 접근) */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 997;
    transition: all 0.3s;
}

.floating-filter-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
}

.floating-filter-btn:active {
    transform: scale(0.95);
}

/* 데스크톱에서 플로팅 버튼 숨김 */
@media (min-width: 769px) {
    .floating-filter-btn {
        display: none;
    }
}

/* 헤더 액션 버튼 (하단 메뉴바 스타일) */
.header-actions {
    display: flex;
    gap: 0;
    align-items: center;
}

.header-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: none;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 20px;
    position: relative;
}

.header-action-btn i {
    font-size: 20px;
}

.header-action-btn.active {
    color: var(--primary);
}

.header-action-btn:active {
    background-color: var(--gray-50);
}

/* 모바일에서 버튼 크기 조정 (더 작게) */
@media (max-width: 420px) {
    .header-action-btn {
        width: 36px;   /* 44px → 36px */
        height: 36px;  /* 44px → 36px */
    }
    
    .header-action-btn i {
        font-size: 16px;  /* 18px → 16px */
    }
}

/* iOS 안전 영역 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .work-sidebar-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
    
    .floating-filter-btn {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }
}