/* ============================================
   新手爸媽神器 - 生產級 CSS
   移除外部 CDN 依賴，完整本地化
   ============================================ */

/* 基礎樣式重設 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Safe Area Inset Support (iOS Dynamic Island / Notch) */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

body {
    font-family: 'Nunito', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #FFFBF5;
    color: #5C5470;
    line-height: 1.6;
    min-height: 100vh;
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}

/* ============================================
   布局 - Flexbox 相容
   ============================================ */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

/* 邊距 */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

.m-2 { margin: 0.5rem; }
.m-4 { margin: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-2 { margin-left: 0.5rem; }

/* 寬度和高度 */
svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.w-4 { width: 1rem !important; }
.h-4 { height: 1rem !important; }
.w-5 { width: 1.25rem !important; }
.h-5 { height: 1.25rem !important; }
.w-6 { width: 1.5rem !important; }
.h-6 { height: 1.5rem !important; }
.w-8 { width: 2rem !important; }
.h-8 { height: 2rem !important; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-screen { height: 100vh; }

.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }

.text-center { text-align: center; }
.text-right { text-align: right; }

/* 顯示 */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }

/* 相對位置 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.top-4 { top: 1rem; }
.right-4 { right: 1rem; }
.left-4 { left: 1rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.max-h-96 { max-height: 24rem; }

/* ============================================
   排版
   ============================================ */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }

/* ============================================
   顏色
   ============================================ */
