:root {
  --red: #E02020;
  --red-light: #fff5f5;
  --orange: #E05C20;
  --orange-bg: #fff3ee;
  --green: #0a8c5a;
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --white: #ffffff;
  --surface: #f9fafb;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: 'Prompt', sans-serif;
  background: var(--surface);
  color: var(--text);
  height: 100%;
  font-size: 14px;
  overflow: hidden;
}

.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 40px; /* ลดลงตามความสูง top-bar */
  overflow: hidden;
}

/* TOP BAR (เก็บไว้จาก Style) */
.top-bar {
  background: var(--red);
  padding: 0 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(224,32,32,0.3);
}
.logo-badge { background: rgba(255,255,255,0.2); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: white; }
.page-name { font-size: 16px; font-weight: 600; color: white; }
.time { font-size: 15px; font-weight: 600; color: white; letter-spacing: 1px; }
.version-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #000000;
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}

/* LAYOUT & SCROLL (เก็บไว้จาก Style) */
.fixed-header {
  background: var(--surface);
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 8px 0;
  flex-shrink: 0;
}
.main {
  flex: 1;
  overflow-y: auto;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 16px 120px;
  scrollbar-width: none;
}
.main::-webkit-scrollbar { display: none; }

/* PROFILE & TOTAL CHIP (เก็บไว้จาก Style) */
.profile-strip { 
  display: flex; 
  align-items: stretch; 
  gap: 6px; 
  margin-bottom: 3px; 
}
.profile-chip {
display: flex; 
  align-items: center; 
  background: var(--white);
  border: 1.5px solid var(--border); 
  border-radius: 8px;
  padding: 0 12px; 
  height: 32px; 
  box-shadow: var(--shadow);
}
.chip-value { 
  font-size: 14px; 
  font-weight: 700; 
}
.total-chip {
  flex: 1; /* กินพื้นที่ที่เหลือ */
  min-width: 0; /* สำคัญ: อนุญาตให้หดตัวได้ต่ำกว่าขนาดเนื้อหาข้างใน */
  background: var(--red); 
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(224,32,32,0.25);
  display: flex; 
  align-items: center; 
  justify-content: flex-end;
  padding: 0 12px;
  height: 32px;
  overflow: hidden; /* กันตัวเลขล้นถ้ากล่องหดมากเกินไป */
}
.total-chip .total-value { 
  font-size: 16px; 
  font-weight: 700; 
  color: white; 
}
.total-chip .total-value { font-size: 18px; font-weight: 700; color: white; }

/* SECTION HEADER (เก็บไว้จาก Style) */
.section-header { display: flex; align-items: center; gap: 8px; padding: 10px 0 8px; }
.section-bar { width: 4px; height: 18px; background: var(--red); border-radius: 2px; }
.section-title { font-size: 13px; font-weight: 600; color: var(--red); }
.section-label {
  background: #f1f2f6;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 12px;
  min-height: 22px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  margin-top: 2px;
}

/* TABLE CARD (แทนที่ด้วย Sample) */
.table-card { 
  background: var(--white); 
  border-radius: 16px; 
  box-shadow: var(--shadow); 
  overflow: hidden; 
  width: 100%; 
  max-width: 850px; 
  margin: 0 auto; 
}

/* ROW (แทนที่ด้วย Sample) */
.row { 
  display: grid; 
  grid-template-columns: 2fr 75px 130px 105px; 
  align-items: center; 
  padding: 0 8px; 
  min-height: 34px; /* สูงกว่ากล่อง input (32px) อยู่ 2px */
  border-bottom: 1px solid #f3f4f6; 
}
.row:last-child { border-bottom: none; }

