/* style.css */

/* Variables for consistent styling */
:root {
    --primary-blue: #007bff;
    --dark-blue: #0056b3;
    --light-gray: #f9fafb;
    --medium-gray: #e0e0e0;
    --dark-gray: #333333;
    --text-gray: #6a6a6a;
    --btton-gray: #6a6a6a;
    --border-radius-base: 8px;
    --box-shadow-light: 0 4px 12px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.12);
    --disabled-gray : #fafafa;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Basic Reset and Font */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', 'Noto Sans KR', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-gray);
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top */
    min-height: 100vh;
    box-sizing: border-box;
    color: var(--dark-gray);
    line-height: 1.6;
}

/* App Wrapper for overall layout */
.app-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent body scroll if main content overflows */
}

/* Top Bar Styling */
.top-bar {
    background-color: #ffffff;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    flex-shrink: 0; /* Prevents shrinking */
    
    border-bottom: 5px solid transparent;
    border-image: linear-gradient(to right, #ff0000, blue) 1;
    border-image-slice: 1;
    /* border-image-width: 5px; */
}

.top-bar-left .logo {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.top-bar-left .logo .text-blue-500 {
    color: #3b82f6; /* Tailwind blue-500 */
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.user-dropdown-container {
    position: relative; /* 드롭다운 메뉴의 기준점 */
    display: flex; /* user-info와 아이콘 그룹이 옆으로 나란히 정렬 */
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-gray);
    cursor: pointer;
    padding: 5px 0; /* 클릭 영역 확보 */
}

.user-info .user-name {
    font-weight: 500;
}

.user-info .dropdown-toggle-icon {
    transition: transform 0.2s ease;
}
.user-dropdown-container.active .dropdown-toggle-icon {
    transform: rotate(180deg); /* 드롭다운 열릴 때 아이콘 회전 */
}

/* Dropdown Menu Styling */
.dropdown-menu {
    position: absolute;
    top: 100%; /* user-info 바로 아래 */
    right: 0; /* user-info의 오른쪽에 정렬 */
    background-color: #ffffff;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-medium);
    min-width: 120px;
    z-index: 1000; /* 다른 요소 위에 표시 */
    padding: 0px;
    opacity: 0; /* 초기에는 투명하게 */
    visibility: hidden; /* 초기에는 숨김 */
    transform: translateY(10px); /* 아래로 살짝 내려와서 나타나는 애니메이션 */
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    color: var(--dark-gray);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
    background-color: #f0f2f5;
    color: var(--primary-blue);
}

.icon-group {
    display: flex;
    gap: 15px;
}

.icon-group {
    display: flex;
    gap: 15px;
}

.icon-group i {
    font-size: 18px;
    color: var(--text-gray);
    cursor: pointer;
    transition: color 0.2s ease;
}

.icon-group i:hover {
    color: var(--primary-blue);
}

/* Main Application Area (Sidebar + Content) */
.app-main {
    display: flex;
    flex-grow: 1; /* Takes remaining vertical space */
    overflow: hidden; /* For internal scrolling if content overflows */
}

/* Sidebar Styling */
.sidebar {
    width: 200px;
    background-color: #ffffff; /* 메뉴바 배경을 흰색으로 변경 */
    padding-right: 15px;
    flex-shrink: 0; /* Prevents shrinking */
    overflow-y: auto; /* Enable scrolling for long menus */
    box-shadow: 2px 0 5px rgba(0,0,0,0.05); /* 사이드바 자체 그림자 추가 */
}

.sidebar-header {
    background: linear-gradient(to right, #D41A41, #8A002A); /* 빨간색 계열 그라데이션 */
    padding: 8px 20px; /* 패딩 조정 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 약간의 그림자 추가 */
}

.sidebar-title {
    font-size: 20px;
    font-weight: bold;
    /*color: var(--dark-gray);*/
    color: #ffffff; /* 그라데이션 배경에 맞게 글자색을 흰색으로 변경 */
    margin: 0;
    cursor: pointer;
}

.sidebar-title:hover {
    color: yellow;
}

.sidebar-nav {
    padding: 0; /* 좌우 패딩 제거 */
    border-right: 1px solid var(--medium-gray);
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    margin-bottom: 0; /* 기본 마진 제거 */
    border-bottom: 1px solid #f0f2f5; /* 구분선 추가 */
}

.menu-item:last-child {
    border-bottom: none; /* 마지막 항목 구분선 제거 */
}

.menu-item .menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px; /* 패딩 조정 */
    color: #333333; /* 텍스트 색상 */
    font-weight: 600; /* 폰트 굵기 */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-left: 3px solid transparent; /* 활성 메뉴 표시를 위한 좌측 테두리 */
    border-bottom: 1px solid #f0f2f5;
    background-color: #f0f2f570;
}

.menu-item .menu-link:hover {
    background-color: #f0f2f570; /* 호버 시 배경색 변경 */
    color: var(--primary-blue);
    border-left-color: #a7d9ff; /* 호버 시 연한 파란색 테두리 */
}

.menu-item.active > .menu-link {
    background-color: #c6ddff; /*#e6f0ff; /* 활성 메뉴 배경색 (옅은 파랑) */
    color: var(--primary-blue); /* 활성 메뉴 텍스트 색상 */
    border-left-color: var(--primary-blue); /* 활성 메뉴 좌측 테두리 */
    font-weight: 700; /* 활성 메뉴 폰트 굵기 */
}

/* Submenu Styling */
.submenu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 20px; /* 하위 메뉴 들여쓰기 */
    max-height: 0; /* Initially hidden */
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Smooth collapse/expand */
    position: relative; /* 점선 위치 지정을 위해 */
}

.submenu-list::before {
    content: '';
    position: absolute;
    left: 29px; /* 부모 메뉴 링크의 시작점과 일치하도록 조정 */
    top: 0;
    bottom: 16px;
    width: 1px;
    background: repeating-linear-gradient(
        to bottom,
        #cccccc, /* 점선 색상 */
        #cccccc 2px, /* 점선 길이 */
        transparent 2px, /* 투명 길이 */
        transparent 2px /* 투명 길이 */
    );
    /* 이미지와 유사한 점선 패턴 조정을 위해 값 변경 가능 */
}

.menu-item.expanded .submenu-list {
    max-height: 500px; /* Sufficiently large value for expansion */
}

.submenu-item {
    padding: 6px 0px 6px 28px; /* 들여쓰기 추가 및 좌우 패딩 제거 */
    color: #555555;
    font-size: 13px;
    cursor: pointer;
    border-radius: 0; /* 하위 메뉴 항목에는 둥근 모서리 제거 */
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}

.submenu-item::before {
    content: '';
    position: absolute;
    left: 10px; /* 점선의 가로 위치 조정 */
    top: 50%;
    transform: translateY(-50%);
    width: 8px; /* 가로선 길이 */
    height: 1px; /* 가로선 두께 */
    background-color: #cccccc; /* 가로선 색상 */
}

.submenu-item:hover {
    background-color: #f0f2f570; /* 호버 시 배경색 변경 */
    color: var(--primary-blue);
}

.submenu-item.active {
    background-color: #bdd8ff70;; /* 활성 하위 메뉴 배경색 */
    color: var(--primary-blue);
    font-weight: 600; /* 활성 하위 메뉴 폰트 굵기 */
}

.submenu-toggle {
    transition: transform 0.3s ease;
    font-size: 13px; /* 아이콘 크기 조정 */
    color: #999999; /* 아이콘 색상 */
}

.menu-item.expanded .submenu-toggle {
    transform: rotate(180deg); /* Rotate arrow when expanded */
}

/* Content Area Styling */
.content-area {
    flex-grow: 1; /* Takes remaining horizontal space */
    /*padding: 10px 20px;*/
    background-color: #ffffff;
    overflow-y: auto; /* Enable scrolling for content */
    display: flex;
    flex-direction: column;
    min-width: 1280px;
}

/* Content Header (Page Title & Actions) */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-block: 5px;
    border-bottom: 1px solid var(--medium-gray);
}

