/* ============================================================
   expense-input 지출결의서 입력 페이지 전용 CSS
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   #expense-input-content 관련 스타일
   ═══════════════════════════════════════════════════════════ */

/* 카드 사용 입력 섹션 - Material Text Field 최적화 스타일 */
#expense-input-content .card-usage-input-field {
    --md-outlined-text-field-container-shape: 4px;
    --md-outlined-text-field-label-text-size: 14px;
    --md-outlined-text-field-input-text-size: 14px;
    --md-outlined-text-field-outline-width: 1px;
    --md-outlined-text-field-hover-outline-width: 2px;
    --md-outlined-text-field-focus-outline-width: 2px;
    --md-outlined-text-field-hover-outline-color: #9ca3af;
    --md-outlined-text-field-top-space: 4px;
    --md-outlined-text-field-bottom-space: 4px;
    --md-outlined-text-field-leading-space: 12px;
    --md-outlined-text-field-trailing-space: 12px;
    min-height: 40px;
    max-height: 40px;
}

/* Material Text Field 내부 input 높이 조정 */
#expense-input-content .card-usage-input-field::part(field) {
    min-height: 40px;
    max-height: 40px;
}

#expense-input-content .card-usage-input-field::part(input) {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.3;
}

/* readonly 필드 스타일 - 더 명확한 시각적 구분 */
#expense-input-content .card-usage-input-field[readonly] {
    --md-outlined-text-field-disabled-outline-color: #e5e7eb;
    --md-outlined-text-field-disabled-label-text-color: #6b7280;
    --md-outlined-text-field-disabled-input-text-color: #6b7280;
    opacity: 0.8;
    background-color: #f9fafb;
    border-radius: 4px;
}

/* 거래구분 필드는 클릭 가능하도록 pointer-events 허용 */
#expense-input-content #expense_transaction_type[readonly] {
    pointer-events: auto !important;
    cursor: pointer;
}

/* 활성화된 입력창 - 흰색 배경 */
#expense-input-content md-outlined-text-field:not([disabled]) {
    --md-outlined-text-field-container-color: #ffffff !important;
    background-color: #ffffff !important;
}

#expense-input-content md-outlined-text-field:not([disabled])::part(input) {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* 비활성화된 입력창 - 회색 배경 */
#expense-input-content md-outlined-text-field[disabled] {
    --md-outlined-text-field-disabled-container-color: #f9fafb !important;
    background-color: #f9fafb !important;
    opacity: 0.8;
}

#expense-input-content md-outlined-text-field[disabled]::part(input) {
    background-color: #f9fafb !important;
    color: #6b7280 !important;
}

/* 지급기한 입력창 - 항상 활성화 상태 (흰색) */
#expense-input-content #expense_payment_due_date {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* 성명 필드 - 입력 가능 필드 강조 */
#expense-input-content .employee-name-highlight {
    --md-outlined-text-field-outline-color: #d1d5db;
}

#expense-input-content .employee-name-highlight:focus-within {
    --md-outlined-text-field-focus-outline-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 거래구분 섹션 - 일반 input type="date" 스타일 (Material Design과 유사하게) */
/* 지급기한 입력창 - 기본 텍스트 숨기기 */
#expense-input-content input[type="date"].payment-due-date-input {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    height: 40px;
    color: transparent !important;
    background-color: transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* 지급기한 입력창 배경 */
#expense-input-content .payment-due-date-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    z-index: 1;
    pointer-events: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#expense-input-content input[type="date"].payment-due-date-input:hover ~ .payment-due-date-background {
    border-color: #9ca3af;
}

#expense-input-content input[type="date"].payment-due-date-input:focus ~ .payment-due-date-background {
    border-color: #3b82f6;
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* input type="date"의 기본 텍스트 숨기기 */
#expense-input-content input[type="date"].payment-due-date-input::-webkit-datetime-edit,
#expense-input-content input[type="date"].payment-due-date-input::-webkit-inner-spin-button,
#expense-input-content input[type="date"].payment-due-date-input::-webkit-calendar-picker-indicator {
    color: transparent;
    opacity: 0;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* 달력 아이콘만 표시 */
