/* ==========================================================================
   Windows 98 Theme Stylesheet (theme-win98.css)
   復古懷舊 3D Bevel 邊框、按鈕懸浮虛線、擬真視窗標題列與工作列
   ========================================================================== */

[data-theme="win98"] {
    --font-family-main: "MS Sans Serif", Tahoma, "PMingLiU", "MingLiU", "Courier New", sans-serif;
    --font-family-header: "MS Sans Serif", Tahoma, "PMingLiU", "MingLiU", sans-serif;
    --body-text-color: #000000;
    --body-bg-gradient: linear-gradient(rgba(192, 192, 192, 0.25), rgba(192, 192, 192, 0.25));
    --body-bg-image: url('../background.jpg') no-repeat center center fixed;
    
    --header-bg: #c0c0c0;
    --header-border-bottom: 2px solid #808080;
    --header-box-shadow: 0 2px 0 #000000;
    --header-text-color: #000080;
    --header-text-shadow: none;
    --header-font-weight: 700;
    
    --nav-link-color: #000000;
    --nav-link-hover-color: #000080;
    --nav-link-hover-shadow: none;
    
    --card-bg: #c0c0c0;
    --card-border: none;
    --card-box-shadow: 1px 1px 0 #000000;
    --card-border-radius: 0px;
    --card-clip-path: none;
    --card-padding: 24px;
    
    --input-bg: #ffffff;
    --input-border: 2px solid #808080;
    --input-color: #000000;
    --input-border-radius: 0px;
    --input-focus-border: #000080;
    --input-focus-shadow: none;
    
    --button-font-family: 'Courier New', 'Microsoft JhengHei', monospace;
    --button-border-radius: 0px;
    --button-clip-path: none;
    --button-border: none;
    
    /* Win98 3D Bevel 灰階按鈕 */
    --btn-primary-bg: #c0c0c0;
    --btn-primary-color: #000000;
    --btn-primary-border: none;
    --btn-primary-shadow: 1px 1px 0 #000000;
    --btn-primary-hover-bg: #e4e4e4;
    --btn-primary-hover-color: #000000;
    --btn-primary-hover-shadow: 1px 1px 0 #000000;
    
    --btn-danger-bg: #c0c0c0;
    --btn-danger-color: #800000;
    --btn-danger-border: none;
    --btn-danger-shadow: 1px 1px 0 #000000;
    --btn-danger-hover-bg: #e4e4e4;
    --btn-danger-hover-color: #800000;
    --btn-danger-hover-shadow: 1px 1px 0 #000000;
    
    --btn-outline-bg: #c0c0c0;
    --btn-outline-color: #000000;
    --btn-outline-border: none;
    --btn-outline-shadow: 1px 1px 0 #000000;
    --btn-outline-hover-bg: #e4e4e4;
    --btn-outline-hover-color: #000000;
    --btn-outline-hover-shadow: 1px 1px 0 #000000;
    
    --btn-secondary-bg: #c0c0c0;
    --btn-secondary-color: #000000;
    --btn-secondary-border: none;
    --btn-secondary-shadow: 1px 1px 0 #000000;
    --btn-secondary-hover-bg: #e4e4e4;
    --btn-secondary-hover-color: #000000;
    --btn-secondary-hover-shadow: 1px 1px 0 #000000;
    
    --record-row-bg: #ffffff;
    --record-row-border: 2px solid #808080;
    --record-row-color: #000000;
    --record-row-shadow: inset 1px 1px 0 #000000;
    --record-row-border-radius: 0px;
    
    --modal-overlay-bg: rgba(0, 0, 0, 0.4);
    --modal-content-bg: #c0c0c0;
    --modal-content-color: #000000;
    --modal-content-border: none;
    --modal-content-shadow: 2px 2px 0 #000000;
    --modal-content-border-radius: 0px;
    --modal-content-clip-path: none;
    --modal-button-bg: #c0c0c0;
    --modal-button-shadow: 1px 1px 0 #000000;
    
    --bottom-nav-bg: #c0c0c0;
    --bottom-nav-height: 60px;
    --bottom-nav-border-top: 2px solid #ffffff;
    --bottom-nav-shadow: 0 -2px 0 #808080;
    --bottom-nav-padding: 2px 6px;
    
    --bottom-nav-item-color: #000000;
    --bottom-nav-item-bg: #c0c0c0;
    --bottom-nav-item-border: none;
    --bottom-nav-item-clip-path: none;
    --bottom-nav-item-width: auto;
    --bottom-nav-item-height: 48px;
    --bottom-nav-item-active-color: #000080;
    --bottom-nav-item-active-bg: #dfdfdf;
    --bottom-nav-item-active-border: none;
    --bottom-nav-item-active-shadow: inset 1px 1px 0 #000000;
    
    --dashboard-time-font: 'Courier New', monospace;
    --dashboard-time-size: 2.2rem;
    --dashboard-time-color: #000080;
    --dashboard-time-shadow: none;
    --dashboard-time-margin: 8px 0;
    --dashboard-time-weight: 700;
    --dashboard-date-font: 'Courier New', monospace;
    --dashboard-date-color: #333333;
    
    --wrapper-padding-top: 80px;
    --wrapper-padding-bottom: 80px;

    /* 登入頁專屬變數 */
    --login-container-bg: #c0c0c0;
    --login-container-border: none;
    --login-container-shadow: 2px 2px 0 #000000;
    --login-container-border-radius: 0px;
    --login-container-clip-path: none;
    --login-container-padding: 6px;
    --login-container-max-width: 420px;
    --login-container-margin: 10% auto;
    
    --title-font-family: inherit;
    --title-letter-spacing: 1px;
    --title-text-color: #000080;
    --title-text-shadow: none;
    --title-font-weight: 700;
    --title-margin-bottom: 1.2rem;
    --title-font-size: 1.4rem;
    
    --label-color: #000000;
    --label-font-family: inherit;
    --label-letter-spacing: 1px;
    --label-font-size: 14px;
    
    --button-padding: 8px 16px;
    --button-font-family: 'Courier New', monospace;
    --button-letter-spacing: 1.5px;
    --button-border-radius: 0px;
    --button-clip-path: none;
    --button-border: none;
    --button-bg: #c0c0c0;
    --button-color: #000000;
    --button-shadow: 1px 1px 0 #000000;
    
    --button-hover-bg: #e4e4e4;
    --button-hover-color: #000000;
    --button-hover-shadow: 1px 1px 0 #000000;
    
    --error-color: #cc0000;
    --error-text-shadow: none;
    --error-font-family: 'Courier New', monospace;
    --error-margin-top: 1rem;
    --error-font-size: 13px;
    --error-letter-spacing: 0.5px;
}