.content-page-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--dark-gray);
    margin: 0;
}

.content-header-actions .action-button {
    padding: 5px 10px;
    border: 1px solid var(--medium-gray);
    border-radius: 5px;
    background-color: #ffffff;
    color: var(--text-gray);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.content-header-actions .action-button:hover {
    background-color: #f0f2f5;
    border-color: #b0b0b0;
}

.content-header-actions .action-button.primary {
    background-color: var(--primary-blue);
    color: #ffffff;
    border-color: var(--primary-blue);
}

.content-header-actions .action-button.primary:hover {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.content-header-actions .action-button.icon-only {
    width: 32px; /* Fixed width for icon buttons */
    height: 32px;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Circular for icon buttons */
}

/* Filter Bar Styling */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f5f7fa;
    padding: 5px 15px;
    /*border-radius: var(--border-radius-base);*/
    margin-bottom: 10px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-gray);
    font-size: 14px;
    padding: 0px 0px;
}

.filter-group p {
    display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5em;
    margin-block: 0em;
}

.filter-group label {
    flex-shrink: 0;
}

.filter-group label.content {
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid var(--medium-gray);
    margin-left: -5px;
}

.filter-group select,
.filter-group input[type="text"],
.filter-group input[type="date"],
.filter-group input[type="month"],
.filter-group input[type="number"],
.filter-group input[type="week"] {
    font-family: inherit;
    padding: 6px 10px;
    border: 1px solid var(--medium-gray);
    border-radius: 5px;
    font-size: 13px;
    color: var(--dark-gray);
    outline: none;
    transition: border-color 0.2s ease;
}

