@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css');

/* 새롬 CRM 커스텀 프리미엄 컬러 차트 (Extended Palette) */

:root, [data-bs-theme="light"], [data-topbar="dark"] {
    /* ==========================================================
       ▶ 코어 기본 타이포그래피 시스템 설정
       - 전역 텍스트의 크기/문간격/색상을 변수 영역에서 통제합니다.
    ========================================================== */
    --vz-body-font-family: 'SUIT', sans-serif !important;
    --vz-heading-font-family: 'SUIT', sans-serif !important;
    
    /* 폰트 기본값 16px (1rem = 16px) 확대를 통한 시원한 레이아웃 */
    --vz-body-font-size: 16px !important;
    --vz-body-line-height: 1.6 !important; /* 문서 가독성을 위한 줄간격 */

    /* 전역 글씨 블랙/다크그레이 컬러 매핑 (가독성/선명도 극대화) */
    --vz-body-color: #111827 !important;
    --vz-heading-color: #111827 !important;
    
    /* 계층별 제목(Headings) 스케일 체계 (16px 기준 동적 비율 적용) */
    --vz-h1-font-size: 2rem !important;    /* 32px */
    --vz-h2-font-size: 1.75rem !important; /* 28px */
    --vz-h3-font-size: 1.5rem !important;  /* 24px */
    --vz-h4-font-size: 1.25rem !important; /* 20px */
    --vz-h5-font-size: 1.15rem !important; /* 18.4px */
    --vz-h6-font-size: 1rem !important;    /* 16px */

    /* Primary: Vibrant Indigo Blue (영업활동 등록 버튼, 임시저장 등) */
    --vz-primary: #4A6CF7;
    --vz-primary-rgb: 74, 108, 247;
    
    /* Success: Mint Teal (계약관리 뱃지의 청록색 - 성공/완료 상태에 주로 사용) */
    --vz-success: #2EBCAC;
    --vz-success-rgb: 46, 188, 172;
    
    /* Warning: Vivid Pink (직원정보 뱃지의 핑크색) */
    --vz-warning: #E83369;
    --vz-warning-rgb: 232, 51, 105;
    
    /* Danger: Solid Red (신규사업장 등록 버튼의 강렬한 빨간색) */
    --vz-danger: #D12424;
    --vz-danger-rgb: 209, 36, 36;
    
    /* Info: Deep Sky Blue (단순 정보/안내용으로 쓰는 맑은 파란색) */
    --vz-info: #0284C7;
    --vz-info-rgb: 2, 132, 199;
    
    /* Secondary: Slate Gray (회색계열 기본 유지) */
    --vz-secondary: #64748B;
    --vz-secondary-rgb: 100, 116, 139;

    /* Light/Dark 기본 컬러 및 배경색 (붉은기 제거 - 완벽하게 깨끗한 쿨/뉴트럴 그레이) */
    --vz-light: #F1F5F9;
    --vz-light-rgb: 241, 245, 249;
    --vz-dark: #212529;
    --vz-dark-rgb: 33, 37, 41;
    
    /* 웹페이지 전체 배경색 (조금 더 연하고 화사한 아주 밝은 쿨그레이) */
    --vz-body-bg: #F9FAFB;
    --vz-body-bg-rgb: 249, 250, 251;
}

/* Opacity-25 / 연한(Soft, Subtle) 배경색 클래스 덮어쓰기 (가시성 극대화)*/
.bg-primary-subtle { background-color: rgba(var(--vz-primary-rgb), 0.15) !important; color: var(--vz-primary) !important; }
.bg-success-subtle { background-color: rgba(var(--vz-success-rgb), 0.15) !important; color: var(--vz-success) !important; }
.bg-warning-subtle { background-color: rgba(var(--vz-warning-rgb), 0.15) !important; color: var(--vz-warning) !important; }
.bg-danger-subtle { background-color: rgba(var(--vz-danger-rgb), 0.15) !important; color: var(--vz-danger) !important; }
.bg-info-subtle { background-color: rgba(var(--vz-info-rgb), 0.15) !important; color: var(--vz-info) !important; }
.bg-secondary-subtle { background-color: rgba(var(--vz-secondary-rgb), 0.15) !important; color: var(--vz-secondary) !important; }

