/* =========================================
   1. GLOBAL STYLES & FONTS
   ========================================= */
/* นำเข้า Font Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700&display=swap');

* {
    box-sizing: border-box; 
    /* ปิดไฮไลท์เวลากดบนมือถือ */
    -webkit-tap-highlight-color: transparent; 
    -webkit-user-select: none; /* สำหรับ Webkit Browsers (Chrome, Safari บนมือถือ) */
    -moz-user-select: none;    /* สำหรับ Firefox */
    -ms-user-select: none;     /* สำหรับ Internet Explorer/Edge */
    user-select: none;         /* มาตรฐาน */
}

body {
    margin: 0;
    font-family: 'Kanit', sans-serif; 
    background-color: #f4f7f6; /* สีพื้นหลังขาวอมเทา */
    font-size: 16px;
    color: #333;
}

/* บังคับ Button และ Input ทุกตัวให้ใช้ Font Kanit */
button, input, select, textarea {
    font-family: 'Kanit', sans-serif !important;
}

#app-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}


/* =========================================
   2. HEADER & DASHBOARD
   ========================================= */
#sticky-dashboard {
    background-color: #ffffff;
    padding: 15px 15px 20px 15px; 
    border-bottom-left-radius: 20px; 
    border-bottom-right-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); 
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

/* ปุ่มตั้งราคา (ชัดเจนและโค้งมน) */
.settings-button {
    background-color: #00796B; 
    color: white;
    border: none;
    border-radius: 12px; 
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 77, 64, 0.2); 
    transition: transform 0.1s;
}
.settings-button:active {
    transform: scale(0.98);
    background-color: #004D40; 
}

.grade-dashboard {
    display: flex;
    justify-content: space-between;
    gap: 6px; /* ช่องว่างระหว่างการ์ด */
}

/* --- ดีไซน์ CARD --- */
.grade-card {
    flex: 1;
    width: 25%;
    padding: 10px 2px; /* ลด Padding เพื่อให้มีพื้นที่แนวนอน */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    background-color: #ffffff;
    border: 1px solid #eee;
    border-radius: 16px; 
    position: relative;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    min-height: 100px; /* บังคับความสูงขั้นต่ำ รองรับ 2 บรรทัดน้ำหนัก */
}

/* จัด Text ให้อยู่ตรงกลาง ไม่ตกบรรทัด */
.grade-card span {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap; /* ห้ามตัดคำชื่อเกรด/ราคา */
    line-height: 1.2;
}