.filter-group select:focus,
.filter-group input[type="text"]:focus,
.filter-group input[type="date"]:focus,
.filter-group input[type="month"]:focus  {
    border-color: var(--primary-blue);
}

.filter-group select:invalid {
    color: gray;
}

.filter-group input[type="month"],
.filter-group input[type="date"],
.filter-group input[type="datetime"],
.filter-group select {padding: 3px 10px;}

.filter-group input[type="date"] {width: 90px;}

.filter-group input[type="text"],
.filter-group input[type="number"] {padding: 4px 10px;}

.filter-group label input[type="checkbox"] {vertical-align: text-top;}
.filter-group label.content {height: 21px;}

.search-group {margin-left: auto; /* Push search to the right */}
.search-group input {min-width: 150px;}

.search-group button {
    padding: 6px 8px;
    background-color: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    line-height: 1em;
}

.search-group button:hover {
    background-color: var(--dark-blue);
}

/* Content Panels Layout */
.content-panels {
    display: flex;
    gap: 10px; /* Space between panels */
    flex-wrap: wrap; /* Allow panels to stack on smaller screens */
    flex-grow: 1;
}

.panel {
    background-color: #ffffff;
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel button {background-color: var(--btton-gray);}
.panel button:hover {background-color: var(--dark-gray);}

.full-panel {
    flex: 1;
    width: 100%;
}

.left-panel {
    flex: 1; /* Takes up available space, can be adjusted */
    min-width: 250px; /* Minimum width for left panel */
}

.right-panel {
    flex: 2; /* Takes up more space than left panel */
    min-width: 300px; /* Minimum width for right panel */
}

.panel-header {
    background-color: #f0f2f5;
    padding: 4px 15px;
    border-bottom: 1px solid var(--medium-gray);
}

.panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-gray);
    margin: 0;
}

.panel-content {
    padding: 20px;
    flex-grow: 1; /* Allow content to fill space */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Center content vertically */
    align-items: flex-start; /* Center content horizontally */
    min-height: 150px; /* Minimum height for visual balance */
    color: var(--text-gray);
    font-size: 13px;
    gap: 10px;
}

.panel-content p {
    display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8em;
    margin-block: 0em;
}

.panel-content select,
.panel-content input[type="text"],
.panel-content input[type="date"],
.panel-content input[type="password"],
.panel-content input[type="email"],
.panel-content input[type="month"],
.panel-content textarea {
    font-family: inherit;
    padding: 6px 10px;
    border: 1px solid var(--medium-gray);
    border-radius: 5px;
    font-size: 13px;
    color: var(--dark-gray);
    outline: none;
    transition: border-color 0.2s ease;
}

.panel-content select:focus,
.panel-content input[type="text"]:focus,
.panel-content input[type="date"]:focus,
.panel-content input[type="password"]:focus,
.panel-content input[type="email"]:focus,
.panel-content input[type="month"]:focus  {border-color: var(--primary-blue);}