/* 텍스트 가독성 */
.bg-primary, .btn-primary, .badge.bg-primary { color: #ffffff !important; }
.bg-success, .btn-success, .badge.bg-success { color: #ffffff !important; }
.bg-warning, .btn-warning, .badge.bg-warning { color: #ffffff !important; }
.bg-danger, .btn-danger, .badge.bg-danger { color: #ffffff !important; }
.bg-info, .btn-info, .badge.bg-info { color: #ffffff !important; }
.bg-secondary, .btn-secondary, .badge.bg-secondary { color: #ffffff !important; }

/* 회색 계열 (Grayscale) 추가 클래스 (별도 용도) */
.bg-gray-100 { background-color: #f8f9fa !important; }
.bg-gray-200 { background-color: #e9ecef !important; }
.bg-gray-300 { background-color: #dee2e6 !important; }
.bg-gray-400 { background-color: #ced4da !important; }
.bg-gray-500 { background-color: #adb5bd !important; }
.bg-gray-600 { background-color: #6c757d !important; }
.bg-gray-700 { background-color: #495057 !important; }
.bg-gray-800 { background-color: #343a40 !important; }
.bg-gray-900 { background-color: #212529 !important; }

/* Opacity-25 / 50 클래스 유틸리티 지원 */
.opacity-10 { opacity: 0.1 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }

/* Hover 효과 시 배경색 투명도(25% 수준) 지원용 유틸리티 */
.bg-hover-opacity-25:hover { background-color: rgba(var(--vz-primary-rgb), 0.25) !important; }

/* -----------------------------------------------------------
   상단바(Topbar/Header) - 프리미엄 다크 네이비 커스텀
   (단순 검정색이 아닌 로고 네이비의 초콜릿/딥 네이비 톤으로 교체)
----------------------------------------------------------- */
[data-layout="horizontal"][data-topbar="dark"] #page-topbar {
    background-color: #091A40 !important; /* 새롬 로고의 딥 네이비 바탕색 완벽 동기화 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-layout="horizontal"][data-topbar="dark"] .app-menu.navbar-menu {
    border-right: none;
}

/* -----------------------------------------------------------
   기본 배경색 강제 교체 (붉은기/자주색 띄는 미색 제거)
----------------------------------------------------------- */
body {
    background-color: var(--vz-body-bg) !important;
}

/* -----------------------------------------------------------
   상단바(Light 톤) 패널 내 아이콘 - 선명한 블랙톤 보정
----------------------------------------------------------- */
[data-layout="horizontal"][data-topbar="light"] #page-topbar .header-item,
[data-layout="horizontal"][data-topbar="light"] #page-topbar .btn-topbar i {
    color: #111827 !important; /* 무게감 있고 또렷한 다크 블랙 */
}

/* -----------------------------------------------------------
   사이드바 (Vertical Menu) 및 가로형 메뉴(App Menu) 배경 커스텀
   (로고의 딥 네이비 컬러로 배경 교체)
----------------------------------------------------------- */
.app-menu, .sidebar-background {
    background: #091A40 !important; /* 사이드바 배경 로고 네이비 */
}

/* 메뉴 글씨, 아이콘, 달린 화살표 등 - 형광 선택지와 조화되도록 훨씬 밝은 흰색으로(Inactive) */
[data-sidebar="dark"] .app-menu .menu-link,
[data-sidebar="dark"] .app-menu .menu-title,
.app-menu .nav-link,
.app-menu .nav-link i,
[data-layout="horizontal"] .navbar-menu .navbar-nav > .nav-item > .nav-link[data-bs-toggle=collapse]:after {
    color: rgba(255, 255, 255, 0.95) !important; /* 아주 맑고 밝은 흰색 */
}

/* 하버(Hover) 시 살짝 밝게 반응 */
[data-sidebar="dark"] .app-menu .menu-link:hover,
.app-menu .nav-link:hover,
[data-layout="horizontal"] .navbar-menu .navbar-nav > .nav-item > .nav-link[data-bs-toggle=collapse]:hover:after {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 활성화(Active) 시 로고의 연두색을 형광톤(Neon/Fluorescent)으로 극대화하여 돋보이게 처리 */
[data-sidebar="dark"] .app-menu .menu-link.active,
[data-sidebar="dark"] .app-menu .menu-link[aria-expanded="true"],
.app-menu .nav-link.active,
.app-menu .nav-link.active i,
[data-layout="horizontal"] .navbar-menu .navbar-nav > .nav-item > .nav-link[data-bs-toggle=collapse].active:after {
    color: #9DE12B !important; /* 원톤 로고보다 명도/채도를 더 끌어올린 형광 라임 그린 */
    background-color: transparent !important;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(157, 225, 43, 0.6); /* 형광 네온 글로우(빛 번짐) 효과 추가 */
}

/* sub-menu (사이드바 내 하위 메뉴 - Vertical 모드용) */
[data-sidebar="dark"] .app-menu .nav-sm .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}
[data-sidebar="dark"] .app-menu .nav-sm .nav-link:hover,
[data-sidebar="dark"] .app-menu .nav-sm .nav-link.active {
    color: #ffffff !important;
}

/* 가로형 메뉴(Horizontal)의 하단 드롭다운 박스(흰색 배경) 글씨 보정 */
[data-layout="horizontal"] .navbar-menu .menu-dropdown .nav-link,
[data-layout="horizontal"] .app-menu .dropdown-menu .dropdown-item {
    color: #212529 !important; /* 차트의 기본 다크/블랙 색상으로 선명하게 보이게 설정 */
    background-color: transparent !important;
    font-weight: 500;
}
[data-layout="horizontal"] .navbar-menu .menu-dropdown .nav-link:hover,
[data-layout="horizontal"] .navbar-menu .menu-dropdown .nav-link.active,
[data-layout="horizontal"] .app-menu .dropdown-menu .dropdown-item:hover,
[data-layout="horizontal"] .app-menu .dropdown-menu .dropdown-item.active {
    color: var(--vz-primary) !important; /* 메뉴 오버 시 우리 메인 포인트인 비비드 블루 */
    background-color: rgba(74, 108, 247, 0.08) !important; /* 아주 연한 파란 테두리 느낌 */
    font-weight: 600;
}

/* 가로형 메뉴(Horizontal) 공간 부족으로 마지막 메뉴가 'More'로 빠지는 현상 방지를 위한 여백 축소 */
[data-layout="horizontal"] .navbar-menu .navbar-nav > .nav-item > .nav-link {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
}

[data-layout="horizontal"] .navbar-menu .navbar-nav > .nav-item > .nav-link > i {
    margin-right: 0.3rem !important; /* 아이콘과 글씨 사이 간격 조정 */
}

/* ==========================================================
   글로벌 렌더링 강제 제어 및 세부 튜닝
========================================================== */
body, html {
    letter-spacing: -0.3px;
    -webkit-font-smoothing: antialiased; /* 글씨 렌더링 극한으로 선명하게 */
    -moz-osx-font-smoothing: grayscale;
}

/* 폼 컨트롤 (입력칸) 강제 크기 확대 및 테두리 선명화 */
.form-control, .form-select, .input-group-text {
    font-size: 0.9375rem !important; /* 15px 수준 (1rem=16px 기준) */
    padding: 0.65rem 1rem !important;
    color: #111827 !important;
    border: 1px solid #ced4da !important;
}

/* 탑바 헤더의 검색창(.app-search) 아이콘 좌측 정렬 및 텍스트 겹침 방지 (form-control 글로벌 !important 덮어쓰기 복구) */
.app-search .form-control {
    padding-left: 2.5rem !important; /* 왼쪽 아이콘 들어갈 공간 확보 */
    padding-right: 1rem !important;
}

.app-search .search-widget-icon {
    position: absolute !important;
    left: 13px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
}

.app-search .search-widget-icon-close {
    right: 13px !important;
    left: auto !important;
}

/* ==========================================================
   타이포그래피(Typography) 시스템 전면 개편
   : 상용 테마의 소심한 폰트 스케일을 버리고, 대시보드 성격에 맞는 웅장하고 선명한 타이틀 적용
========================================================== */
/* 1. 페이지 최상단 메인 타이틀 (예: 기안작성함, 현장별 손익현황 등) */
.page-title-box h4,
.page-title-box .mb-sm-0 {
    font-size: 1.75rem !important; /* 약 28px의 거대한 스케일로 압도적 가시성 부여 */
    font-weight: 800 !important;   /* Extra Bold 수준의 두께로 단단함 강조 */
    color: #111 !important;        /* 흐릿한 회색을 퓨어 블랙으로 교체 */
    letter-spacing: -1px !important; /* 자간을 타이트하게 좁혀 세련미 극대화 */
    line-height: 1.2 !important;
}

/* 2. 각종 제목, 라벨, 폼 타이틀 선명하게 */
.form-label, .fw-semibold, .card-title {
    font-weight: 600 !important;
    color: #111 !important; /* 어중간한 회색이 아닌 완전 블랙으로 명확하게 */
    font-size: 0.9375rem !important;
}

/* ==========================================================
   프리미엄 레거시 (Saerom Crisp) 디자인 언어 적용
   : 폼 필드와 그룹핑 라벨을 어중간한 흐릿한 선에서 블랙/그레이 기반 딱 떨어지게 통일
========================================================== */
.form-control, .form-select, .form-control:read-only {
    border: 1px solid #ccc !important; /* 뚜렷한 진회색 테두리복원 */
    color: #111 !important;            /* 입력 텍스트 진하게 */
    background-color: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: #111 !important;     /* 포커스시 확실한 블랙라인 */
    box-shadow: none !important;
}
/* 입력폼 좌측 타이틀(기안일 등) : 블랙 폰트, 연한 블랙계열 회색 배경 */
.input-group-text, .bg-light {
    background-color: #f6f6f6 !important; /* 흰색과 구별되는 연한 회색 */
    color: #111 !important;
    border: 1px solid #ccc !important;    /* 테두리도 명확히 */
    font-weight: 600 !important;
}
/* 대시보드 위젯 카드 하단 테두리 선명도 & 색상 구별 강화 (특히 붉은계열 2개 혼동 방지) */
.border-primary { border-color: #495EF4 !important; }
.border-success { border-color: #1AADAD !important; }
.border-danger  { border-color: #E51C69 !important; } /* 반려함: 선명하고 강렬한 빨강/자주 */
.border-warning { border-color: #F59E0B !important; } /* 보류함: 확실히 대비되는 진한 주황/호박색 */
.border-secondary { border-color: #6B7280 !important; }

/* 1. 버튼 공통: 단단하고 선명한 직사각형 느낌 (레거시 크기 복원) */
.btn {
    font-size: 0.9375rem !important; /* 15px */
    font-weight: 600 !important;     /* 굵고 선명하게 */
    padding: 0.75rem 1.7rem !important; /* 위아래 간격을 도톰하게, 좌우 넉넉하게 */
    border-radius: 4px !important;   /* 모서리 각지게 */
    box-shadow: none !important;     /* 흐리멍텅한 그림자 완벽 제거 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    letter-spacing: -0.3px;
}

.btn-sm {
    font-size: 0.8125rem !important; /* 13px */
    padding: 0.4rem 1rem !important;
    height: auto !important;
    line-height: 1.5 !important;
}

/* ==========================================================
   Input Group & Button Group 부착 컴포넌트 둥글기 리셋
   (버튼이 연속될 때 중간에 둥글기가 겹치는 현상 제거)
========================================================== */
.input-group > .btn:not(:first-child),
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child),
.btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px; /* 경계선 두꺼워짐 방지 */
}

.input-group > .btn:not(:last-child),
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-text:not(:last-child),
.btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 2. 컬러 스킴 강제 맵핑 (딱 떨어지는 컬러) */
/* Primary (사업장 등록, 기안작성 등) */
.btn-primary, .bg-primary { background-color: #495EF4 !important; border: 1px solid #495EF4 !important; color: #fff !important; }
.btn-outline-primary { border: 1px solid #495EF4 !important; color: #495EF4 !important; background-color: #fff !important; }

/* Dark (검색 버튼 등) */
.btn-dark { background-color: #111 !important; border: 1px solid #111 !important; color: #fff !important; }
.btn-outline-dark { border: 1px solid #111 !important; color: #111 !important; background-color: #fff !important; }

/* Light / White (초기화, 명부 등) */
.btn-light, .btn-white { background-color: #fff !important; border: 1px solid #bbb !important; color: #666 !important; }

/* Success (엑셀 다운로드 등) */
.btn-success, .bg-success { background-color: #1AADAD !important; border: 1px solid #1AADAD !important; color: #fff !important; }

/* 3. 하단 목록 라벨/상태 뱃지 (레거시 box-round-01 과 통일) */
.badge, .box-round-01, small {
    font-size: 0.8125rem !important; /* 13px 수준 */
}

/* 알약 형태 라벨 공통 속성 */
.badge {
    font-weight: 600 !important;
    padding: 0.4rem 0.8rem !important; /* 좁지않고 넓게 */
    border-radius: 20px !important;  /* 완벽한 알약 형태 */
    box-shadow: none !important;
    letter-spacing: -0.3px;
    border: 1px solid transparent; 
}

/* 상태 뱃지 전용 (진행중 등 soft 스타일) - 선명한 톤다운 유지 */
.badge.bg-primary-subtle, .badge.badge-soft-primary {
    background-color: #E8EBFF !important;
    color: #495EF4 !important;
    border: 1px solid #C4CCFF !important;
}

/* 흐릿한 회색 글씨들(Muted) 보조 수단으로 활용 */

/* ==========================================================
   테이블 (Table) 극강 선명도 및 여백 세팅 
========================================================== */
.table {
    color: #111827 !important;
    font-size: 0.9375rem !important; /* 테이블 본문 데이터 글자크기 15px 상응 */
}

/* 헤더 제목은 위계에 따라 본문보다 은은하고 살짝 작게 */
.table th, .table thead th {
    font-size: 0.875rem !important; /* 테이블 헤더 14px 상응 */
    font-weight: 600 !important;
    color: #374151 !important; 
    background-color: #ffffff !important; 
    border-bottom: 2px solid #d1d5db !important; /* 헤더 아래 선만 두껍게 */
    border-top: none !important;
    padding: 1.2rem 0.6rem !important; /* 좁았던 위아래 간격 대폭 확장 */
}

/* 테이블 본문(Body) 데이터 텍스트 선명하게 (단, borderless 예외 처리) */
.table td {
    font-weight: 500 !important;
    vertical-align: middle !important;
    padding: 1rem 0.6rem !important; /* 셀 안의 텍스트가 시원하게 보이도록 상하 여백 추가 */
}

/* 일반 테이블은 명확한 가로선 부여 */
.table:not(.table-borderless) td {
    border-bottom: 1px solid #f3f4f6 !important;
}

/* borderless 테이블은 강렬한 선을 지워서 위젯, 차트 레이아웃 짤림 현상 방지 */
.table.table-borderless td, 
.table.table-borderless th,
.table.table-borderless thead th {
    border-bottom: 0 !important;
}

/* ==========================================================
   전체 배경 & 카드(Box) 컨테이너 선명도 보정 
   : 흐릿한 회색 배경을 제거하고 완전한 화이트와 명확한 테두리로 구획 분리
========================================================== */
body, .page-content, .main-content {
    background-color: #fff !important; /* 흐릿한 회색 배경 완벽 차단 */
}

/* 카드 UI 플랫(Flat) & 선명 모던 스타일 적용 */
.card {
    border: 1px solid #ccc !important;   /* 배경이 하얗게 변했으므로 테두리를 진회색으로 명확하게 그어줌 */
    box-shadow: none !important;         /* 흐릿한 그림자 완전 제거 */
    border-radius: 4px !important;       /* 모서리도 버튼들과 동일한 4px로 통일 */
    background-color: #fff !important;
}


/* ==========================================================
   ���� CRM ���̺� ����ȭ (Unified Table Types)
========================================================== */
/* ���� ���Ͽ� Ŭ���� �߰� */
.table-type-list thead th,
.table-type-widget thead th {
    font-size: 0.875rem !important;
    text-transform: uppercase;
}

/* 1. ����Ʈ�� ���̺� (.table-type-list) 
   - ����� �ִ� �ѷ��� ���, �ܴ��� ���� �� (������Ȳ, ���Ǿ��� � ����) */
.table.table-type-list thead th {
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #ccc !important;
    border-top: 1px solid #ccc !important; 
    color: #374151 !important;
    font-weight: 700 !important;
    padding: 1.2rem 0.6rem !important;
}
.table.table-type-list td {
    border-bottom: 1px solid #e5e7eb !important;
}

/* 2. ������ ���̺� (.table-type-widget)
   - ��� ��� ����, ����(���Ҽ�)�� �̿��� �������� ������ (������, �ƹ�Ÿ ���� �� ����) */
.table.table-type-widget thead th {
    background-color: transparent !important; 
    border-bottom: 1px solid #e5e7eb !important;
    border-top: none !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    padding: 1rem 0.6rem !important;
}
.table.table-type-widget td {
    border-bottom: 1px dashed #e5e7eb !important; 
}

/* ������ �� ���� ����ϰ� ���� */
.table-type-widget tbody tr:last-child td,
.table-type-list tbody tr:last-child td {
    border-bottom: none !important;
}