#timesheetMain {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}
    #timesheetMainTracking,
    #timesheetMainManagement,
    #timesheetMainRules {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .timesheetMainSectionHidden {
        display: none;
    }
    #timesheetMainHeader.timesheetMainSectionHidden {
        display: none;
    }
    #timesheetMainTracking.timesheetMainSectionHidden,
    #timesheetMainManagement.timesheetMainSectionHidden,
    #timesheetMainRules.timesheetMainSectionHidden {
        display: none;
    }
        #timesheetMainActions,
        #timesheetMainManagementActions {
            display: flex;
            align-items: stretch;
            gap: 12px;
            min-height: 64px;
        }
        #timesheetMainRefreshWrap,
        #timesheetMainManagementRefreshWrap {
            display: flex;
            align-items: center;
            align-self: stretch;
        }
        #timesheetMainRefreshBtn,
        #timesheetMainManagementRefreshBtn {
            height: 100%;
            aspect-ratio: 1 / 1;
            min-width: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #E5E7EB;
            border-radius: 8px;
            background: #FFFFFF;
            color: #374151;
            font-size: 16px;
            user-select: none;
            cursor: pointer;
        }
        #timesheetMainRefreshBtn:hover,
        #timesheetMainManagementRefreshBtn:hover {
            background: #F3F4F6;
        }
        #timesheetMainRefreshBtn svg,
        #timesheetMainManagementRefreshBtn svg {
            width: 26px;
            height: 26px;
            display: block;
        }
        .timesheetMainHidden {
            visibility: hidden;
            pointer-events: none;
        }
        #timesheetMainInvalid {
            padding: 8px 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            border: 1px solid #FCA5A5;
            border-radius: 10px;
            background: #FEF2F2;
            align-items: flex-start;
            height: 64px;
            overflow: hidden;
        }
        #timesheetMainInvalid.timesheetMainInvalidEmpty #timesheetMainInvalidTitle,
        #timesheetMainInvalid.timesheetMainInvalidEmpty #timesheetMainInvalidList {
            display: none;
        }
            #timesheetMainInvalidTitle {
                font-size: 12px;
                font-weight: 700;
                color: #991B1B;
                letter-spacing: 0.02em;
                text-transform: uppercase;
            }
            #timesheetMainInvalidList {
                display: flex;
                flex-wrap: nowrap;
                gap: 8px;
                overflow-x: auto;
                overflow-y: hidden;
            }
            #timesheetMainSaveWrap,
            #timesheetMainManagementSaveWrap {
                margin-left: auto;
                display: flex;
                align-items: center;
                align-self: stretch;
            }
            .timesheetMainInvalidItem {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px 10px;
                border-radius: 8px;
                background: #FFFFFF;
                border: 1px solid #FECACA;
                font-size: 12px;
                font-weight: 600;
                color: #7F1D1D;
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            }
            .timesheetMainInvalidItemBtn {
                padding: 2px 6px;
                line-height: 1;
                white-space: nowrap;
                border-radius: 6px;
                background: #DC2626;
                color: #FFFFFF;
                font-size: 10px;
                font-weight: 700;
                cursor: pointer;
            }
    #timesheetMainHeader {
        padding: 15px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-width: 2px;
        border-style: solid;
        border-color: #E2E2E2;
        border-radius: 10px;
    }
        #timesheetMainHeaderRow {
            display: flex;
            flex-direction: row;
        }
            #timesheetMainHeaderTitleDate {
                padding: 2px 25px 2px 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 4px;
                border-width: 0px 2px 0px 0px;
                border-style: solid;
                border-color: #E2E2E2;
            }
                #timesheetMainHeaderTitleDateM {
                    font-size: 0.8em;
                    font-weight: 600;
                    color:#7F333F;
                }
                #timesheetMainHeaderTitleDateD {
                    font-size: 1.6em;
                    font-weight: 450;
                }
            #timesheetMainHeaderSearch {
                padding: 0px 0px 0px 25px;
                display: flex;
                flex-direction: row;
                gap: 4px;
            }
                #timesheetMainHeaderNavNames {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    align-self: stretch;
                    cursor: pointer;
                }
                    #timesheetMainHeaderPrevName,
                    #timesheetMainHeaderNextName {
                        height: calc((100% - 4px) / 2);
                        aspect-ratio: 1 / 1;
                        width: auto;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid #E5E7EB;
                        border-radius: 6px;
                        background: #FFFFFF;
                        color: #374151;
                        font-size: 11px;
                        font-weight: 700;
                        user-select: none;
                        cursor: pointer;
                    }
                    #timesheetMainHeaderPrevName:hover,
                    #timesheetMainHeaderNextName:hover {
                        background: #F3F4F6;
                    }
        #timesheetMainCards {
            display: flex;
            flex-direction: row;
            gap: 10px;
            flex-wrap: wrap;
            align-items: stretch;
        }
            .timesheetMainCard {
                display: flex;
                flex-direction: column;
                gap: 4px;
                padding: 10px 12px;
                border: 1px solid #E5E7EB;
                border-radius: 10px;
                background: #FFFFFF;
                min-width: 140px;
            }
            .timesheetMainCardLabel {
                font-size: 12px;
                color: #6B7280;
                text-transform: uppercase;
                letter-spacing: 0.02em;
            }
            .timesheetMainCardValue {
                font-size: 18px;
                font-weight: 700;
                color: #111827;
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            }
            #timesheetMainPrintWrap {
                display: flex;
                align-items: center;
                align-self: stretch;
            }
            #timesheetMainPrintBtn {
                height: 100%;
                aspect-ratio: 1 / 1;
                min-width: 0;
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #E5E7EB;
                border-radius: 10px;
                background: #FFFFFF;
                color: #374151;
                user-select: none;
                cursor: pointer;
            }
            #timesheetMainPrintBtn svg {
                width: 18px;
                height: 18px;
                display: block;
            }
            #timesheetMainPrintBtn:hover {
                background: #F3F4F6;
            }
            #timesheetMainHeaderDropName {
                position: relative;
                width: max-content;
                flex: 0 0 auto;
                border: 1px solid #E5E7EB;
                border-radius: 8px;
                background: #FFFFFF;
                cursor: pointer;
            }
                #timesheetMainHeaderDropNameCurrent {
                    padding: 10px 12px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    color: #374151;
                    white-space: nowrap;
                }
                #timesheetMainHeaderDropName:hover #timesheetMainHeaderDropNameCurrent {
                    background: #F3F4F6;
                }
                #timesheetMainHeaderDropNameList {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    right: auto;
                    z-index: 10;
                    display: none;
                    width: max-content;
                    min-width: 100%;
                    max-height: 260px;
                    overflow-y: auto;
                    border: 1px solid #E5E7EB;
                    border-radius: 8px;
                    background: #FFFFFF;
                    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
                }
                    #timesheetMainHeaderDropNameSearch {
                        padding: 8px;
                        border-bottom: 1px solid #E5E7EB;
                    }
                    #timesheetMainHeaderDropNameInput {
                        width: 100%;
                        padding: 8px 10px;
                        border: 1px solid #E5E7EB;
                        border-radius: 6px;
                        background: #FFFFFF;
                        color: #374151;
                    }
                    #timesheetMainHeaderDropNameOptions {
                        display: flex;
                        flex-direction: column;
                    }
                    .timesheetMainHeaderDropNameOption {
                        padding: 10px 12px;
                        color: #374151;
                        user-select: none;
                        white-space: nowrap;
                        cursor: pointer;
                    }
                    .timesheetMainHeaderDropNameOption:hover {
                        background: #F3F4F6;
                    }
            #timesheetMainHeaderDropMes {
                position: relative;
                width: max-content;
                flex: 0 0 auto;
                border: 1px solid #E5E7EB;
                border-radius: 8px;
                background: #FFFFFF;
                cursor: pointer;
            }
                #timesheetMainHeaderDropMesCurrent {
                    padding: 10px 12px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    color: #374151;
                    white-space: nowrap;
                }
                #timesheetMainHeaderDropMes:hover #timesheetMainHeaderDropMesCurrent {
                    background: #F3F4F6;
                }
                #timesheetMainHeaderDropMesList {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    right: auto;
                    z-index: 10;
                    display: none;
                    width: max-content;
                    min-width: 100%;
                    max-height: 260px;
                    overflow-y: auto;
                    border: 1px solid #E5E7EB;
                    border-radius: 8px;
                    background: #FFFFFF;
                    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
                }
                .timesheetMainHeaderDropMesOption {
                    padding: 10px 12px;
                    color: #374151;
                    user-select: none;
                    white-space: nowrap;
                    cursor: pointer;
                }
                .timesheetMainHeaderDropMesOption:hover {
                    background: #F3F4F6;
                }
            #timesheetMainHeaderSearchBtn {
                padding: 10px 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #E5E7EB;
                border-radius: 8px;
                background: #FFFFFF;
                color: #374151;
                user-select: none;
            }
            #timesheetMainHeaderSearchBtn:hover {
                background: #F3F4F6;
            }
            #timesheetMainHeaderSaveBtn,
            #timesheetMainManagementSaveBtn {
                height: 100%;
                padding: 0 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #E5E7EB;
                border-radius: 8px;
                background: #16A34A;
                color: #FFFFFF;
                user-select: none;
                cursor: pointer;
            }
            #timesheetMainHeaderSaveBtn:hover,
            #timesheetMainManagementSaveBtn:hover {
                background: #15803D;
            }
            #timesheetMainHeaderSaveBtn[data-disabled="1"],
            #timesheetMainManagementSaveBtn[data-disabled="1"] {
                color: #D1D5DB;
                background: #A7F3D0;
                border-color: #6EE7B7;
                pointer-events: none;
            }
    #timesheetMainTime,
    #timesheetMainManagementList {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
        .timesheetMainTimeRow {
            display: flex;
            flex-direction: row;
            gap: 12px;
            align-items: center;
            padding: 6px 10px;
            border-width: 0px 0px 1px 0px;
            border-style: solid;
            border-color: #E5E7EB;
            background: #FFFFFF;
        }
        .timesheetMainTimeRowOdd {
            animation: timesheetRowPulse 1.4s ease-in-out infinite;
        }
        @keyframes timesheetRowPulse {
            0% { background: #FFFFFF; }
            50% { background: #FEE2E2; }
            100% { background: #FFFFFF; }
        }
        .timesheetMainTimeRowSaturday {
            background: #F3F4F6;
        }
        .timesheetMainTimeRowSunday {
            background: #F3F4F6;
        }
        .timesheetMainTimeRowRule {
            background: #FEF3C7;
        }
        .timesheetMainTimeDate {
            color: #374151;
            font-size: 14px;
            white-space: nowrap;
            min-width: 96px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .timesheetMainTimeRowSaturday .timesheetMainTimeDate,
        .timesheetMainTimeRowSunday .timesheetMainTimeDate,
        .timesheetMainTimeRowRule .timesheetMainTimeDate {
            color: #9CA3AF;
        }
        .timesheetMainTimeCheck {
            width: 18px;
            min-width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            color: #16A34A;
        }
        .timesheetMainTimeCheckNegative {
            color: #DC2626;
        }
        .timesheetMainTimeDateMain {
            font-weight: 600;
        }
        .timesheetMainTimeDateSub {
            font-size: 12px;
            color: #6B7280;
            font-weight: 400;
        }
        .timesheetMainOccurrenceList {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            flex: 1;
            align-items: center;
        }
        .timesheetMainOccurrenceLabel {
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid #E5E7EB;
            background: #FFFFFF;
            font-size: 12px;
            font-weight: 500;
            color: #374151;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 240px;
            justify-content: center;
            text-align: center;
        }
        .timesheetMainOccurrenceAddWrap {
            width: 22px;
            min-width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .timesheetMainOccurrenceAddTrash {
            color: #DC2626;
        }
        .timesheetMainOccurrenceAddTrash:hover {
            color: #DC2626;
        }
        .timesheetMainOccurrenceAdd.timesheetMainOccurrenceAddTrash {
            color: #DC2626;
        }
        .timesheetMainOccurrenceVacationInput {
            height: 26px;
            width: 80px;
            padding: 0 8px;
            border-radius: 6px;
            border: 1px solid #D1D5DB;
            background: #FFFFFF;
            color: #374151;
            font-size: 12px;
            font-weight: 600;
        }
        .timesheetMainOccurrenceAddWrap {
            position: relative;
            width: 22px;
            min-width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .timesheetMainOccurrencePicker {
            position: absolute;
            top: 0;
            left: calc(100% + 8px);
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 8px;
            border: 1px solid #E5E7EB;
            border-radius: 8px;
            background: #FFFFFF;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            z-index: 5;
            min-width: 180px;
            height: auto;
        }
        .timesheetMainOccurrencePickerList {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .timesheetMainOccurrencePickerEmpty {
            font-size: 12px;
            color: #6B7280;
        }
        .timesheetMainOccurrenceOption {
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid #E5E7EB;
            background: #F9FAFB;
            font-size: 12px;
            font-weight: 600;
            color: #374151;
            cursor: pointer;
            user-select: none;
        }
        .timesheetMainOccurrenceOption:hover {
            background: #F3F4F6;
        }
        .timesheetMainOccurrenceRange {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }
        .timesheetMainOccurrenceRangeInput {
            height: 28px;
            padding: 0 8px;
            border-radius: 6px;
            border: 1px solid #D1D5DB;
            background: #FFFFFF;
            color: #374151;
            font-size: 12px;
        }
        .timesheetMainTimeRuleLabel {
            font-size: 11px;
            color: #7C2D12;
            font-weight: 600;
        }
        .timesheetMainTimeRuleLabelRow {
            flex: 1;
            text-align: left;
            font-size: 13px;
            font-weight: 500;
            color: #9CA3AF;
            font-style: italic;
        }
        .timesheetMainTimeAdd,
        .timesheetMainOccurrenceAdd {
            width: 22px;
            min-width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #E5E7EB;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1;
            color: #16A34A;
            background: #FFFFFF;
            user-select: none;
            padding: 0;
            text-align: center;
            cursor: pointer;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            letter-spacing: 0;
        }
        .timesheetMainTimeAdd:hover,
        .timesheetMainOccurrenceAdd:hover {
            background: #F3F4F6;
        }
        .timesheetMainTimeMarks {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .timesheetMainTimeBalance {
            margin-left: auto;
            min-width: 70px;
            text-align: right;
            font-size: 13px;
            font-weight: 600;
            color: #1F2937;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }
        .timesheetMainTimeBalancePositive {
            color: #16A34A;
        }
        .timesheetMainTimeBalanceNegative {
            color: #DC2626;
        }
        .timesheetMainTimeBalanceNeutral {
            color: #6B7280;
        }
        .timesheetMainTimeMark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 26px;
            min-width: 56px;
            padding: 0 8px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            color: #1F2937;
            background: #FFFFFF;
            border: 1px solid #D1D5DB;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            cursor: pointer;
        }
        .timesheetMainTimeMarkNew {
            position: relative;
            background: #ECFEFF;
            border-color: #A5F3FC;
        }
        .timesheetMainTimeMarkManual {
            background: #FFFBEB;
            border-color: #FDE68A;
            color: #92400E;
        }
        .timesheetMainTimeMarkDelete {
            background: #FEE2E2;
            border-color: #FCA5A5;
            color: #991B1B;
        }
        .timesheetMainTimeMarkTrash {
            color: #111827;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            text-shadow: 0 1px 2px rgba(0,0,0,0.35);
            cursor: pointer;
        }
        .timesheetMainTimeMarkConfirm {
            padding: 0;
            overflow: hidden;
            display: flex;
        }
        .timesheetMainTimeMarkConfirmBtn {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            color: #FFFFFF;
            cursor: pointer;
        }
        .timesheetMainTimeMarkConfirmOk {
            background: #16A34A;
        }
        .timesheetMainTimeMarkConfirmCancel {
            background: #DC2626;
        }
        .timesheetMainTimeMarkRemove {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 14px;
            height: 14px;
            border-radius: 9999px;
            background: #FEE2E2;
            color: #991B1B;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #FCA5A5;
            line-height: 1;
            cursor: pointer;
        }
        .timesheetMainTimeMarkInput {
            height: 26px;
            min-width: 56px;
            width: 56px;
            padding: 0 8px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            color: #1F2937;
            background: #FFFFFF;
            border: 1px solid #D1D5DB;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            outline: none;
            text-align: center;
        }
        .timesheetMainTimeMsg {
            padding: 10px 12px;
            border: 1px dashed #D1D5DB;
            border-radius: 8px;
            color: #6B7280;
            background: #F9FAFB;
        }