#expense-input-content input[type="date"].payment-due-date-input::-webkit-calendar-picker-indicator {
    opacity: 1;
    color: #64748b;
    width: 20px;
    height: 20px;
    right: 8px;
    cursor: pointer;
}

/* 지급기한 입력창 라벨 스타일 - 기본 위치 (입력창 안) */
#expense-input-content .payment-due-date-label {
    position: absolute;
    left: 12px;
    font-size: 14px;
    color: #64748b;
    background-color: white;
    padding: 0 4px;
    z-index: 3;
    pointer-events: none;
    transition: all 0.2s;
    top: 50%;
    transform: translateY(-50%);
}

/* 라벨이 위로 올라간 상태 (focus 또는 value 있을 때) - JavaScript로 제어 */
#expense-input-content input[type="date"].payment-due-date-input:focus ~ .payment-due-date-label,
#expense-input-content input[type="date"].payment-due-date-input.has-value ~ .payment-due-date-label {
    top: -8px;
    font-size: 12px;
    color: #3b82f6;
    transform: translateY(0);
}

/* 선택된 날짜 값 표시 */
#expense-input-content .payment-due-date-value {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #1e293b;
    z-index: 4;
    pointer-events: none;
    display: none;
}

/* 값이 있을 때만 날짜 값 표시, 라벨은 숨김 */
#expense-input-content input[type="date"].payment-due-date-input.has-value ~ .payment-due-date-value {
    display: block;
}

/* 값이 있을 때 라벨 숨김 (날짜 값과 겹치지 않도록) */
#expense-input-content input[type="date"].payment-due-date-input.has-value ~ .payment-due-date-label {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   지출결의서 미리보기/인쇄 스타일
   ═══════════════════════════════════════════════════════════ */

/* 지출결의서 스타일 */
.expense-report-container {
    font-family: 'Malgun Gothic', sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: white;
}

.expense-report {
    border: 2px solid #000;
    padding: 30px;
    background: white;
}

.expense-report h1 {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
}

.expense-report table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    table-layout: auto;
}

.expense-report table td {
    padding: 8px 12px;
    border: 1px solid #000;
    vertical-align: top;
}

/* 미리보기 테이블 줄바꿈 처리 (사용내역, 계좌번호, 메모) */
.expense-report-container .certificate-info-table td:nth-child(2),
.expense-report-container .certificate-info-table td:nth-child(5),
.expense-report-container .certificate-info-table td:nth-child(7) {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.expense-report-container .certificate-info-table {
    table-layout: auto !important;
}

/* 카드사용내역 미리보기 테이블 줄바꿈 처리 (내용, 메모) */
.expense-report-container .expense-table {
    table-layout: fixed !important;
}
.expense-report-container .expense-table td:nth-child(3),
.expense-report-container .expense-table td:nth-child(5) {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 0 !important;
}

.expense-report .expense-detail-table {
    margin: 20px 0;
}

.expense-report .expense-detail-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border: 1px solid #000;
}

.expense-report .expense-detail-table td {
    text-align: center;
    padding: 8px;
}

.expense-report .amount-section {
    text-align: center;
    margin: 20px 0;
    font-size: 18px;
    font-weight: bold;
}

.expense-report .request-text {
    text-align: center;
    margin: 30px 0;
    font-size: 16px;
    font-weight: bold;
}

.expense-report .approval-section {
    margin: 30px 0;
}

.expense-report .approval-line {
    border-bottom: 1px solid #000;
    height: 40px;
    margin: 10px 0;
}

.expense-report .print-date {
    text-align: right;
    margin-top: 30px;
}

/* ═══════════════════════════════════════════════════════════
   #expenseDetailTable 관련 스타일
   ═══════════════════════════════════════════════════════════ */

/* 상세지출내역 테이블 행 높이 통일 */
#expenseDetailTable tbody tr {
    height: 32px;
}