.text-white { color: white; }
.text-gray-500 { color: #6B7280; }
.text-gray-600 { color: #4B5563; }
.text-gray-700 { color: #374151; }
.text-pink-500 { color: #EC4899; }
.text-pink-700 { color: #BE185D; }
.text-blue-500 { color: #3B82F6; }

.bg-white { background-color: white; }
.bg-gray-50 { background-color: #F9FAFB; }
.bg-gray-100 { background-color: #F3F4F6; }
.bg-pink-50 { background-color: #FDF2F8; }
.bg-red-100 { background-color: #FEE2E2; }

/* ============================================
   邊框和圓角
   ============================================ */
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

.border { border: 1px solid #E5E7EB; }
.border-2 { border: 2px solid; }

/* ============================================
   陰影和效果
   ============================================ */
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }

.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* ============================================
   過渡效果
   ============================================ */
.transition { transition: all 0.3s ease; }
.transition-shadow { transition: box-shadow 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }

/* ============================================
   自訂元件樣式
   ============================================ */

/* 暖色卡片 */
.warm-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.warm-card:hover {
    box-shadow: 0 6px 25px 0 rgba(0, 0, 0, 0.1);
}

/* 暖色模態框 */
.warm-modal {
    background-color: #FFFBF5;
    border-radius: 1.5rem;
    border: 1px solid #EAE2D9;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 按鈕樣式 */
.btn-warm {
    transition: all 0.3s ease;
    border-radius: 0.75rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    display: inline-block;
}

.btn-warm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-warm:active {
    transform: translateY(0);
}

.btn-pink {
    background-color: #FFD6D6;
    color: #C70039;
}

.btn-blue {
    background-color: #D6E6FF;
    color: #30475E;
}

.btn-green {
    background-color: #D6FFD6;
    color: #2F5D62;
}

.btn-yellow {
    background-color: #FFF5CC;
    color: #8A6D3B;
}

.btn-gray {
    background-color: #F3F4F6;
    color: #4B5563;
}

.btn-donate {
    background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
    background-size: 200% auto;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-donate:hover {
    background-position: right center;
}

/* 計時器顯示 */
.timer-display {
    font-family: 'Nunito', 'Noto Sans TC', monospace;
    color: #352F44;
    font-weight: bold;
}

/* 日期選擇器 */
.flatpickr-calendar {
    background: #FFFBF5 !important;
    border-radius: 0.75rem !important;
    border: 1px solid #F7EFE5 !important;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #FFADAD !important;
    border-color: #FFADAD !important;
    color: #fff !important;
}

.flatpickr-day:hover {
    background: #FFE5E5 !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #5C5470 !important;
}

.numInput,
.flatpickr-current-month input.cur-year {
    color: #5C5470 !important;
    background: transparent !important;
}

.flatpickr-weekday {
    color: #B3A5C8 !important;
}

/* 紀錄面板 */
.records-panel {
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
}

/* 手風琴 */
.accordion-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem 1rem;
    text-align: left;
    width: 100%;
    font-weight: 600;
    transition: all 0.3s ease;
}

.accordion-button:hover {
    background-color: rgba(255, 173, 173, 0.1);
}

.accordion-arrow {
    transition: transform 0.3s ease;
    display: inline-block;
    margin-right: 0.5rem;
}

.accordion-button[aria-expanded="true"] .accordion-arrow {
    transform: rotate(90deg);
}

/* 環形進度條 */
.ring-2 {
    outline: 2px solid;
    outline-offset: 2px;
}

.ring-pink-300 {
    outline-color: #F9A8D4;
}

/* 最小高度 */
.min-h-screen {
    min-height: 100vh;
}

/* 焦點狀態 */
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #FFADAD;
    outline-offset: 2px;
}

/* 禁用狀態 */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 模態框背景 */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* 響應式設計 */
@media (max-width: 640px) {
    .text-3xl { font-size: 1.5rem; }
    .text-4xl { font-size: 1.875rem; }
    .max-w-md { max-width: 100%; }
}

/* 列印樣式 */
@media print {
    .hidden { display: none; }
    body { background-color: white; }
}

/* 深色模式支援 (OLED Night Theme) */
body.dark {
    background-color: #121016;
    color: #E2DCED;
}

body.dark .warm-card {
    background: rgba(30, 26, 38, 0.88);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.45);
}

body.dark .warm-modal {
    background-color: #1A1622;
    border-color: #352B44;
    color: #E2DCED;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6);
}

body.dark .timer-display {
    color: #FFB5A7;
    text-shadow: 0 0 20px rgba(255, 181, 167, 0.2);
}

body.dark h1, body.dark h2, body.dark h3, body.dark h4 {
    color: #F5E8FF !important;
}

body.dark .text-gray-500, body.dark .text-gray-600, body.dark .text-gray-700 {
    color: #AFA2C2 !important;
}

body.dark .text-purple-800 {
    color: #D8B4FE !important;
}

body.dark .border-gray-100, body.dark .border-gray-200, body.dark .border-gray-300 {
    border-color: #383049 !important;
}

body.dark .bg-gray-50, body.dark .bg-gray-100, body.dark .bg-gray-200 {
    background-color: #241D30 !important;
    color: #DDD2EE !important;
}

body.dark .bg-white\/80, body.dark .bg-white\/50, body.dark .bg-white\/60, body.dark .bg-white {
    background-color: rgba(38, 32, 50, 0.85) !important;
    color: #E8E0F5 !important;
}

body.dark input[type="text"], 
body.dark input[type="number"], 
body.dark input[type="email"] {
    background-color: #262033 !important;
    color: #FFFFFF !important;
    border-color: #4A3E62 !important;
}

body.dark input::placeholder {
    color: #7D7094 !important;
}

body.dark .flatpickr-calendar {
    background: #1A1622 !important;
    border: 1px solid #352B44 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

body.dark .flatpickr-months .flatpickr-month,
body.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
body.dark .numInput,
body.dark .flatpickr-current-month input.cur-year {
    color: #E2DCED !important;
}

body.dark .flatpickr-day {
    color: #DDD2EE !important;
}

body.dark .flatpickr-day:hover {
    background: #3B2E4E !important;
}

body.dark .flatpickr-weekday {
    color: #9A8BB2 !important;
}

/* 常用奶量速選膠囊與步進器 */
.ml-chip {
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    color: #4B5563;
    user-select: none;
}

.ml-chip:hover {
    border-color: #FFB5A7;
    color: #C70039;
    transform: translateY(-1px);
}

.ml-chip.active {
    background-color: #FFD6D6;
    border-color: #FF8E8E;
    color: #C70039;
    font-weight: 700;
}

body.dark .ml-chip {
    background-color: #2A2338;
    border-color: #433757;
    color: #DDD2EE;
}

body.dark .ml-chip:hover {
    border-color: #FFB5A7;
    color: #FFADAD;
}

body.dark .ml-chip.active {
    background-color: #4A2737;
    border-color: #FF8E8E;
    color: #FFADAD;
}

.stepper-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 0.9rem;
    border: 1px solid #E5E7EB;
    background-color: #F9FAFB;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.stepper-btn:active {
    transform: scale(0.95);
}

body.dark .stepper-btn {
    background-color: #2A2338;
    border-color: #433757;
    color: #E2DCED;
}

body.dark .stepper-btn:hover {
    background-color: #382F4B;
}

/* 智慧作息狀態徽章 */
.smart-status-banner {
    background: linear-gradient(135deg, rgba(255, 214, 214, 0.45) 0%, rgba(214, 230, 255, 0.45) 100%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

body.dark .smart-status-banner {
    background: linear-gradient(135deg, rgba(74, 39, 55, 0.4) 0%, rgba(37, 52, 79, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

/* 主題切換按鈕 */
.theme-toggle-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.25s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.08);
}

body.dark .theme-toggle-btn {
    background: rgba(45, 38, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
    color: #FDE047;
}

/* 無障礙 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}