/* 隱藏能量槽 */
[data-theme="win98"] .weekly-energy-grid {
    display: none !important;
}

/* === Win98 專屬 3D Bevel 邊框 === */
[data-theme="win98"] .main-content,
[data-theme="win98"] .card-lite,
[data-theme="win98"] .fc,
[data-theme="win98"] #calendar {
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: 2px solid #808080 !important;
    box-shadow: 1px 1px 0 #000000 !important;
}

/* Win98 凸起立體按鈕與按壓凹陷 */
html[data-theme="win98"] button,
html[data-theme="win98"] button:not(.btn-out),
html[data-theme="win98"] button:not(.btn-out):not(.btn-danger),
html[data-theme="win98"] body button,
html[data-theme="win98"] body .btn,
html[data-theme="win98"] .btn,
html[data-theme="win98"] .btn-primary,
html[data-theme="win98"] .btn-danger,
html[data-theme="win98"] .btn-out,
html[data-theme="win98"] .btn-outline,
html[data-theme="win98"] .btn-secondary,
html[data-theme="win98"] input[type="button"],
html[data-theme="win98"] input[type="submit"],
html[data-theme="win98"] #btnSubmitWorkHour,
html[data-theme="win98"] #btnDeleteWorkHour,
html[data-theme="win98"] .btn-cancel,
html[data-theme="win98"] body #workHourModal .modal-content button,
html[data-theme="win98"] body #workHourModal .modal-content .btn,
html[data-theme="win98"] body #workHourModal .modal-content .btn-action {
    background: #c0c0c0 !important;
    background-color: #c0c0c0 !important;
    color: #000000 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: 2px solid #808080 !important;
    box-shadow: 1px 1px 0 #000000 !important;
    text-transform: none !important;
    letter-spacing: 1px !important;
    transition: none !important;
    font-family: inherit !important;
}