/* --- TEXT STYLES ใน Card --- */
.grade-card .price { font-size: 3vw; color: #888; font-weight: 400; margin-bottom: 4px; }
.grade-card .grade-name { font-size: 3.5vw; color: #333; font-weight: 600; margin-bottom: 4px; }

/* --- ACTIVE STATE (ตอนเลือก) --- */
.grade-card.active {
    background-color: #fff;
    border-color: transparent; 
    transform: translateY(-5px); /* ลอยขึ้นมา */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
}

/* เปลี่ยนสีขอบตาม Data Attribute เมื่อ Active */
.grade-card[data-grade="A"].active { border: 2px solid #4CAF50; }
.grade-card[data-grade="B"].active { border: 2px solid #FF9800; }
.grade-card[data-grade="C"].active { border: 2px solid #F44336; }
.grade-card[data-grade="D"].active { border: 2px solid #2196F3; }


/* --- สถานะน้ำหนัก (2 บรรทัด ตัน/กก.) --- */
.total-weight-container {
    margin-top: auto; /* ดันไปอยู่ล่างสุดของการ์ด */
    margin-bottom: 5px;
    width: 100%;
}
.weight-main {
    display: block;
    font-size: 4.2vw; /* ตัวใหญ่ (ตัน หรือ กก.หลัก) */
    font-weight: 700;
    color: #FF5722;
    line-height: 1.1;
}
.weight-sub {
    display: block;
    font-size: 3vw; /* ตัวเล็ก (เศษ กก.) */
    font-weight: 600;
    color: #9E9E9E; 
    margin-top: 2px;
}
.unit-label {
    font-size: 0.7em; 
    font-weight: normal;
}


/* --- STATUS DOT (จุดไฟสถานะวงกลมเล็ก) --- */
.active-icon {
    position: absolute;
    top: 8px;   
    right: 8px; 
    
    width: 12px !important;
    height: 12px !important;
    min-width: 12px;
    min-height: 12px;
    
    border-radius: 50%;
    background-color: transparent; 
    border: 2px solid #e0e0e0; 
    
    display: block;
    z-index: 10;
    transition: all 0.2s ease-in-out;
    font-size: 0; /* ซ่อนตัวอักษรข้างใน */
}

/* เมื่อ Active ให้ถมสีและเรืองแสง (ใช้เฉพาะสีเท่านั้น) */
.grade-card.active .active-icon {
    transform: scale(1.2); 
}

/* =========================================
   3. SCROLLABLE LOG (รายการ)
   ========================================= */
#scrollable-log {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
}

.log-item-wrapper {
    margin-bottom: 10px;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.log-entry {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #eee; /* แถบสีด้านซ้ายเริ่มต้น */
}

.grade-name { font-weight: 600; width: 40%; font-size: 16px;}
.weight-value { font-weight: 700; color: #333; width: 30%; text-align: right; font-size: 18px;}
.time-stamp { color: #999; font-size: 12px; width: 30%; text-align: right; align-self: center;}


/* =========================================
   4. FOOTER & INPUT AREA
   ========================================= */
#sticky-footer {
    background-color: #ffffff;
    padding: 15px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
    position: sticky;
    bottom: 0;
    z-index: 100;
}

/* --- ปุ่ม Action ด้านล่าง (Reset + Summary) --- */
.footer-actions {
    display: flex;
    flex-direction: row-reverse; /* รีเซ็ตอยู่ซ้าย, สรุปอยู่ขวา */
    gap: 10px; 
    margin-bottom: 15px;
}

.action-btn {
    padding: 12px;
    font-size: 16px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* บังคับความสูงเท่ากัน (แก้ปัญหาความสูงไม่เท่ากัน) */
    height: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 26px;
}

.summary-button {
    flex-grow: 1; 
    background-color: #0072d5; 
}

.reset-button {
    flex-basis: 100px; 
    background-color: #D32F2F; 
}

.current-grade-label {
    display: block;
   text-align: center;
    font-size: 16px;
    color: #04235c;
    margin-bottom: 8px;
    padding-left: 5px;
}

.weight-input-field {
    width: 100%; 
    padding: 0px;
    font-size: 32px; 
    text-align: center; 
    border: 2px solid #eee;
    border-radius: 16px;
    font-weight: 700;
    background-color: #fafafa;
    outline: none;
    transition: border-color 0.3s;
}

.enter-button {
    width: 100%;
    padding: 10px;
    font-size: 20px;
    border: none;
    border-radius: 16px;
    background-color: #4CAF50; 
    color: white;
    font-weight: 700;
    margin-top: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: background-color 0.3s, transform 0.1s;
}
.enter-button:active { transform: scale(0.98); }

/* =========================================
   5. MODAL STYLES
   ========================================= */
.modal-overlay {
    display: none; 
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(5px);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: white;
    padding: 25px;
    border-radius: 20px; 
    width: 85%;
    max-width: 350px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-content h3 { margin-top: 0; color: #333; }
.modal-label { text-align: center; margin-top: 10px; color: #666; font-size: 17px;}
.modal-input { 
    width: 100%; 
    padding: 10px; 
    font-size: 20px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    margin-top: 5px;
    text-align: center;
}

.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-button { flex: 1; padding: 12px; border: none; border-radius: 10px; font-weight: 600; font-size: 16px;}
.cancel-btn { width: 100%; background-color: #ebebeb; color: #616161; margin-top: 15px; border: 1px solid #ffcdd2;}
.save-btn { background-color: #4CAF50; color: white; margin-top: 15px; box-shadow: 0 4px 10px rgba(40, 73, 41, 0.3); }
.delete-btn { width: 100%; background-color: #ff4949; color: #fff2f2; margin-top: 15px; border: 1px solid #ffcdd2;}

hr.modal-divider { border: 0; border-top: 1px solid #eee; margin: 20px 0; }

/* --- ACTIVE STATE: จัดการสีของจุดไฟสถานะ (Active Dot) --- */
.grade-card.active .active-icon {
    transform: scale(1.2); /* ขยายใหญ่ขึ้นนิดนึง */
}

/* เกรด A (สีเขียว) */
.grade-card.active[data-grade="A"] .active-icon {
    background-color: #4CAF50;
    border-color: #4CAF50;
    box-shadow: 0 0 6px #4CAF50; /* แสงฟุ้งๆ */
}

/* เกรด B (สีส้ม) */
.grade-card.active[data-grade="B"] .active-icon {
    background-color: #FF9800;
    border-color: #FF9800;
    box-shadow: 0 0 6px #FF9800;
}

/* เกรด C (สีแดง) */
.grade-card.active[data-grade="C"] .active-icon {
    background-color: #F44336;
    border-color: #F44336;
    box-shadow: 0 0 6px #F44336;
}

/* เกรด D (สีฟ้า) */
.grade-card.active[data-grade="D"] .active-icon {
    background-color: #2196F3;
    border-color: #2196F3;
    box-shadow: 0 0 6px #2196F3;
}

/* =========================================
   6. TOAST NOTIFICATION (ย้ายไปด้านบน)
   ========================================= */
#toast-notification {
    visibility: hidden; 
    min-width: 250px;
    background-color: #336656; 
    color: #fff;
    text-align: center;
    border-radius: 8px;
    border: #fafafa 2px solid;
    padding: 12px;
    position: fixed;
    z-index: 500; 
    left: 50%;
    transform: translateX(-50%);
    
    /* [แก้ไข] ย้ายตำแหน่งมาที่ด้านบนจอ (Top) */
    top: 30px; 
    
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    
    /* [แก้ไข] เปลี่ยน transition ให้เป็น top แทน bottom */
    transition: opacity 0.3s, top 0.3s;
}

/* คลาสสำหรับแสดงผล Toast */
#toast-notification.show {
    visibility: visible;
    /* [แก้ไข] ปรับหน่วงเวลาของ Animation ให้เหมาะสมกับการเลื่อนจากบนลงล่าง */
    animation: fadein 0.5s, fadeout 0.5s 2.5s; 
    opacity: 1;
}

/* Animation สำหรับแสดงและซ่อน */
/* @keyframes fadein: เลื่อนจากด้านบนสุด (0) ลงมาที่ตำแหน่ง (30px) */
@keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 30px; opacity: 1;}
}

/* @keyframes fadeout: เลื่อนกลับจากตำแหน่ง (30px) หายไปที่ด้านบนสุด (0) */
@keyframes fadeout {
    from {top: 30px; opacity: 1;} 
    to {top: 0; opacity: 0;}
}

/* =========================================
   CREDIT LINE (เหยื่อล่อ GBoard)
   ========================================= */
.credit-line-footer {
    /* ตำแหน่งที่อยู่ด้านล่างสุดของ footer */
    text-align: center;
    padding-top: 10px; /* เว้นช่องไฟจากปุ่มด้านบน */
    padding-bottom: 10px; 
    
    /* จัด Style ให้เครดิตไลน์ดูเล็กและสุภาพ */
    font-size: 13px; /* กำหนดขนาดเล็ก */
}

.credit-line-footer a {
    color: #4b51ff; /* ใช้สีเขียวของแอป */
    text-decoration: none; /* ไม่มีขีดเส้นใต้ */
    font-weight: bold;
}