/* ==========================================================================
   Classic Theme Stylesheet (theme-classic.css)
   經典極簡風格變數與專屬視覺呈現
   ========================================================================== */

:root,
[data-theme="classic"] {
    --font-family-main: 'Poppins', 'Microsoft JhengHei', sans-serif;
    --font-family-header: 'Poppins', 'Microsoft JhengHei', sans-serif;
    --body-text-color: #ffffff;
    --body-bg-gradient: none;
    --body-bg-image: url('../background.jpg') no-repeat center center fixed;
    
    --header-bg: rgba(0, 0, 0, 0.6);
    --header-border-bottom: none;
    --header-box-shadow: none;
    --header-text-color: #ffffff;
    --header-text-shadow: none;
    --header-font-weight: 600;
    
    --nav-link-color: #ffffff;
    --nav-link-hover-color: #00f2fe;
    --nav-link-hover-shadow: none;
    
    --card-bg: rgba(20, 20, 20, 0.9);
    --card-border: none;
    --card-box-shadow: none;
    --card-border-radius: 12px;
    --card-clip-path: none;
    --card-padding: 30px;
    
    --input-bg: #ffffff;
    --input-border: 1px solid #ccc;
    --input-color: #333333;
    --input-border-radius: 12px;
    --input-focus-border: #00f2fe;
    --input-focus-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
    
    --button-font-family: 'Poppins', sans-serif;
    --button-border-radius: 30px;
    --button-clip-path: none;
    --button-border: none;
    
    /* 上班按鈕 */
    --btn-primary-bg: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    --btn-primary-color: #ffffff;
    --btn-primary-border: none;
    --btn-primary-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
    --btn-primary-hover-bg: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    --btn-primary-hover-color: #ffffff;
    --btn-primary-hover-shadow: 0 0 20px rgba(0, 242, 254, 0.8);
    
    /* 下班按鈕 */
    --btn-danger-bg: linear-gradient(90deg, #ff9a9e 0%, #ff6a88 100%);
    --btn-danger-color: #ffffff;
    --btn-danger-border: none;
    --btn-danger-shadow: 0 0 12px rgba(255, 120, 120, 0.5);
    --btn-danger-hover-bg: linear-gradient(90deg, #ff9a9e 0%, #ff6a88 100%);
    --btn-danger-hover-color: #ffffff;
    --btn-danger-hover-shadow: 0 0 20px rgba(255, 120, 120, 0.8);
    
    /* 輔助按鈕 */
    --btn-outline-bg: transparent;
    --btn-outline-color: #00f2fe;
    --btn-outline-border: 1px solid rgba(0, 242, 254, 0.6);
    --btn-outline-shadow: none;
    --btn-outline-hover-bg: #00f2fe;
    --btn-outline-hover-color: #000000;
    --btn-outline-hover-shadow: 0 0 20px rgba(0, 242, 254, 0.8);
    
    /* 次要按鈕 */
    --btn-secondary-bg: transparent;
    --btn-secondary-color: #00f2fe;
    --btn-secondary-border: 1px solid rgba(0, 242, 254, 0.6);
    --btn-secondary-shadow: none;
    --btn-secondary-hover-bg: #00f2fe;
    --btn-secondary-hover-color: #000000;
    --btn-secondary-hover-shadow: 0 0 20px rgba(0, 242, 254, 0.8);
    
    --record-row-bg: rgba(20, 20, 20, 0.9);
    --record-row-border: none;
    --record-row-color: #ffffff;
    --record-row-shadow: none;
    --record-row-border-radius: 12px;
    
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);
    --modal-content-bg: #fefefe;
    --modal-content-color: #333333;
    --modal-content-border: none;
    --modal-content-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --modal-content-border-radius: 12px;
    --modal-content-clip-path: none;
    --modal-button-bg: linear-gradient(90deg, #fc466b, #3f5efb);
    --modal-button-shadow: 0 0 10px rgba(63, 94, 251, 0.5);
    
    --bottom-nav-bg: rgba(20, 20, 20, 0.95);
    --bottom-nav-height: 65px;
    --bottom-nav-border-top: 1px solid rgba(255, 255, 255, 0.1);
    --bottom-nav-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
    --bottom-nav-padding: 0;
    
    --bottom-nav-item-color: #ffffff;
    --bottom-nav-item-bg: transparent;
    --bottom-nav-item-border: none;
    --bottom-nav-item-clip-path: none;
    --bottom-nav-item-width: auto;
    --bottom-nav-item-height: auto;
    --bottom-nav-item-active-color: #00f2fe;
    --bottom-nav-item-active-bg: transparent;
    --bottom-nav-item-active-border: none;
    --bottom-nav-item-active-shadow: none;
    
    --dashboard-time-font: 'Poppins', sans-serif;
    --dashboard-time-size: 2rem;
    --dashboard-time-color: #ffffff;
    --dashboard-time-shadow: none;
    --dashboard-time-margin: 0;
    --dashboard-time-weight: 600;
    --dashboard-date-font: 'Poppins', sans-serif;
    --dashboard-date-color: #ffffff;
    
    --wrapper-padding-top: 80px;
    --wrapper-padding-bottom: 80px;

    /* 登入頁專屬變數 */
    --login-container-bg: rgba(255, 255, 255, 0.9);
    --login-container-border: none;
    --login-container-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    --login-container-border-radius: 12px;
    --login-container-clip-path: none;
    --login-container-padding: 2rem;
    --login-container-max-width: 500px;
    --login-container-margin: 10% auto;
    
    --title-font-family: 'Poppins', sans-serif;
    --title-letter-spacing: normal;
    --title-text-color: #333333;
    --title-text-shadow: none;
    --title-font-weight: 600;
    --title-margin-bottom: 1.5rem;
    --title-font-size: 2rem;
    
    --label-color: #333333;
    --label-font-family: 'Poppins', sans-serif;
    --label-letter-spacing: normal;
    --label-font-size: 1rem;
    
    --button-padding: 0.75rem;
    --button-font-family: 'Poppins', sans-serif;
    --button-letter-spacing: normal;
    --button-border-radius: 6px;
    --button-clip-path: none;
    --button-border: none;
    --button-bg: #007bff;
    --button-color: #ffffff;
    --button-shadow: none;
    
    --button-hover-bg: #0056b3;
    --button-hover-color: #ffffff;
    --button-hover-shadow: none;
    
    --error-color: red;
    --error-text-shadow: none;
    --error-font-family: 'Poppins', sans-serif;
    --error-margin-top: 1rem;
    --error-font-size: 1rem;
    --error-letter-spacing: normal;
}

/* === 經典風格專屬元件外觀覆寫 === */
[data-theme="classic"] .card-lite h5 {
    border-bottom: none;
    padding-bottom: 0;
}

[data-theme="classic"] .kv {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    padding: 8px 0;
}

[data-theme="classic"] .modal-content {
    color: #333333 !important;
    width: 320px;
    margin: 100px auto;
}

[data-theme="classic"] .modal-content button {
    background: var(--modal-button-bg) !important;
    color: #ffffff !important;
    box-shadow: var(--modal-button-shadow) !important;
    border-radius: 30px !important;
    clip-path: none !important;
    border: none !important;
}

[data-theme="classic"] .msg-modal-content button {
    margin-top: 20px;
    padding: 10px 25px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(to right, #4facfe, #00f2fe);
    color: white;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
    clip-path: none !important;
}

[data-theme="classic"] .bottom-nav {
    justify-content: space-around;
}

[data-theme="classic"] .bottom-nav .nav-item {
    font-size: 12px;
    flex-direction: column;
    align-items: center;
    transition: all .3s ease;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
}

[data-theme="classic"] .bottom-nav .nav-item .material-symbols-outlined {
    font-size: 26px !important;
}

[data-theme="classic"] .bottom-nav .nav-item span:not(.material-symbols-outlined) {
    font-size: 10px !important;
    font-weight: normal;
    opacity: 1;
}

[data-theme="classic"] .bottom-nav .nav-item:hover {
    color: #00f2fe !important;
    transform: scale(1.05);
}

[data-theme="classic"] .bottom-nav .nav-item.active {
    color: #00f2fe !important;
    text-shadow: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 隱藏非賽博龐克專屬的能量槽 */
[data-theme="classic"] .weekly-energy-grid {
    display: none !important;
}

/* 手機版經典底部導航 */
@media (max-width: 576px) {
    [data-theme="classic"] .bottom-nav .nav-item {
        width: auto !important;
        height: auto !important;
    }
    [data-theme="classic"] .bottom-nav .nav-item .material-symbols-outlined {
        font-size: 24px !important;
    }
    [data-theme="classic"] .bottom-nav .nav-item span:not(.material-symbols-outlined) {
        font-size: 10px !important;
    }
}