/* ==========================================================================
   Cyberpunk Theme Stylesheet (theme-cyberpunk.css)
   賽博龐克風格變數、斜角幾何、CRT掃描線與週五超載能量槽
   ========================================================================== */

[data-theme="cyberpunk"] {
    --neon-blue: #00f0ff;
    --toxic-green: #39ff14;
    --neon-magenta: #ff007f;
    --cyber-amber: #ffb700;
    --chassis-dark: #0a0b10;
    --terminal-glow: rgba(0, 240, 255, 0.15);

    --font-family-main: 'Share Tech Mono', 'Microsoft JhengHei', monospace;
    --font-family-header: 'Orbitron', sans-serif;
    --body-text-color: #d1f4ff;
    --body-bg-gradient: linear-gradient(rgba(10, 11, 16, 0.88), rgba(10, 11, 16, 0.88));
    --body-bg-image: url('../background.jpg') no-repeat center center fixed;
    
    --header-bg: rgba(10, 11, 16, 0.95);
    --header-border-bottom: 2px solid var(--neon-blue);
    --header-box-shadow: 0 2px 15px rgba(0, 240, 255, 0.3);
    --header-text-color: var(--neon-blue);
    --header-text-shadow: 0 0 10px var(--neon-blue);
    --header-font-weight: 700;
    
    --nav-link-color: #8f9ca2;
    --nav-link-hover-color: var(--neon-blue);
    --nav-link-hover-shadow: 0 0 8px var(--neon-blue);
    
    --card-bg: rgba(10, 11, 16, 0.85);
    --card-border: 1px solid rgba(0, 240, 255, 0.35);
    --card-box-shadow: 0 0 20px rgba(0, 240, 255, 0.15), inset 0 0 15px rgba(0, 240, 255, 0.05);
    --card-border-radius: 0px;
    --card-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    --card-padding: 30px;
    
    --input-bg: rgba(5, 5, 8, 0.7);
    --input-border: 1px solid rgba(0, 240, 255, 0.4);
    --input-color: #ffffff;
    --input-border-radius: 0px;
    --input-focus-border: var(--neon-blue);
    --input-focus-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
    
    --button-font-family: 'Share Tech Mono', monospace;
    --button-border-radius: 0px;
    --button-clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    
    --btn-primary-bg: rgba(57, 255, 20, 0.08);
    --btn-primary-color: var(--toxic-green);
    --btn-primary-border: 1px solid var(--toxic-green);
    --btn-primary-shadow: 0 0 12px rgba(57, 255, 20, 0.25);
    --btn-primary-hover-bg: var(--toxic-green);
    --btn-primary-hover-color: #000000;
    --btn-primary-hover-shadow: 0 0 22px var(--toxic-green);
    
    --btn-danger-bg: rgba(255, 0, 127, 0.08);
    --btn-danger-color: var(--neon-magenta);
    --btn-danger-border: 1px solid var(--neon-magenta);
    --btn-danger-shadow: 0 0 12px rgba(255, 0, 127, 0.25);
    --btn-danger-hover-bg: var(--neon-magenta);
    --btn-danger-hover-color: #000000;
    --btn-danger-hover-shadow: 0 0 22px var(--neon-magenta);
    
    --btn-outline-bg: rgba(0, 240, 255, 0.08);
    --btn-outline-color: var(--neon-blue);
    --btn-outline-border: 1px solid var(--neon-blue);
    --btn-outline-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
    --btn-outline-hover-bg: var(--neon-blue);
    --btn-outline-hover-color: #000000;
    --btn-outline-hover-shadow: 0 0 22px var(--neon-blue);
    
    --btn-secondary-bg: rgba(0, 240, 255, 0.08);
    --btn-secondary-color: var(--neon-blue);
    --btn-secondary-border: 1px solid rgba(0, 240, 255, 0.45);
    --btn-secondary-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
    --btn-secondary-hover-bg: var(--neon-blue);
    --btn-secondary-hover-color: #000000;
    --btn-secondary-hover-shadow: 0 0 20px var(--neon-blue);
    
    --record-row-bg: rgba(8, 10, 15, 0.9);
    --record-row-border: 1px solid rgba(0, 240, 255, 0.3);
    --record-row-color: #d1f4ff;
    --record-row-shadow: 0 0 10px rgba(0, 240, 255, 0.08);
    --record-row-border-radius: 0px;
    
    --modal-overlay-bg: rgba(5, 5, 8, 0.85);
    --modal-content-bg: rgba(10, 11, 16, 0.96);
    --modal-content-color: #ffffff;
    --modal-content-border: 1px solid var(--neon-blue);
    --modal-content-shadow: 0 0 30px rgba(0, 240, 255, 0.4);
    --modal-content-border-radius: 0px;
    --modal-content-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    
    --bottom-nav-bg: rgba(8, 10, 15, 0.96);
    --bottom-nav-height: 72px;
    --bottom-nav-border-top: 2px solid var(--neon-blue);
    --bottom-nav-shadow: 0 -3px 20px rgba(0, 240, 255, 0.25);
    --bottom-nav-padding: 0 4px;
    
    --bottom-nav-item-color: #8f9ca2;
    --bottom-nav-item-bg: rgba(0, 240, 255, 0.03);
    --bottom-nav-item-border: 1px solid rgba(0, 240, 255, 0.25);
    --bottom-nav-item-clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    --bottom-nav-item-width: 62px;
    --bottom-nav-item-height: 56px;
    --bottom-nav-item-active-color: var(--neon-blue);
    --bottom-nav-item-active-bg: rgba(0, 240, 255, 0.15);
    --bottom-nav-item-active-border: var(--neon-blue);
    --bottom-nav-item-active-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
    
    --dashboard-time-font: 'Orbitron', sans-serif;
    --dashboard-time-size: 2.8rem;
    --dashboard-time-color: var(--neon-blue);
    --dashboard-time-shadow: 0 0 15px var(--neon-blue);
    --dashboard-time-margin: 15px 0;
    --dashboard-time-weight: 900;
    --dashboard-date-font: 'Share Tech Mono', monospace;
    --dashboard-date-color: #8f9ca2;
    
    --wrapper-padding-top: 90px;
    --wrapper-padding-bottom: 90px;

    /* 登入頁專屬變數 */
    --login-container-bg: rgba(10, 11, 16, 0.88);
    --login-container-border: 1px solid rgba(0, 240, 255, 0.35);
    --login-container-shadow: 0 0 25px rgba(0, 240, 255, 0.2), inset 0 0 15px rgba(0, 240, 255, 0.05);
    --login-container-border-radius: 0px;
    --login-container-clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    --login-container-padding: 40px 30px;
    --login-container-max-width: 420px;
    --login-container-margin: auto;
    
    --title-font-family: 'Orbitron', sans-serif;
    --title-letter-spacing: 3px;
    --title-text-color: var(--neon-blue);
    --title-text-shadow: 0 0 10px var(--neon-blue);
    --title-font-weight: 700;
    --title-margin-bottom: 2rem;
    --title-font-size: 1.6rem;
    
    --label-color: #8f9ca2;
    --label-font-family: 'Share Tech Mono', monospace;
    --label-letter-spacing: 1.5px;
    --label-font-size: 12px;
    
    --button-padding: 12px;
    --button-font-family: 'Share Tech Mono', monospace;
    --button-letter-spacing: 2px;
    --button-border-radius: 0px;
    --button-clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    --button-border: 1px solid var(--toxic-green);
    --button-bg: rgba(57, 255, 20, 0.08);
    --button-color: var(--toxic-green);
    --button-shadow: 0 0 12px rgba(57, 255, 20, 0.25);
    
    --button-hover-bg: var(--toxic-green);
    --button-hover-color: #000000;
    --button-hover-shadow: 0 0 22px var(--toxic-green);
    
    --error-color: var(--neon-magenta);
    --error-text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
    --error-font-family: 'Share Tech Mono', monospace;
    --error-margin-top: 1.2rem;
    --error-font-size: 13px;
    --error-letter-spacing: 1px;
}