/* สมาชิกใหม่ (เพิ่มจาก Sample) */
.name-btn { 
  background: transparent; border: none; font-family: inherit; font-size: 14px; 
  font-weight: 500; text-align: left; width: 100%; cursor: pointer; color: var(--text);
  outline: none; user-select: none;
}
.name-btn:active, .name-btn.pressing { opacity: 0.6; background: #f8f8f8; border-radius: 6px; }

.num-input-trigger {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 0 8px; font-family: inherit; font-size: 13.5px;
  display: flex; align-items: center; justify-content: flex-end;
  background: var(--surface); cursor: pointer; height: 32px;
  font-weight: 600; outline: none;
  box-sizing: border-box;
}

.col-badge { display: flex; justify-content: flex-end; gap: 3px; padding-right: 2px; }

.unit-badge { 
  background: var(--orange); color: white; border-radius: 7px; 
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; 
  font-size: 11px; font-weight: 700; flex-shrink: 0; border: none;
}

.col-result { display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; }

.result-val { 
  font-size: 14px; font-weight: 600; color: var(--text-muted); 
  text-align: right; flex: 1; letter-spacing: -0.2px; 
}
.result-val.has-value { color: var(--green); }

.result-unit { 
  font-size: 11px; color: #9ca3af; width: 25px; text-align: right; flex-shrink: 0; 
}

/* INPUT (เก็บจาก Style เดิมแต่ปรับตาม Sample) */
.num-input {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 7px 10px; text-align: right; outline: none; font-family: inherit;
}
.num-input:focus { border-color: var(--red); }

/* BOTTOM NAV (เก็บไว้จาก Style) */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white); border-top: 1px solid var(--border);
  display: flex; justify-content: space-around; padding: 4px 4px 10px;
  z-index: 100; box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
}
.nav-item { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.nav-icon-wrap { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.nav-item svg { width: 20px; stroke: #b0b7c3; fill: none; stroke-width: 1.8; }
.nav-label { font-size: 10px; color: #b0b7c3; }
.nav-item.active svg { stroke: var(--red); }
.nav-item.active .nav-label { color: var(--red); font-weight: 600; }
.nav-fab-item { margin-top: -10px; }
.nav-fab-btn {
  width: 44px; height: 44px; background: var(--red); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(224,32,32,0.35);
}
.nav-dot {
  position: absolute; top: 4px; right: calc(50% - 18px);
  width: 8px; height: 8px; background: var(--orange);
  border-radius: 50%; border: 2px solid white;
}
/* ใส่ใน <style> หรือ cal_style.css */
#gender-chip {
  width: 85px; /* ล็อคความกว้างให้พอดีกับคำว่า FEMALE */
  flex-shrink: 0; /* ห้ามกล่องนี้โดนบีบเด็ดขาด */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* คลาส pressing จะถูกเติมโดย dual-action.js เมื่อมีการกดค้างหรือกดลงไป */
#gender-chip.pressing {
    transform: scale(0.95); 
    opacity: 0.8;
}
/* MEDIA QUERIES (แทนที่ด้วย Sample) */
@media (max-width: 480px) {
  .row {
    grid-template-columns: 1fr 50px 100px 85px; 
    padding: 0 6px;
    min-height: 30px;
  }
  .name-btn { font-size: 12.5px; }
  .num-input-trigger { font-size: 11.5px; padding: 0 6px; height: 28px; }
  .result-val { font-size: 11.5px; }
  .result-unit { width: 22px; font-size: 10px; }
  .unit-badge { width: 22px; height: 22px; font-size: 10px; }
}
/* --- พื้นที่เนื้อหาหลัก --- */
.main-content {
  flex: 1;
  overflow-y: auto; /* ให้เลื่อนขึ้นลงได้ */
  padding: 0; /* ปรับเป็น 0 เพื่อให้เนื้อหาชิดขอบ ซ้าย ขวา บน */
  background-color: #f3f4f6; /* สีพื้นหลังอ่อนๆ ช่วยให้ Card สีขาวเด่นขึ้น */
  -webkit-overflow-scrolling: touch; /* ให้การเลื่อนบน iOS ลื่นไหล */
}

/* --- ตารางแบบ Card (จาก cal_sample) --- */
.table-card {
  background: var(--white);
  border-radius: 0; /* เอาความโค้งมนออกเพื่อให้ชิดขอบหน้าจอ */
  box-shadow: var(--shadow);
  overflow: hidden;
  width: 100%;
  margin: 0 auto 120px; /* ชิดขอบบน และเว้นด้านล่างไว้กัน Bottom Nav บัง */
}

/* ปรับแต่ง Scrollbar สำหรับเบราว์เซอร์ Chrome/Safari */
.main-content::-webkit-scrollbar {
  width: 4px;
}
.main-content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}
.clock { font-variant-numeric: tabular-nums; }
.col-name {
    min-width: 0 !important; /* บังคับให้หยุดขยายตามเนื้อหาที่ซ่อน */
    overflow: hidden;
}

/* ล็อกปุ่มไม่ให้กว้างเกินช่องของมัน */
.name-btn {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ถ้าชื่อยาวเกินจะขึ้น ... แทนการดันแถว */
    text-align: left;
}

/* ป้องกันการใช้งานแนวนอนบนมือถือ */
@media screen and (orientation: landscape) and (max-width: 950px) {
  .app-wrapper { display: none !important; }
  .top-bar { display: none !important; }
  body::after {
    content: "กรุณาใช้งานในแนวตั้งเท่านั้น (Please rotate to portrait)";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    z-index: 9999;
  }
}