/* member.css — โซนสมาชิก: sidebar รวม + หน้าหลักของฉัน (/home)
 * โหลดท้ายสุด (ต่อจาก styles/manage/records) — ใช้ตัวแปรและ .m-sidebar/.panel เดิมได้
 * มือถือเป็นหลัก: sidebar เป็น drawer (จาก manage.css), เดสก์ท็อป ≥1025px ค้างซ้าย */

/* ---------------- กรอบรางวัล + ป้ายอวตาร (แสดงรอบ avatar ทุกจุด) ----------------
   avatar เดิม overflow:hidden (crop รูปวงกลม) → เปลี่ยนเป็น crop ที่ตัว img แทน
   เพื่อให้กรอบ/ป้ายมุมล้นออกนอกวงได้ */
.user-avatar { overflow: visible; }
.user-avatar img { border-radius: 50%; }

/* อวตารสัตว์ (SVG วาดเอง) เต็มวง */
.av-animal { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: block; }
.av-animal svg { width: 100%; height: 100%; display: block; }

/* กรอบรางวัล — วงหลายชั้น/ไล่เฉด (องค์ประกอบมากกว่าเส้นเดียว) + ornament ประดับมุม */
.av-frame_leaf    { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4ade80; }
.av-frame_flower  { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f472b6, 0 0 0 6px #fbcfe8; }
.av-frame_star    { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fbbf24; }
.av-frame_heart   { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fb7185, 0 0 0 6px #fecdd3; }
.av-frame_rainbow { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f472b6, 0 0 0 6px #fbbf24, 0 0 0 8px #38bdf8; }
.av-frame_crown   { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b, 0 0 11px -1px #f59e0b; }
.av-frame_gold    { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fcd34d, 0 0 11px -1px #f59e0b; }
.av-frame_rarebloom {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f0abfc, 0 0 12px -1px #d946ef;
  animation: av-rare 2.4s ease-in-out infinite;
}
@keyframes av-rare {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f0abfc, 0 0 12px -1px #d946ef; }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fcd34d, 0 0 14px 0 #f59e0b; }
}
/* ornament — อีโมจิประดับกรอบ (มุมบนขวา) ในตุ่มขาว เอียงเล็กน้อย */
.av-orn {
  position: absolute; top: -9px; right: -7px;
  width: 1.55em; height: 1.55em; font-size: 0.6em;
  display: grid; place-items: center; line-height: 1;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.32);
  transform: rotate(9deg);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .av-frame_rarebloom { animation: none; } }

/* ---------------- บัตรประจำตัวหัว sidebar ---------------- */
.mz-id {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.mz-avatar { width: 44px; height: 44px; font-size: 1rem; }
.mz-id-text { min-width: 0; }
.mz-id-text strong {
  display: block;
  font-family: "Prompt", sans-serif;
  font-size: 0.95rem;
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mz-email {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mz-id .role-badge { margin-top: 4px; }

/* เว้นช่องระหว่างเมนูสมาชิกกับกลุ่มผู้ดูแล */
#m-nav { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ใน member zone: หน้า me เดิมเป็น section ลอย มี padding ของตัวเอง — เชลล์จัดการให้แล้ว */
.member-zone .me { padding: 0 0 20px; }

/* เนื้อหาโซนสมาชิกแคบกว่าหน้าเต็ม (มี sidebar) — ให้แถบวันลาสะสมตกบรรทัดใหม่ กันการ์ดสถิติถูกบีบ */
.member-zone .me-summary { flex-wrap: wrap; }
.member-zone .sum-leave, .member-zone .sum-eval { flex: 1 1 100%; margin-top: 0; }
.member-zone .sum-stat span { white-space: nowrap; }

/* ---------------- หน้าหลักของฉัน (/home) ---------------- */
/* การ์ดทักทาย "สมุดพกวันนี้" — ลายเวทีเกมบน hero (ไล่เฉดพาสเทล + กริดขาว) + ตราวันที่ปฏิทินฉีก */
.home-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(99, 102, 241, 0.14);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(135deg, #e0f2fe 0%, #ede9fe 35%, #fce7f3 65%, #d1fae5 100%);
  background-size: 50px 50px, 50px 50px, 100% 100%;
}
.home-avatar {
  width: 58px; height: 58px;
  font-size: 1.25rem;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}
.home-greet-text { min-width: 0; flex: 1; }
.home-eyebrow {
  display: inline-block;
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  color: #7c3aed;
  margin-bottom: 2px;
}
.home-title {
  font-family: "Prompt", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 1.75rem);
  line-height: 1.25;
  margin: 0;
  /* ชื่อครูไล่เฉดฟ้า→ม่วง เข้ากับหัวเรื่อง hero */
  background: linear-gradient(90deg, #0f172a 0%, #4338ca 70%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #1e293b;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-title { color: transparent; }
}
.home-date { margin: 5px 0 0; font-size: 0.86rem; color: #475569; }

/* ตราวันที่ (ปฏิทินฉีก) — เซ็นเซอร์ของหน้า มีหัวสีไล่เฉด + เลขวันตัวใหญ่ + รูตรึงกระดาษ 2 จุด */
.home-daystamp {
  flex-shrink: 0;
  width: 76px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow: 0 8px 18px -10px rgba(99, 102, 241, 0.5);
  text-align: center;
  position: relative;
  font-family: "Prompt", sans-serif;
  line-height: 1;
}
.home-daystamp::before {
  /* รูตรึงกระดาษ 2 จุด บนหัวปฏิทิน */
  content: "";
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: -14px 0 0 rgba(255, 255, 255, 0.6), 14px 0 0 rgba(255, 255, 255, 0.6);
  z-index: 1;
}
.home-daystamp .ds-wd {
  display: block; padding: 9px 4px 6px;
  font-size: 0.72rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  letter-spacing: 0.3px;
}
.home-daystamp .ds-day { display: block; font-size: 1.9rem; font-weight: 700; color: var(--ink); margin: 5px 0 1px; }
.home-daystamp .ds-mo { display: block; font-size: 0.68rem; color: var(--muted); padding-bottom: 8px; }

/* จอเล็ก: ตราวันที่ยังอยู่ แต่ให้หัวการ์ดตัดบรรทัดได้ */
@media (max-width: 420px) {
  .home-hero { flex-wrap: wrap; }
  .home-daystamp { width: 68px; }
}

/* ค่อย ๆ ปรากฏตอนเปิดหน้า (stagger) — เคารพ prefers-reduced-motion */
#home-view:not([hidden]) .home-hero,
#home-view:not([hidden]) .me-summary,
#home-view:not([hidden]) .home-grid {
  animation: home-rise 0.45s ease backwards;
}
#home-view:not([hidden]) .me-summary { animation-delay: 0.07s; }
#home-view:not([hidden]) .home-grid { animation-delay: 0.14s; }
@keyframes home-rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  #home-view:not([hidden]) .home-hero,
  #home-view:not([hidden]) .me-summary,
  #home-view:not([hidden]) .home-grid { animation: none; }
}

/* สรุปสถานะ (ใช้ .me-summary/.sum-* จาก records.css) + ปุ่มชวนไปดูรายการค้าง */
.sum-hero-cta {
  margin-left: auto;
  flex-shrink: 0;
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  color: #b91c1c;
  background: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.4);
}
.sum-hero-cta:hover { filter: brightness(0.96); }

.home-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }

/* แถวรายการล่าสุด */
.home-recent { display: flex; flex-direction: column; gap: 9px; }
.home-rec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid #eef2ff;
  border-left: 4px solid var(--type-color, #3b82f6);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.14s ease, border-color 0.14s ease;
}
.home-rec-row:hover { background: #f8fafc; border-color: var(--line); }
.hr-icon { font-size: 1.25rem; flex-shrink: 0; }
.hr-main { flex: 1; min-width: 0; }
.hr-main b {
  display: block;
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-main small { display: block; color: var(--muted); font-size: 0.8rem; }
.home-empty { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 18px 0; margin: 0; }

@media (min-width: 1025px) {
  .home-hero { padding: 26px 28px; }
}

/* ---- สถานะข้อความในการ์ดขอออกนอกบริเวณ (/leave) — คลาส checkin-* = leg "เช็คอินกลับ" ของ outing ---- */
.checkin-done { font-size: 1.05rem; font-weight: 700; color: #16a34a; }
.checkin-msg { margin: 0; color: #64748b; }
.checkin-msg.checkin-err { color: #b91c1c; }
.checkin-prog { margin: 0; font-size: .85rem; color: #64748b; min-height: 1em; }
.checkin-hint { margin: 0; font-size: .8rem; color: #94a3b8; }

/* ---- การ์ดขอออกนอกบริเวณโรงเรียน (หน้า /leave) — mobile-first ---- */
.leave-card { margin-bottom: 16px; }
.leave-card .leave-body { display: grid; gap: 14px; }

/* ปุ่มหลักเต็มความกว้าง (mobile-first) + ปุ่มกลับสีอำพัน */
.leave-body .lv-full { width: 100%; display: flex; align-items: center; justify-content: center; }
.leave-body .btn-primary.lv-amber { background: linear-gradient(135deg, #d97706, #f59e0b); }

/* แถบสถานะปัจจุบัน */
.lv-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  font-family: "Prompt", sans-serif; font-weight: 600; font-size: .95rem; }
.lv-status .lv-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lv-status.in { background: #ecfdf5; color: #15803d; }
.lv-status.in .lv-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.lv-status.outzone { background: #fff7ed; color: #b45309; }
.lv-status.outzone .lv-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); }

/* ขั้นตอน (numbered step) */
.lv-step { display: grid; gap: 8px; }
.lv-step-h { display: flex; align-items: center; gap: 8px; font-family: "Prompt", sans-serif; font-weight: 600; font-size: .92rem; color: var(--ink); }
.lv-step-n { width: 22px; height: 22px; border-radius: 50%; background: #eef2ff; color: #4338ca; font-size: .8rem; display: grid; place-items: center; flex: none; font-weight: 700; }
.lv-step textarea { font-family: inherit; font-size: .95rem; color: var(--ink); padding: 11px 13px;
  border: 1.5px solid #e2e8f0; border-radius: 12px; resize: vertical; width: 100%; min-height: 60px; }
.lv-step textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }

/* กล่องถ่ายรูป — tile ใหญ่กดเดียว + text-link อัปโหลด */
.leave-photo { display: grid; gap: 8px; width: 100%; }
.leave-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lv-tile { width: 100%; border: 2px dashed #c7d2fe; background: #f8faff; border-radius: 16px; padding: 22px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: border-color .15s, background .15s; }
.lv-tile:active { background: #eef2ff; border-color: #6366f1; }
.lv-tile-ic { font-size: 2rem; }
.lv-tile-t1 { font-family: "Prompt", sans-serif; font-weight: 600; color: #4338ca; }
.lv-tile-t2 { font-size: .82rem; color: #64748b; }
.lv-alt { text-align: center; font-size: .85rem; color: #6366f1; background: none; border: none; cursor: pointer; padding: 4px; }
/* ปุ่มอัปโหลดรูปแบบชัดเจน (แทน text-link เดิม) — เต็มความกว้างคู่กับ tile ถ่ายรูป */
.lv-upload-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid #c7d2fe; font-family: "Prompt", sans-serif; font-weight: 600; }
.leave-video { width: 100%; border-radius: 12px; background: #0f172a; aspect-ratio: 4 / 3; object-fit: cover; }
.leave-photo-preview { width: 100%; max-width: 220px; border-radius: 12px; border: 2px solid #a7f3d0; }

/* chips ตำแหน่ง/เครือข่าย (ทำงานเบื้องหลัง ไม่บล็อก) */
.lv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lv-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid transparent; }
.lv-chip.ok { background: #ecfdf5; color: #15803d; border-color: #bbf7d0; }
.lv-chip.pend { background: #f1f5f9; color: #64748b; }
.lv-chip.weak { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.lv-chip.off { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* การ์ดแนะนำเปิดตำแหน่ง (โผล่เมื่อถูกปฏิเสธ/ปิด) */
.lv-guide { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.lv-guide-h { font-weight: 600; font-size: .9rem; color: #92400e; }
.lv-guide-b { font-size: .82rem; color: #a16207; line-height: 1.5; }

/* กล่องแผนที่ตำแหน่งปัจจุบัน (ใต้ปุ่มขอออก) + ปุ่มระบุตำแหน่งล่าสุด */
.lv-locbox { border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 14px; padding: 12px; display: grid; gap: 10px; }
.lv-locbox-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-family: "Prompt", sans-serif; font-weight: 600; font-size: .9rem; color: var(--ink); }
.lv-map-slot { display: grid; gap: 8px; }
.lv-map { width: 100%; height: 220px; border: 0; border-radius: 12px; display: block; }
.lv-map-hint { font-size: .85rem; color: #64748b; margin: 0; }
.lv-gps-line { font-size: .8rem; color: #475569; margin: 0; font-variant-numeric: tabular-nums; }
/* แผนที่ในฟอร์ม (เหนือปุ่มยืนยัน) — อ่านอย่างเดียว เลื่อน/ซูมไม่ได้ */
.lv-form-map { display: grid; gap: 6px; }
.lv-form-map .lv-map { height: 180px; }
.lv-map-ro { pointer-events: none; }

/* ยกเลิก/ย้อนกลับ แบบ text-link */
.lv-cancel { display: block; width: 100%; text-align: center; padding: 8px; background: none; border: none; color: #94a3b8; font-size: .9rem; cursor: pointer; }

/* ออกอยู่ + countdown hero */
.leave-out-info { font-size: .95rem; font-weight: 600; color: #b45309; }
.lv-count { text-align: center; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, #eef2ff, #faf5ff); }
.lv-count-lbl { font-size: .82rem; color: #6b7280; }
.lv-count-big { font-family: "Prompt", sans-serif; font-weight: 700; font-size: 2.4rem; color: #4338ca; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 2px 0; }
.lv-count-sub { font-size: .82rem; color: #64748b; }
.lv-count.over { background: #fee2e2; }
.lv-count.over .lv-count-big, .lv-count.over .lv-count-lbl, .lv-count.over .lv-count-sub { color: #b91c1c; }
.leave-done-nore { font-size: 1rem; font-weight: 600; color: #7c3aed; }

/* โปสเตอร์เตรียมสิทธิ์เบราว์เซอร์ (สถานะระบบปิด) — static ล้วน */
.lv-gd { display: grid; gap: 12px; }
.lv-gd-title { font-family: "Prompt", sans-serif; font-weight: 600; font-size: .92rem; color: #1e293b; line-height: 1.5; }
.lv-gd-prompt { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 11px 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06); display: grid; gap: 10px; }
.lv-gd-eg { position: absolute; top: 7px; right: 11px; font-size: .66rem; font-weight: 600; color: #94a3b8; letter-spacing: .02em; }
.lv-gd-prompt-t { font-size: .85rem; color: #475569; line-height: 1.45; padding-right: 70px; }
.lv-gd-prompt-t b { color: #1e293b; font-weight: 700; }
.lv-gd-btns { display: flex; gap: 8px; justify-content: flex-end; }
.lv-gd-btn { font-size: .82rem; font-weight: 600; padding: 7px 16px; border-radius: 999px; background: #f1f5f9; color: #475569; }
.lv-gd-btn.allow { background: #4f46e5; color: #fff; font-weight: 700; }
.lv-gd-bar { display: flex; align-items: center; gap: 8px; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 999px; padding: 8px 14px; font-size: .82rem; color: #475569; }
.lv-gd-lock { display: inline-block; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px rgba(245, 158, 11, .5); }
.lv-gd-cap { font-size: .78rem; color: #64748b; line-height: 1.5; }
.lv-gd-flow { font-size: .78rem; color: #64748b; background: #f8fafc; border-radius: 10px; padding: 8px; text-align: center; line-height: 1.6; }