/* =================================
   Global Styles & Resets
   ================================= */
html {
    font-family: sans-serif;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;}

body {

    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    color: #333;
    background-color: #f4f7f6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* =================================
   Layout for Index Page (.page-index)
   ================================= */

body.page-index {
    --summary-font-size: clamp(12px, 1.5vmin, 30px); /* Base font size for index summary */
    overflow: hidden;/* overflow: hidden; was here, but is now handled by the global body style */
    line-height: 3;
    padding: 10px;
}

/* New main layout container */
.main-layout-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent main scrollbars */
}

.top-section {
    flex: 3; /* Takes even more available space (3/4 of total) */
    overflow-y: auto; /* Allow vertical scrolling for summary */
    padding: 5px; /* Keep padding from original container */
    box-sizing: border-box;
    background-color: #fff; /* Match original container background */
}

.bottom-section {
    display: flex;
    flex: 1; /* Takes less available space (1/3 of total) */
    border-top: 1px solid #ccc;
    background-color: #f9f9f9;
}

.bottom-left-panel {
    flex: 3; /* Takes 75% of the bottom section */
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
    border-right: 1px solid #eee; /* Keep existing border */
}

.bottom-right-panel {
    flex: 1; /* Takes 25% of the bottom section */
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Login Form Styling */
#login-form label {
    display: block;
    margin-bottom: 0px; /* Make text box appear immediately below */
    font-weight: bold;
}

#login-form input[type="text"],
#login-form input[type="password"] {
    width: 50%;
    padding: 8px;
    margin-top: 0px; /* Ensure no top margin */
    margin-bottom: 4px; /* Reduced by 60% from 10px for password input */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

#login-form input[type="text"] {
    margin-bottom: 1px; /* Reduced by 60% from 2px, setting to 1px */
}

#login-form button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

#login-form button:hover {
    background-color: #0056b3;
}

#login-message {
    margin-top: 10px;
    color: red;
    font-weight: bold;
}

/* Login Status List Styling */
#login-status-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#login-status-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

#login-status-list li:last-child {
    border-bottom: none;
}


/* =================================
   Shared Component Styles
   ================================= */

h1, h2 {
    color: #0056b3;
    border-bottom: 2px solid #eef;
    padding-bottom: 10px;
    margin-top: 0;
}

h2 {
    margin-top: 30px;
    font-size: 1.5em;
}

/* 테이블을 감싸는 컨테이너 */
.summary-table-container {
    width: 100%;
    overflow-x: auto;
}

/* 기본 테이블 */
.summary-table {
    width: 100%;          /* 화면 너비에 맞게 */
    min-width: auto;      /* 최소 너비 제한 제거 */
    border: 1px solid #ddd;
    border-collapse: collapse;
    font-size: var(--summary-font-size);
    box-shadow: 0 2px 3px rgba(0,0,0,0.05);
}

.summary-table th, .summary-table td {
    border: 1px solid #ddd;
    font-size: clamp(12px, 0.9vw, 40px);
    line-height: 1.5em;
    padding: 2.5vh 0.1vw;
    text-align: center;
    white-space: nowrap;
}

/* 테이블 헤더 스타일 */
.summary-table thead th {
    background-color: #343a40; /* Dark Grey/Black */
    color: #ffffff;
    font-weight: bold;
    top: 0;
}


/* 행 스타일 */
.summary-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.summary-table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Default and hover states for Group D filterable cells */
.summary-table td.group-d-filterable {
    background-color: #343a40 !important; /* Dark Grey/Black (matches Group C header) */
    color: #ffffff !important;
}

/* 📱 모바일 대응 */
@media screen and (max-width: 768px) {
    .summary-table {
        min-width: auto;   /* 모바일에서는 최소 너비 제거 */
        font-size: clamp(10px, 2.5vw, 18px);
    }
    .summary-table th, .summary-table td {
        white-space: normal; /* 줄바꿈 허용 → 화면에 꽉 차게 */
        padding: 8px 4px;
    }
}