/* CRT 模擬掃描線 */
[data-theme="cyberpunk"] body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
    z-index: 9999;
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.35;
}

/* 賽博龐克裝飾角標記 */
[data-theme="cyberpunk"] .main-content::before,
[data-theme="cyberpunk"] .card-lite::before,
[data-theme="cyberpunk"] .login-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 8px; height: 8px;
    border-top: 2px solid var(--neon-blue);
    border-left: 2px solid var(--neon-blue);
    pointer-events: none;
    display: block;
}

[data-theme="cyberpunk"] .card-lite h5 {
    border-bottom: 1px solid rgba(0, 240, 255, 0.3);
    padding-bottom: 8px;
}

[data-theme="cyberpunk"] .kv {
    border-bottom: 1px dashed rgba(0, 240, 255, 0.2);
    padding: 10px 0;
}

[data-theme="cyberpunk"] .bottom-nav .nav-item.active {
    text-shadow: 0 0 5px var(--neon-blue);
}

/* === 週五超載能量槽 (Weekly Power Core) === */
[data-theme="cyberpunk"] .weekly-energy-grid {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 15px !important;
    box-sizing: border-box !important;
}

.energy-cell {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: rgba(5, 5, 8, 0.7) !important;
    border: 1px solid rgba(0, 240, 255, 0.15) !important;
    padding: 8px 4px !important;
    position: relative !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
    transition: all 0.3s ease;
}