#expenseDetailTable tbody td {
    height: 32px;
    padding: 4px 6px;
}

#expenseDetailTable tfoot tr {
    height: 32px;
}

#expenseDetailTable tfoot td {
    height: 32px;
    padding: 4px 6px;
}

/* 상세지출내역 지출일자 입력란 텍스트 색상 변경 */
#expenseDetailTable input[type="date"] {
    color: #9ca3af !important;
}

/* 값이 입력되지 않은 상태에서의 텍스트 색상 */
#expenseDetailTable input[type="date"]:invalid {
    color: #9ca3af !important;
}

/* 값이 입력된 상태에서는 원래 색상으로 */
#expenseDetailTable input[type="date"]:valid {
    color: #1f2937 !important;
}

/* 상세지출내역 테이블 행 높이 통일 */
#expenseDetailTable th,
#expenseDetailTable td {
    height: 40px !important;
    vertical-align: middle !important;
}

/* 사용내역, 금액, 메모 컬럼 상하 중앙 정렬 */
#expenseDetailTable td:nth-child(2),
#expenseDetailTable td:nth-child(3),
#expenseDetailTable td:nth-child(4) {
    vertical-align: middle !important;
    padding: 4px 6px !important;
}

/* 상세지출내역 테이블 컬럼 너비 px 기준 고정 */
#expenseDetailTable th:nth-child(1),
#expenseDetailTable td:nth-child(1) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    box-sizing: border-box !important;
}

#expenseDetailTable th:nth-child(2),
#expenseDetailTable td:nth-child(2) {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
    box-sizing: border-box !important;
}

#expenseDetailTable th:nth-child(3),
#expenseDetailTable td:nth-child(3) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    box-sizing: border-box !important;
}

#expenseDetailTable th:nth-child(4),
#expenseDetailTable td:nth-child(4) {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
    box-sizing: border-box !important;
}

#expenseDetailTable th:nth-child(5),
#expenseDetailTable td:nth-child(5) {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    box-sizing: border-box !important;
}

/* 작업 컬럼 내부 버튼 정렬 */
#expenseDetailTable td:nth-child(5) .flex {
    justify-content: flex-end !important;
}

#expenseDetailTable input {
    height: 32px !important;
    line-height: 32px !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    display: inline-block !important;
    margin: 0 !important;
    width: 100% !important;
}

/* 상세지출내역 textarea 스타일 - 상하 중앙 정렬 */
/* 높이는 JS에서만 제어 – 한 줄 기본값은 autoResizeTextarea에서 32px로 맞춤 */
#expenseDetailTable textarea {
    min-height: 32px !important;
    height: 32px !important;
    line-height: 24px !important;
    resize: vertical !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 4px 8px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
    display: inline-block !important;
    margin: 0 !important;
    width: 100% !important;
}

/* textarea placeholder 상하 중앙 정렬 */
#expenseDetailTable textarea::placeholder {
    line-height: 32px !important;
}

/* 상세지출내역 모든 입력창 음영 완전 제거 - 모든 상태에서 투명 배경 */
#expenseDetailTable input[type="text"],
#expenseDetailTable input[type="number"],
#expenseDetailTable input[type="date"],
#expenseDetailTable textarea {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

#expenseDetailTable input[type="text"]:focus,
#expenseDetailTable input[type="number"]:focus,
#expenseDetailTable input[type="date"]:focus,
#expenseDetailTable textarea:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* 상세지출내역 placeholder 중앙정렬 */
#expenseDetailTable input[type="text"]::placeholder,
#expenseDetailTable input[type="date"]::placeholder,
#expenseDetailTable textarea::placeholder {
    text-align: center !important;
}

/* 금액 필드: placeholder만 중앙정렬, 입력값은 우측정렬 */
#expenseDetailTable input[id^="expense_detail_amount_"]::placeholder {
    text-align: center !important;
}
#expenseDetailTable input[id^="expense_detail_amount_"] {
    text-align: right !important;
}
#expenseDetailTable input[id^="expense_detail_amount_"]:not(:placeholder-shown) {
    text-align: right !important;
}