/* 💻 FHD/UHD 대응 */
@media screen and (min-width: 1920px) {
    .summary-table {
        font-size: clamp(16px, 0.8vw, 28px);
    }
    .summary-table th, .summary-table td {
        padding: 1.2vh 0.8vw;
    }
}


/* Column widths tied to font size */
.page-index .summary-table #summary-col-1,
.page-index .summary-table #summary-col-2 {
    width: 2vw; /* 화면 너비의 10% */
}

.page-index .summary-table #summary-col-3 {
    width: 5vw;
}

.page-index .summary-table #TotalValue {
    width: 8vw;
}

.summary-table tbody tr:hover {
    background-color: #f1f1f1;
}

.progress-bar-container {
    width: 100%;
    background-color: #e9ecef;
    border-radius: 4px;
    position: relative;
    height: 22px;
    min-width: 100px;
    overflow: hidden;
}

.progress-bar {
    background-color: #28a745;
    height: 100%;
    border-radius: 4px 0 0 4px;
    position: absolute; /* Enable stacking */
    top: 0;
    left: 0;
}

.progress-bar.bar1 {
    z-index: 1; /* Ensure bar1 is the base */
}

.progress-bar.bar2 {
    z-index: 2; /* Ensure bar2 is on top */
    height: 40%; /* Make Actual bar 40% height */
    top: 30%; /* Center it vertically (100-40)/2 = 30 */
}

.progress-bar-container span {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    line-height: 22px;
    color: #333;
    font-weight: normal; /* Changed to normal */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* --- Progress Bar Spacing Control --- */
.page-index .main-item .progress-bar-container:first-child {
    margin-bottom: 1.5vh; /* Use viewport height for responsive spacing between the two graphs */
    /* 원하는 간격으로 조정하세요 (예: 0.5vh, 10px 등) */
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px; /* Adjust as needed */
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#details-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#details-table th, #details-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#details-table th {
    background-color: #f2f2f2;
}

.discipline-header {
    cursor: pointer;
}

.discipline-header:hover {
    background-color: #6c757d; /* Grey for hover */
}

.discipline-header.selected-discipline {
    background-color: #28a745; /* Green for selected */
}

/* Single Table Styles */
.summary-table.single-table th[colspan="2"] {
    text-align: left;
}

.jum-rep-tep-row > td {
    background-color: #f4f7f6 !important; /* Default background for all cells in this row */
}

.jum-rep-tep-row > td.has-data {
    background-color: #FFBE40 !important; /* Override for cells with data */
}

.summary-table .highlight-row > td {
    background-color: #FFBE40 !important;
}

/* .main-item.jum-rep-tep-row > td {
    background-color: transparent;
} */

.main-item > td {
    background-color: #e9ecef; /* Light grey for main rows */
}

.main-item-header {
    text-align: center !important;
}

.sub-item-header {
    text-align: right !important;
    padding-right: 0px !important;
    font-weight: bold; /* Set font-weight to bold */
}

.sub-item .total-cell,
.sub-item .discipline-value {
    text-align: right;
}

.total-cell {
    text-align: center;
    font-weight: bold;
}

/* Project Status Styles */
#project-status-cell {
    text-align: left;
    font-size: var(--summary-font-size);
    font-weight: bold;
    color: #fff; /* White text */
    background-color: #000; /* Black background */
    padding: 5px 5px;
    padding-left: 10px; /* Changed padding-left to 40px */
}

#project-status-cell .arrow-icon {
    color: #28a745; /* Green arrow */
    margin-right: 8px;
    /* font-size: 20px; */
    vertical-align: middle;
}

#project-status-cell #datepicker {
    border: none;
    background: transparent;
    font-weight: bold;
    font-size: var(--summary-font-size);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff; /* White text */
    cursor: pointer;
    width: 6em; /* Adjust width */
    vertical-align: middle;
    padding-left: 0px;
}

#project-status-cell #datepicker:focus {
    outline: none;
}