.energy-cell .cell-label {
    font-size: 10px !important;
    font-weight: bold !important;
    color: #8f9ca2 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    font-family: 'Share Tech Mono', monospace !important;
}

.energy-cell .cell-bar {
    width: 80% !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease;
}

/* 狀態 1: 已充能 (Charged) */
.energy-cell.charged {
    border-color: var(--toxic-green) !important;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.15), inset 0 0 5px rgba(57, 255, 20, 0.05) !important;
}
.energy-cell.charged .cell-label {
    color: var(--toxic-green) !important;
    text-shadow: 0 0 5px var(--toxic-green) !important;
}
.energy-cell.charged .cell-bar {
    background: var(--toxic-green) !important;
    border-color: var(--toxic-green) !important;
    box-shadow: 0 0 8px var(--toxic-green) !important;
}

/* 狀態 2: 正在蓄電中 (Charging) */
.energy-cell.charging {
    border-color: var(--neon-blue) !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.25) !important;
    animation: cyberBreathing 1.5s infinite alternate !important;
}
.energy-cell.charging .cell-label {
    color: var(--neon-blue) !important;
    text-shadow: 0 0 6px var(--neon-blue) !important;
}
.energy-cell.charging .cell-bar {
    background: var(--neon-blue) !important;
    border-color: var(--neon-blue) !important;
    box-shadow: 0 0 8px var(--neon-blue) !important;
    animation: barFlicker 0.2s infinite alternate !important;
}

/* 狀態 3: 週五超載 (Overdrive) */
.energy-cell.overdrive {
    border-color: var(--neon-magenta) !important;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.3) !important;
    animation: cyberBreathingMagenta 1s infinite alternate !important;
}
.energy-cell.overdrive .cell-label {
    color: var(--neon-magenta) !important;
    text-shadow: 0 0 8px var(--neon-magenta) !important;
}
.energy-cell.overdrive .cell-bar {
    background: var(--neon-magenta) !important;
    border-color: var(--neon-magenta) !important;
    box-shadow: 0 0 10px var(--neon-magenta) !important;
}

@keyframes cyberBreathing {
    0% { opacity: 0.6; }
    100% { opacity: 1; box-shadow: 0 0 15px rgba(0, 240, 255, 0.45) !important; }
}

@keyframes cyberBreathingMagenta {
    0% { opacity: 0.7; }
    100% { opacity: 1; box-shadow: 0 0 20px rgba(255, 0, 127, 0.6) !important; }
}

@keyframes barFlicker {
    0% { opacity: 0.75; }
    100% { opacity: 1; }
}

.font-mono {
    font-family: 'Share Tech Mono', monospace !important;
}