/* 현금 선택 시 계좌번호/예금주 placeholder 파란색 */
#expenseDetailTable input[id^="expense_detail_account_number_"].required-placeholder::placeholder,
#expenseDetailTable input[id^="expense_detail_account_holder_"].required-placeholder::placeholder,
#expenseDetailTable textarea[id^="expense_detail_account_number_"].required-placeholder::placeholder {
    color: #3b82f6 !important;
}

#expenseDetailTable input[type="text"]:hover,
#expenseDetailTable input[type="number"]:hover,
#expenseDetailTable input[type="date"]:hover,
#expenseDetailTable textarea:hover {
    background-color: transparent !important;
}

#expenseDetailTable input[type="text"]:active,
#expenseDetailTable input[type="number"]:active,
#expenseDetailTable input[type="date"]:active,
#expenseDetailTable textarea:active {
    background-color: transparent !important;
}

/* readonly 입력창도 투명 배경으로 변경 */
#expenseDetailTable input[readonly] {
    background-color: transparent !important;
}

/* 모든 입력창 ID별로 강제 적용 - 최고 우선순위 */
#expenseDetailTable input,
#expenseDetailTable input[type="text"],
#expenseDetailTable input[type="number"],
#expenseDetailTable input[type="date"],
#expenseDetailTable input[readonly] {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

#expenseDetailTable input:focus,
#expenseDetailTable input:hover,
#expenseDetailTable input:active,
#expenseDetailTable input[type="text"]:focus,
#expenseDetailTable input[type="number"]:focus,
#expenseDetailTable input[type="date"]:focus,
#expenseDetailTable input[readonly]:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* 특정 입력창 ID별 강제 적용 */
input#expense_detail_desc_1,
input#expense_detail_desc_2,
input#expense_detail_desc_3,
input#expense_detail_qty_1,
input#expense_detail_qty_2,
input#expense_detail_qty_3,
input#expense_detail_price_1,
input#expense_detail_price_2,
input#expense_detail_price_3,
input#expense_detail_amount_1,
input#expense_detail_amount_2,
input#expense_detail_amount_3,
input#expense_detail_note_1,
input#expense_detail_note_2,
input#expense_detail_note_3 {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* 상세지출내역 테이블 전체 폰트 크기 통일 */
#expenseDetailTable {
    font-size: 13px;
}

#expenseDetailTable th,
#expenseDetailTable td,
#expenseDetailTable input,
#expenseDetailTable select {
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════
   지출결의서 미리보기/인쇄 테이블 컬럼 너비 동적 조정
   ═══════════════════════════════════════════════════════════ */

.expense-detail-table,
.certificate-info-table.expense-detail-table,
#expense-report-preview .expense-detail-table,
#expense-report-preview .certificate-info-table.expense-detail-table,
body[data-print-target="expense"] #print-expense-root .expense-detail-table,
body[data-print-target="expense"] #print-expense-root .certificate-info-table.expense-detail-table {
    table-layout: auto !important;
    width: 100% !important;
}

.expense-detail-table th,
.expense-detail-table td,
.certificate-info-table.expense-detail-table th,
.certificate-info-table.expense-detail-table td,
#expense-report-preview .expense-detail-table th,
#expense-report-preview .expense-detail-table td,
#expense-report-preview .certificate-info-table.expense-detail-table th,
#expense-report-preview .certificate-info-table.expense-detail-table td,
body[data-print-target="expense"] #print-expense-root .expense-detail-table th,
body[data-print-target="expense"] #print-expense-root .expense-detail-table td,
body[data-print-target="expense"] #print-expense-root .certificate-info-table.expense-detail-table th,
body[data-print-target="expense"] #print-expense-root .certificate-info-table.expense-detail-table td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* 미리보기와 인쇄에서만 적용 */
@media print {
    .expense-detail-table th,
    .expense-detail-table td,
    .certificate-info-table.expense-detail-table th,
    .certificate-info-table.expense-detail-table td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}