.panel-content input[type="month"],
.panel-content input[type="date"],
.panel-content input[type="datetime"] {padding: 5px 10px;}

.panel-content select {padding: 4px 10px;}
.panel-content label input[type="checkbox"] {vertical-align: text-top;}
.panel-content select, 
.panel-content input[type=date] {padding-block: 2px;}
.panel-content input[type=email],
.panel-content input[type=password],
.panel-content input[type=text] {padding-block: 3px;}
.panel-content select:disabled {background-color: var(--disabled-gray);}
.panel-content label.content {border: 1px solid var(--medium-gray); border-radius: 5px; padding: 2px 10px; height: 20px;}
.panel-content button {
    padding: 6px 8px;
    background-color: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    line-height: 1em;
}

.panel-content button:disabled {
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
    color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
    border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
    cursor: default;
}

div.eoslistview { font-size: 13px; }
dialog.popup { display: flex; flex-direction: column; gap: 5px; min-height: 220px; max-height: 80%; min-width: 250px; max-width: 80%; border: #5d5d5d solid 1px; border-radius: 3px; padding: 10px; outline: none;}
dialog.popup main.content { display: flex; flex-direction: column; padding: 15px; flex-grow: 1; color: var(--text-gray); font-size: 14px; font-family: inherit;}
dialog.popup main.content div.line { display: flex; flex-direction: row; gap: 8px;}
dialog.popup main.content label {flex-shrink: 0;}
dialog.popup select, dialog.popup input[type="text"], dialog.popup input[type="date"], dialog.popup input[type="month"], dialog.popup input[type="number"], dialog.popup label.content { font-family: inherit; border: 1px solid var(--medium-gray); border-radius: 5px; font-size: 13px; color: var(--dark-gray); outline: none; transition: border-color 0.2s ease;}
dialog.popup select { padding: 3px 10px; }
dialog.popup .panel-content label.content {margin-left: -5px; padding-block: 1px; background-color: #f5f6f7; }
dialog.popup .panel-content span {pointer-events: none;}

dialog.search { color: var(--dark-gray); padding: 0px; border: none; outline: none;}
dialog.search input, 
dialog.search select, 
dialog.search textarea,
dialog.search div {outline: none;} 

.flex-panel {background:#fff;border-radius:10px;padding:12px;box-shadow:0 2px 6px rgb(0 0 0 / 8%);display:flex;flex-direction:column;}
.flex-panel h2 {margin:0 0 10px 0;font-size:1.05rem;}
.flex-panel form {display: flex; gap:8px 12px; margin-bottom:10px; align-items: center; justify-content: space-between;}
.flex-panel form p {margin-block:0;}
.flex-panel form label {font-size:0.82rem;color:#555;}
.flex-panel form input,.flex-panel form select,.flex-panel form textarea {width:auto;padding:4px 6px;border:1px solid #d1d5db;border-radius:4px;font-size:0.9rem;box-sizing:border-box;}
.flex-panel textarea {grid-column:1 / -1;resize:vertical;}
.panel-actions {display:flex; gap:6px; justify-content: flex-end;}
.panel-actions button {/*flex:1;*/ border:none;border-radius:4px;padding:3px 6px;cursor:pointer;font-size: 0.9rem;}
.panel-actions button.primary {background-color:#2563eb;color:#fff;}
.panel-actions button.secondary {background-color:#e5e7eb;color:#111;}
.panel-actions button.danger {background-color:#dc2626;color:#fff;}
.table-host {margin-top:8px; overflow-x:auto;}
.table-host td {text-align: center;}
.section-spacer {margin-top:8px;border-top:1px solid #e5e7eb;padding-top:12px;}
.time-picker {display:flex;gap:4px;align-items:center;}
.time-picker select {width:50px;padding:4px 6px;border:1px solid #d1d5db;border-radius:4px;background:#fff;}

dialog.popup {color: var(--dark-gray);}
dialog.popup main.content form p { display: flex; flex-direction: row; margin-bottom: 8px; align-items: center; gap: 8px; }
dialog.popup main.content form p label[for] {color: #555; min-width: 70px; height: 1.5em;}
dialog.popup main.content form p label.content { padding-inline: 5px; border-radius: 5px; border: 1px solid var(--medium-gray); background-color: #fafafa;  }
dialog.popup main.content form p input[type=text],
dialog.popup main.content form p input[type=date] {padding: 2px 5px 3px;}
dialog.popup main.content form p select {padding: 2px 5px;}
dialog.popup main.content form p input[type=number] {width: 40px; text-align: right;}

section.iform {padding: 5px;}
section.iform form label {flex-shrink: 0;}
section.iform form select, dialog.popup input[type="text"], dialog.popup input[type="date"], dialog.popup input[type="month"], dialog.popup input[type="number"], dialog.popup label.content { font-family: inherit; border: 1px solid var(--medium-gray); border-radius: 5px; font-size: 13px; color: var(--dark-gray); outline: none; transition: border-color 0.2s ease;}
section.iform form select { padding: 3px 10px; }
section.iform form label.content {margin-left: -5px; padding-block: 1px; background-color: #f5f6f7; }
section.iform form span {pointer-events: none;}

section.iform {color: var(--dark-gray);}
section.iform form p { display: flex; flex-direction: row; margin-bottom: 8px; align-items: center; gap: 8px; }
section.iform form p label[for] {color: #555; min-width: 70px; height: 1.5em;}
section.iform form p label.content { padding-inline: 5px; border-radius: 5px; border: 1px solid var(--medium-gray); background-color: #fafafa;  }
section.iform form p input[type=text],
section.iform form p input[type=date] {padding: 2px 5px 3px;}
section.iform form p select {padding: 2px 5px;}
section.iform form p input[type=number] {width: 40px; text-align: right;}

table#tbcommutes tbody tr.selected td span.action-button {display: inline; position: absolute; right: 2px; top: 2px; background-color: yellowgreen;}
table#tbcommutes tbody tr.locked td {background-color: rgba(211, 211, 211, 0.5);}
table#tbcommutes tbody tr.locked td:nth-child(n+1):nth-child(-n+10),
table#tbcommutes tbody tr.locked td:nth-child(n+13):nth-child(-n+17) {pointer-events: auto;}
table#tbcommutes td a.appr-wait {color: #d97706; font-weight: bold;}
table#tbcommutes td a.appr-approved {color: #2563eb; font-weight: bold;}
table#tbcommutes td a.appr-done {color: inherit; font-weight: normal;}
table#tbcommutes td a.appr-reject {color: #dc2626; font-weight: bold; text-decoration: line-through;}
table#tbcommutes td a.appr-locked {color: inherit;}

table#tbcommutes td.clock-missing {cursor: pointer; background-color: #fed7aa;}
table#tbcommutes td.clock-missing:hover {outline: 2px dashed #f97316; outline-offset: -2px;}

table#tbcommutes td.manual-clock {background-color: #00000015; cursor: pointer;}
table#tbcommutes td.manual-clock > span.manual-clock-time {color: green}
table#tbcommutes td.manual-clock.appr-reject > span.manual-clock-time {color: #dc2626; text-decoration: line-through;}

span.apprroot {display: flex; flex-direction: row; gap : 10px; font-size: 13px;}
span.apprroot span {padding-right: 3px; padding-left: 1px;}
span.apprroot span.active {outline: 1px green solid; border-radius: 3px;}
span.apprroot span.active:hover {background-color: greenyellow; cursor: pointer;user-select: none;}
span.apprroot span.cancelable {outline: 1px #3b6fd8 solid; border-radius: 3px;}
span.apprroot span.cancelable:hover {background-color: rgb(180, 186, 255); cursor: pointer;user-select: none;}
span.apprroot span::before {content: '⚪';}
span.apprroot span.okay::before {content: '🔵';}
span.apprroot span.skip::before {content: '🟢';}
span.apprroot span.reject::before {content: '🔴';}

table#tbcommutes tbody tr.holiday.saturday td {color: #3b6fd8;}
table#tbcommutes tbody tr.holiday.sunday td,
table#tbcommutes tbody tr.holiday td {color: #d94a45;}

/*
table#tbcommutes tbody tr.holiday.saturday td:nth-child(-n+6) {color: #3b6fd8;}
table#tbcommutes tbody tr.holiday.sunday td:nth-child(-n+6),
table#tbcommutes tbody tr.holiday td:nth-child(-n+6) {color: #d94a45;}

*/