html[data-theme="win98"] button:hover,
html[data-theme="win98"] button:not(.btn-out):hover,
html[data-theme="win98"] button:not(.btn-out):not(.btn-danger):hover,
html[data-theme="win98"] body button:hover,
html[data-theme="win98"] body .btn:hover,
html[data-theme="win98"] .btn:hover,
html[data-theme="win98"] .btn-primary:hover,
html[data-theme="win98"] .btn-danger:hover,
html[data-theme="win98"] .btn-out:hover,
html[data-theme="win98"] .btn-outline:hover,
html[data-theme="win98"] .btn-secondary:hover,
html[data-theme="win98"] input[type="button"]:hover,
html[data-theme="win98"] input[type="submit"]:hover,
html[data-theme="win98"] #btnSubmitWorkHour:hover,
html[data-theme="win98"] #btnDeleteWorkHour:hover,
html[data-theme="win98"] .btn-cancel:hover,
html[data-theme="win98"] body #workHourModal .modal-content button:hover,
html[data-theme="win98"] body #workHourModal .modal-content .btn:hover {
    transform: none !important;
    background: #e4e4e4 !important;
    background-color: #e4e4e4 !important;
    color: #000000 !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #404040 !important;
    border-bottom: 2px solid #404040 !important;
    box-shadow: 1px 1px 0 #000000 !important;
    outline: 1px dotted #808080 !important;
    outline-offset: -4px !important;
}

html[data-theme="win98"] button:active,
html[data-theme="win98"] button:not(.btn-out):active,
html[data-theme="win98"] body button:active,
html[data-theme="win98"] body .btn:active,
html[data-theme="win98"] .btn:active,
html[data-theme="win98"] input[type="button"]:active,
html[data-theme="win98"] input[type="submit"]:active,
html[data-theme="win98"] button:active *,
html[data-theme="win98"] .btn:active * {
    border-top: 2px solid #808080 !important;
    border-left: 2px solid #808080 !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    box-shadow: inset 1px 1px 0 #000000 !important;
    background: #c0c0c0 !important;
    background-color: #c0c0c0 !important;
    outline: none !important;
    transform: translate(1px, 1px) !important;
}

/* Win98 凹陷輸入框與選單 */
[data-theme="win98"] input,
[data-theme="win98"] select,
[data-theme="win98"] textarea {
    border-top: 2px solid #808080 !important;
    border-left: 2px solid #808080 !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    box-shadow: inset 1px 1px 0 #000000 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
}

/* Win98 工作列導航 (Taskbar) */
[data-theme="win98"] .bottom-nav {
    border-top: 2px solid #ffffff !important;
    background: #c0c0c0 !important;
    box-shadow: 0 -1px 0 #808080 !important;
    padding: 3px 12px !important;
    justify-content: center !important;
    gap: 10px !important;
}

[data-theme="win98"] .bottom-nav .nav-item {
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: 2px solid #808080 !important;
    box-shadow: 1px 1px 0 #000000 !important;
    background: #c0c0c0 !important;
    color: #000000 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    margin: 0 !important;
    height: 44px !important;
    min-width: 96px !important;
    padding: 2px 14px !important;
    flex-direction: row !important;
    gap: 6px !important;
    transition: none !important;
}

[data-theme="win98"] .bottom-nav .nav-item .material-symbols-outlined {
    font-size: 18px !important;
    margin-bottom: 0 !important;
}

[data-theme="win98"] .bottom-nav .nav-item span:not(.material-symbols-outlined) {
    font-size: 12px !important;
    margin-top: 0 !important;
    font-family: inherit !important;
}

[data-theme="win98"] .bottom-nav .nav-item:hover {
    transform: none !important;
    background: #d4d0c8 !important;
}

[data-theme="win98"] .bottom-nav .nav-item.active {
    border-top: 2px solid #808080 !important;
    border-left: 2px solid #808080 !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    box-shadow: inset 1px 1px 0 #000000 !important;
    background: #dfdfdf !important;
    color: #000080 !important;
    text-shadow: none !important;
    font-weight: bold !important;
}

@media (max-width: 576px) {
    [data-theme="win98"] .bottom-nav {
        justify-content: space-between !important;
        gap: 4px !important;
        padding: 3px 4px !important;
    }
    [data-theme="win98"] .bottom-nav .nav-item {
        min-width: 0 !important;
        flex: 1 !important;
        padding: 2px 2px !important;
        flex-direction: column !important;
        gap: 1px !important;
    }
    [data-theme="win98"] .bottom-nav .nav-item .material-symbols-outlined {
        font-size: 18px !important;
    }
    [data-theme="win98"] .bottom-nav .nav-item span:not(.material-symbols-outlined) {
        font-size: 10px !important;
    }
}

/* Win98 擬真視窗 (Modal Window) 外觀 */
[data-theme="win98"] .modal-content,
[data-theme="win98"] .msg-modal-content {
    background: #c0c0c0 !important;
    color: #000000 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: 2px solid #808080 !important;
    box-shadow: 2px 2px 0 #000000, inset 1px 1px 0 #dfdfdf !important;
    padding: 3px !important;
}

html[data-theme="win98"] .win98-window-titlebar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%) !important;
    color: #ffffff !important;
    padding: 3px 5px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    user-select: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 預設非 Win98 風格下隱藏動態注入的視窗標題列 */