#project-status-cell span {
    vertical-align: middle;
}
.vertical-text {
    vertical-align: middle; /* Keep vertical alignment for the td content */
    padding-top: 10px;
    padding-bottom: 10px;
}

.rfc-Rfc-label {
    text-align: center;
    font-weight: bold;
}

.mcc-mcc-label {
    text-align: center;
    font-weight: bold;
}

.punch-text {
    display: block; /* Make it a block element */
    width: fit-content; /* Shrink to fit content */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    text-align: center; /* Center text within the block */
}
.rfc-mcc-label {
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    height: 100%; /* Ensure it takes full height of the row */
    min-width: 10px; /* Keep minimum width */
    font-weight: bold !important;
}

.discipline-value {
    font-weight: normal; /* Set font-weight to normal for discipline values */
}

.sub-item td {
    text-align: center !important;
}

.progress-bar-text {
    color: #fff; /* Default text color */
    font-size: var(--summary-font-size);
    line-height: 8.8px; /* Set line height to match bar2 height for vertical centering */
    position: absolute;
    /* width: 100%; */ /* Removed to allow right positioning */
    /* text-align: center; */ /* Removed to allow right positioning */
    /* top: 0; */ /* Removed to allow right positioning */
    font-weight: normal; /* Ensure normal font weight */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.summary-table th, .summary-table td {
    text-align: center !important;
}

#treeview-container {
  margin-left: -22px; /* 음수 값으로 왼쪽으로 이동 */
}

#treeview-container.jstree-default .jstree-node {
  min-height: 20px !important;
  line-height: 20px !important;
  margin-left: 16px !important;
  min-width: 16px !important;
}
#treeview-container .jstree-anchor:hover {
    background-color: #a8e4ff !important;
    transition: background-color 0.3s ease !important;
}
#treeview-container .jstree-node {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    min-height: 16px !important;
}
#treeview-container .jstree-anchor {
    line-height: 16px !important;
    height: 16px !important;
    font-size: 12px; /* 원하는 크기로 조정 (예: 14px, 18px 등) */
    padding: 4px 0px 0px 0px !important;
}
#treeview-container .jstree-ocl {
    width: 16px !important;
}
#treeview-container .jstree-icon {
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
    vertical-align: middle important; /* 텍스트와 수직 정렬 */
}
#treeview-container .jstree-themeicon-custom {
    background-size: 16px 16px !important;
}

/* WBS & PTW AG Gride */
.ag-theme-alpine .ag-cell {
    font-weight: normal; /* Removed !important */
    font-size: 12px; /* Removed !important */
    border-right: 0.1px solid rgba(0, 0, 0, 0.1); /* Removed !important */
}

.ag-theme-alpine .ag-header-cell {
    font-size: 11px;
    font-weight: bold;
    align-items: center;
    padding-left: 1px; 
    padding-right: 1px;
}

.ag-theme-alpine .ag-header-cell-label {
  display: flex;
  align-items: center;   /* 라벨만 중앙 정렬 */
}

.ag-theme-alpine .ag-header-cell-label .ag-header-cell-text {
  flex: 1;
  text-align: center;   /* 라벨만 중앙 정렬 */
  margin-right: 0; 
}

/* DOC AG Gride */
.ag-header-cell-label {
  justify-content: center; /* 가운데 정렬 */
}

/* Override discipline header styles for index.php */
body.page-index .discipline-header {
    cursor: default !important; /* Remove pointer cursor */
}

body.page-index .summary-table thead th.discipline-header:hover {
    background-color: #343a40 !important; /* Maintain original background color on hover */
}

/* Fix for datepicker being visible on load */
.ui-datepicker {
    display: none;
}

/* Ag-Grid 페이지네이션 높이 조절 */
.ag-theme-alpine .ag-paging-panel {
    height: 45px; /* 기본값은 약 40px입니다. 필요에 따라 조절하세요. */
    min-height: 35px;
    padding: 0 !important; /* 상하 패딩을 제거합니다. */
}