/* style.css */

/* ======================================= */
/* 亮色模式 / 預設樣式 (Light Mode / Default) */
/* ======================================= */
body {
    /* Tailwind: bg-gray-50 (Light Mode Base Background) */
    background-color: #f8fafc;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* 全域文字顏色 (Tailwind: text-gray-900) */
    color: #1f2937;
}

/* --- Card --- */
.card {
    /* Tailwind: bg-white */
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: all 0.3s ease-in-out;
}

/* --- Main Image (Logo) --- */
.main-image {
    width: auto;
    max-width: 400px;           /* 改大 */
    height: auto;
    margin: 0 auto 1.5rem;
    display: block;
    object-fit: contain;
    background-color: white;    /* 強制白底 */
    padding: 1.5rem;            /* 加大內距 */
    border-radius: 1rem;        /* 圓角 */
}

/* 暗黑模式下的 Logo 調整 */
html.dark .main-image {
    background-color: white;    /* 暗黑模式也保持白底 */
    filter: none;               /* 移除濾鏡 */
}

/* --- Primary Button --- */
.btn-primary {
    /* Tailwind: bg-indigo-600 */
    background-color: #4f46e5;
    color: white;
    transition: background-color 0.2s;
}
.btn-primary:hover {
    /* Tailwind: bg-indigo-700 */
    background-color: #4338ca;
}

/* --- Secondary Button --- */
.btn-secondary {
    /* Tailwind: bg-gray-200 */
    background-color: #e5e7eb;
    /* Tailwind: text-gray-800 */
    color: #374151;
    transition: background-color 0.2s;
}
.btn-secondary:hover {
    /* Tailwind: bg-gray-300 */
    background-color: #d1d5db;
}

/* --- Warning Button --- */
.btn-warning {
    /* Tailwind: bg-orange-500 */
    background-color: #f97316;
    color: white;
    transition: background-color 0.2s;
}
.btn-warning:hover {
    /* Tailwind: bg-orange-600 */
    background-color: #ea580c;
}

/* ======================================= */
/* 暗黑模式 / Dark Mode (使用 html.dark)      */
/* ======================================= */

/* --- 全域背景 --- */
html.dark body {
    /* Tailwind: dark:bg-gray-900 */
    background-color: #111827;
    /* 全域文字顏色 (Tailwind: dark:text-gray-100) */
    color: #f3f4f6;
}

/* --- Card --- */
html.dark .card {
    /* Tailwind: dark:bg-gray-800 */
    background-color: #1f2937;
    /* 調整陰影以適應深色背景 */
    box-shadow: 0 10px 15px -3px rgb(255 255 255 / 0.05), 0 4px 6px -4px rgb(255 255 255 / 0.05);
}

/* --- Primary Button --- */
html.dark .btn-primary {
    /* Tailwind: dark:bg-indigo-700 */
    background-color: #4338ca;
}
html.dark .btn-primary:hover {
    /* Tailwind: dark:bg-indigo-600 */
    background-color: #4f46e5;
}

/* --- Secondary Button --- */
html.dark .btn-secondary {
    /* Tailwind: dark:bg-gray-700 */
    background-color: #374151;
    /* Tailwind: dark:text-gray-200 */
    color: #e5e7eb;
}
html.dark .btn-secondary:hover {
    /* Tailwind: dark:bg-gray-600 */
    background-color: #4b5563;
}

/* --- Warning Button (可選,通常保持亮色,或略微變暗) --- */
/* 如果要調整,請在這裡添加 html.dark .btn-warning 樣式 */


/* ======================================= */
/* 其他樣式 (Other Styles) */
/* ======================================= */

/* --- Fade In Animation (無須修改) --- */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Notification (無須修改) --- */
.notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    transform: translateX(200%);
    transition: transform 0.5s ease-in-out;
    /* 💡 增加亮色模式預設背景,暗黑模式需另外定義通知背景 */
    background-color: white;
}
.notification.show {
    transform: translateX(0);
}

/* 💡 暗黑模式下的通知背景 (建議用 JS 處理,或在這裡補上) */
html.dark .notification {
    background-color: #374151; /* dark:bg-gray-700 */
    color: #f3f4f6; /* dark:text-gray-100 */
}


/* --- Day Cell Styles (日曆單元格 - 關鍵需要調整對比度) --- */
.day-cell {
    padding: 0.5rem;
    text-align: center;
    border-radius: 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

/* 亮色模式 (已定義) */
.day-cell.future-day { background-color: #d1d5db; color: #4b5563; }
.day-cell.normal-day { background-color: #f3f4f6; color: #1f2937; }
.day-cell.abnormal-day { background-color: #fecaca; color: #ef4444; }
.day-cell.pending-adjustment { background-color: #fde68a; color: #d97706; }
.day-cell.pending-virtual { background-color: #e9d5ff; color: #9333ea; }
.day-cell.approved-virtual { background-color: #bfdbfe; color: #2563eb; }
.day-cell.day-off { background-color: #ccfbf1; color: #0d9488; }
.day-cell.today { background-color: #86efac; color: #166534; font-weight: bold; }
.day-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}


/* 💡 暗黑模式下的日曆單元格 */
html.dark .day-cell.future-day { background-color: #374151; color: #9ca3af; } /* dark:bg-gray-700, dark:text-gray-400 */
html.dark .day-cell.normal-day { background-color: #1f2937; color: #d1d5db; } /* dark:bg-gray-800, dark:text-gray-300 */
html.dark .day-cell.abnormal-day { background-color: #991b1b; color: #fecaca; } /* dark:bg-red-800, dark:text-red-300 */
html.dark .day-cell.pending-adjustment { background-color: #92400e; color: #fde68a; } /* dark:bg-amber-800, dark:text-amber-300 */
html.dark .day-cell.pending-virtual { background-color: #581c87; color: #e9d5ff; } /* dark:bg-purple-800, dark:text-purple-300 */
html.dark .day-cell.approved-virtual { background-color: #1e40af; color: #bfdbfe; } /* dark:bg-blue-800, dark:text-blue-300 */
html.dark .day-cell.day-off { background-color: #065f46; color: #ccfbf1; } /* dark:bg-teal-800, dark:text-teal-300 */
html.dark .day-cell.today {
    background-color: #15803d; /* dark:bg-green-700 */
    color: #bbf7d0; /* dark:text-green-200 */
}
html.dark .day-cell:hover {
    /* 確保 hover 效果在暗色模式下仍可見 */
    transform: translateY(-2px);
    box-shadow: 0 2px 4px -1px rgb(255 255 255 / 0.1), 0 1px 2px -1px rgb(255 255 255 / 0.05);
}

/* 確保地圖容器的背景在反轉時不會出現亮色閃爍 */
#map {
    background: #1e1e1e; /* 設置一個深色背景 */
}

/* 當 HTML 處於暗黑模式時,對 Leaflet 的圖層應用濾鏡 */
html.dark .leaflet-layer,
html.dark .leaflet-control-zoom-in,
html.dark .leaflet-control-zoom-out,
html.dark .leaflet-control-attribution {
    /* invert(100%): 顏色完全反轉,亮變暗,暗變亮 */
    /* hue-rotate(180deg): 可選,調整色調,讓藍色街道不至於變成難看的紅色 */
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}