.win98-window-titlebar {
    display: none !important;
}

html[data-theme="win98"] .win98-title-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

html[data-theme="win98"] .win98-title-text {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html[data-theme="win98"] .win98-close-btn,
.modal-content button.win98-close-btn,
.msg-modal-content button.win98-close-btn {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #c0c0c0 !important;
    color: #000000 !important;
    border-top: 1px solid #ffffff !important;
    border-left: 1px solid #ffffff !important;
    border-right: 1px solid #808080 !important;
    border-bottom: 1px solid #808080 !important;
    box-shadow: 1px 1px 0 #000000 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex: 0 0 18px !important;
}

html[data-theme="win98"] .win98-close-btn:active,
.modal-content button.win98-close-btn:active,
.msg-modal-content button.win98-close-btn:active {
    border-top: 1px solid #808080 !important;
    border-left: 1px solid #808080 !important;
    border-right: 1px solid #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
    box-shadow: inset 1px 1px 0 #000000 !important;
}

/* Win98 工時彈窗與通用彈窗按鈕佈局修復 (特別是手機版) */
html[data-theme="win98"] #workHourModal .modal-footer-custom {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
}

html[data-theme="win98"] #workHourModal .footer-left {
    display: flex !important;
    flex: 0 0 auto !important;
}

html[data-theme="win98"] #workHourModal .footer-right-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
}

html[data-theme="win98"] body #workHourModal .modal-content .footer-right-group .btn-action,
html[data-theme="win98"] body #workHourModal .modal-content button#btnSubmitWorkHour,
html[data-theme="win98"] body #workHourModal .modal-content button.btn-cancel,
html[data-theme="win98"] #workHourModal .footer-right-group .btn-action,
html[data-theme="win98"] #workHourModal button#btnSubmitWorkHour,
html[data-theme="win98"] #workHourModal button.btn-cancel {
    background: #c0c0c0 !important;
    background-color: #c0c0c0 !important;
    color: #000000 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: 2px solid #808080 !important;
    box-shadow: 1px 1px 0 #000000 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    flex: 1 1 50% !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    font-family: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

html[data-theme="win98"] body #workHourModal .modal-content button#btnSubmitWorkHour:hover,
html[data-theme="win98"] body #workHourModal .modal-content button.btn-cancel:hover,
html[data-theme="win98"] #workHourModal button#btnSubmitWorkHour:hover,
html[data-theme="win98"] #workHourModal button.btn-cancel:hover {
    background: #e4e4e4 !important;
    background-color: #e4e4e4 !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #404040 !important;
    border-bottom: 2px solid #404040 !important;
    box-shadow: 1px 1px 0 #000000 !important;
    outline: 1px dotted #808080 !important;
    outline-offset: -4px !important;
}

html[data-theme="win98"] body #workHourModal .modal-content button#btnSubmitWorkHour:active,
html[data-theme="win98"] body #workHourModal .modal-content button.btn-cancel:active,
html[data-theme="win98"] #workHourModal button#btnSubmitWorkHour:active,
html[data-theme="win98"] #workHourModal button.btn-cancel:active {
    border-top: 2px solid #808080 !important;
    border-left: 2px solid #808080 !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    box-shadow: inset 1px 1px 0 #000000 !important;
    background: #c0c0c0 !important;
    background-color: #c0c0c0 !important;
    outline: none !important;
    transform: translate(1px, 1px) !important;
}

html[data-theme="win98"] #workHourModal button#btnDeleteWorkHour {
    background: #c0c0c0 !important;
    background-color: #c0c0c0 !important;
    color: #800000 !important;
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: 2px solid #808080 !important;
    box-shadow: 1px 1px 0 #000000 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html[data-theme="win98"] #workHourModal button#btnDeleteWorkHour:active {
    border-top: 2px solid #808080 !important;
    border-left: 2px solid #808080 !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    box-shadow: inset 1px 1px 0 #000000 !important;
    transform: translate(1px, 1px) !important;
}

.win98-modal-inner {
    padding: 12px 14px !important;
}

/* Win98 登入對話框視窗裝飾 */
[data-theme="win98"] .login-container {
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #808080 !important;
    border-bottom: 2px solid #808080 !important;
    box-shadow: 2px 2px 0 #000000, inset 1px 1px 0 #dfdfdf !important;
    animation: none !important;
}

[data-theme="win98"] .win98-login-titlebar {
    display: flex !important;
    background: linear-gradient(90deg, #000080 0%, #1084d0 100%) !important;
    color: #ffffff !important;
    padding: 3px 5px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    user-select: none !important;
}

.win98-login-titlebar {
    display: none !important;
}