/* ========================================== */
/* ========================================== */
/* ===  SWIPE ATTENDANCE OVERLAY  =========== */
/* ========================================== */
/* ========================================== */
.swipe-overlay {
  position: fixed;
  top: 0; left: 80px; right: 0; bottom: 0;
  z-index: 8000;
  background: linear-gradient(170deg, #fbfcfb 0%, #f7f8f7 48%, #ffffff 100%);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

/* โผล่แบบ fade ให้จังหวะเท่าหน้าอื่น (การ์ดหน้าอื่นใช้ fadeIn 0.35s) — สลับแท็บแล้วไม่กระตุก */
.swipe-overlay.show { display: flex; animation: fadeIn 0.28s ease; }

.swipe-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Tier 1: page header bar — เหมือน app-header หน้าอื่น */
.swipe-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}

/* Tier 2: class card — แสดงชื่อห้องชัดเจน */
.swipe-class-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  /* 24px บน = padding ของ .app-content ที่ดันหัวจอหน้าอื่นลงมา
     overlay อยู่นอก .app-content เลยต้องชดเชยเอง ไม่งั้นสลับหน้าแล้วขยับ 4px */
  margin: 24px 24px 0;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.swipe-compact-header {
  padding: 8px 16px 7px;
  background: rgba(255,255,255,0.6);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

@media (max-width: 768px) {
  .swipe-header-bar { padding: 12px 16px; }
  /* บีบการ์ดหัวหน้าเช็คชื่อ + จัดทุกอย่างแถวเดียว (เฉพาะมือถือ) */
  /* 16px 12px = padding ของ .app-content บนมือถือ ให้ตรงกับหัวจอหน้าอื่น */
  /* padding ซ้าย/ขวา 8px (เดิม 12) — ปุ่มชิดขอบการ์ดขึ้น ชื่อห้องได้พื้นที่กลางมากขึ้น */
  .swipe-class-card { margin: 16px 12px 0; padding: 9px 8px; gap: 8px; border-radius: var(--radius-sm); flex-wrap: nowrap; }
  .swipe-class-card > div:first-child { min-width: 0; flex: 1; gap: 8px !important; }
  .swipe-class-card h3 { font-size: 0.88rem !important; font-weight: 700 !important; overflow: hidden; justify-content: center; }
  /* จอมือถือ: ชื่อห้องกึ่งกลางในพื้นที่ว่างระหว่างปุ่มกลับกับวันที่ (ไม่ชนปุ่ม) */
  .swipe-class-card > div:first-child > div { flex: 1; min-width: 0; text-align: center; }
  .swipe-class-card .subtitle { font-size: 0.7rem; }
  .swipe-class-card .btn-back { padding: 5px 8px; font-size: 0.78rem; flex-shrink: 0; }
  .swipe-class-card .header-actions { flex-shrink: 0; gap: 6px !important; }
  .swipe-class-card .header-actions .btn { font-size: 0.7rem !important; padding: 5px 8px !important; }
  .swipe-class-card .header-actions .btn-text { font-size: 0.7rem !important; }
  .swipe-compact-header { padding: 6px 12px 7px; }

  /* บีบการ์ดหัวหน้ารายงาน (เฉพาะมือถือ) */
  .rep-detail-header-card { padding: 9px 8px !important; margin-bottom: 10px !important; }
  .rep-detail-header-card h3 { font-size: 0.88rem !important; font-weight: 700 !important; overflow: hidden; justify-content: center; }
  .rep-detail-header-card .btn { padding: 5px 10px !important; font-size: 0.75rem !important; }
  /* จอมือถือ: ชื่อห้องกึ่งกลางในพื้นที่ว่างระหว่างปุ่มกลับกับปุ่ม Excel (ให้ตรงกับหน้าเช็คชื่อ) */
  .rep-detail-header-card > div > div:first-child { flex: 1; min-width: 0; }
  .rep-detail-header-card > div > div:first-child > div { flex: 1; min-width: 0; text-align: center; }

  /* ซ่อนบางส่วนของข้อความเฉพาะมือถือ (ปี พ.ศ. / คำว่า Export) เพื่อย่อปุ่ม */
  .ck-date-year, .hide-mobile { display: none !important; }

  /* ===== แพทเทิร์นหัวจอเดียวกันทุกหน้า =====
     [ปุ่มกลับ ชิดซ้าย] · [ชื่อห้อง กินที่ว่างตรงกลาง จัดกึ่งกลาง] · [ปุ่ม ชิดขวา]
     ชื่อห้องหน้านักเรียนเคยหลุดสเปก (20px/800/ไม่จัดกลาง) เลยบังคับให้ตรงกับหน้าอื่น */
  #web-students-detail-title {
    flex: 1;
    min-width: 0;
    justify-content: center;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    overflow: hidden;
  }
  /* ปุ่มขวาของทุกหน้าเกาะขอบขวาเหมือนกัน (ความกว้างต่างกันได้ แต่แนวขวาต้องตรงกัน) */
  .swipe-class-card .header-actions,
  .students-hdr-actions,
  .rep-detail-header-card > div > div:last-child { margin-left: auto; flex-shrink: 0; }
  /* กฎ `> div:first-child > div { flex:1 }` ข้างบนเขียนไว้ให้ "ชื่อห้อง" กินที่ว่างตรงกลาง
     แต่กล่องปุ่มของหน้านักเรียนก็เป็น div ลูกคนเดียวกัน เลยโดนยืดตามไปด้วย (66 → 124px)
     ดันชื่อห้องเบี้ยวซ้ายโดยไม่มีปุ่มจริงอยู่ตรงนั้น — บังคับให้กล่องปุ่มกว้างเท่าเนื้อใน */
  .students-hdr-actions { flex: 0 0 auto !important; }

  /* ===== หัวจอมือถือทุกหน้าใช้สเปกเดียวกับหน้าเช็คชื่อ =====
     เดิม: เช็คชื่อ 52px / คะแนน 58 / การเข้าเรียน 58 / นักเรียน 182
     ปุ่มกลับก็คนละขนาด (61x32 vs 80x38) เลยบังคับให้ตรงกันทั้งหมด */
  .rep-detail-header-card .btn-back,
  .swipe-class-card .btn-back {
    padding: 5px 8px !important;
    font-size: 0.78rem !important;
    flex-shrink: 0;
  }
  /* ปุ่ม action มุมขวา (เครื่องมือ/ตั้งค่า/PDF/Excel/⋮) สูงเท่ากันหมด */
  .rep-detail-header-card .btn,
  .rep-detail-header-card .ck-hdr-btn,
  .swipe-class-card .header-actions .btn {
    height: 30px !important;
    min-height: 30px;
    padding: 0 10px !important;
    font-size: 0.72rem !important;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }
  .rep-detail-header-card .ck-hdr-btn { width: 30px !important; padding: 0 !important; justify-content: center; }
  /* ปุ่มไอคอนล้วนบนมือถือ (PDF/Excel) — บีบเป็นจัตุรัส 30px เท่าปุ่ม ⋮ ของหน้านักเรียน
     เพื่อให้ฝั่งขวาของทุกหน้ากว้างเท่ากัน ~75px ชื่อห้องจะได้อยู่ตำแหน่งเดียวกันทุกหน้า
     (เบี้ยวจากกึ่งกลาง = (ปุ่มขวา − ปุ่มกลับ) ÷ 2 — ปุ่มกลับกว้าง 61px คงที่ทุกหน้า) */
  .rep-detail-header-card .ck-hdr-icon { width: 30px !important; padding: 0 !important; justify-content: center; }
  .rep-detail-header-card .ck-hdr-icon i { margin: 0; }

  /* หน้านักเรียน: ตัวเลือกห้องซ้ำซ้อนแล้ว (เลือกห้องจาก popup / แถบแท็บ) → ซ่อนบนมือถือ
     ช่องค้นหาก็ซ่อนไว้ ให้หัวจอเป็นแถวเดียว 52px เท่าหน้าอื่น
     แตะปุ่มแว่นขยายมุมขวาบนถึงจะกางออกมา (ดู toggleStudentsSearch) */
  #web-student-class-filter { display: none !important; }
  .students-head-controls { display: none !important; width: 100%; margin-top: 8px; }
  .students-head-controls.is-open { display: flex !important; }
  .students-head-controls .form-control { height: 34px !important; padding: 0 12px !important; font-size: 0.8rem; }
  #students-search-btn.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary-light-border); }
}

/* Desktop: พื้นหลังเทา + แถบสรุปเป็นการ์ดมีกรอบ เหมือนหน้ารายงาน */
@media (min-width: 769px) {
  /* เลื่อนทั้งหน้าเหมือนหน้านักเรียน/คะแนน — ไม่มีแถบเลื่อนซ้อนในตาราง
     (มือถือคงเดิม: overflow hidden เพราะการ์ดปัดต้องล็อกความสูงไว้) */
  .swipe-overlay { background: var(--bg-app); overflow-y: auto; }
  .swipe-compact-header {
    /* ระยะบนคุมด้วย margin-bottom ของแถบแท็บตัวเดียว (กันซ้อนเป็น 32px) */
    margin: 0 24px;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    gap: 8px;
  }
  /* จอคอม: pills เตี้ยลง เลข+ป้ายอยู่แถวเดียว (เช่น "23 มา") */
  .swipe-compact-header .s-pill { flex-direction: row; align-items: baseline; justify-content: center; gap: 7px; padding: 6px 14px; }
  .swipe-compact-header .s-pill-num { font-size: 1.35rem; }
  .swipe-compact-header .s-pill-label { font-size: 0.9rem; }
}

/* Summary Pills Row */
.swipe-summary-pills {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}

.s-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  font-weight: 600;
  border: none;
  flex: 1;
  min-width: 0;
}

.s-pill-top { display: flex; align-items: center; justify-content: center; gap: 6px; }
.s-pill-top i { font-size: 0.95rem; opacity: 0.9; }
.s-pill-num { font-size: 0.86rem; font-weight: 800; line-height: 1; }
.s-pill-label { font-size: 0.72rem; font-weight: 700; opacity: 0.95; text-align: center; }

.s-pill.present { background: var(--color-present-bg); color: var(--color-present); }
.s-pill.late { background: var(--color-late-bg); color: var(--color-late-text); }
.s-pill.absent { background: var(--color-absent-bg); color: var(--color-absent); }
.s-pill.leave { background: var(--color-leave-bg); color: var(--color-leave); }

/* Progress (แถบความคืบหน้าเช็คชื่อ) */
.swipe-progress {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}
.swipe-progress-checked { flex: 1; text-align: center; font-size: 0.92rem; font-weight: 700; color: var(--text-main); white-space: nowrap; }
.swipe-progress-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.swipe-progress-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.swipe-mini-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  background: var(--bg-card); color: var(--text-muted);
  border: 1px solid var(--border-color); cursor: pointer;
  transition: var(--transition-normal); white-space: nowrap; flex-shrink: 0;
}
.swipe-mini-btn:hover { background: #f7f7f8; }
.swipe-mini-btn.primary { color: var(--primary); border-color: var(--primary-light-border); background: var(--primary-light); }
.swipe-mini-btn.primary:hover { background: var(--primary-light); filter: brightness(0.97); }
.swipe-mini-btn.danger { color: var(--color-absent); border-color: #ffc7c4; background: var(--color-absent-bg); }
.swipe-mini-btn.danger:hover { background: var(--color-absent-bg); filter: brightness(0.98); }

/* SWIPE CARD AREA */
.swipe-card-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 18px 12px;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.swipe-card-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  transform: translateY(-50%);
  touch-action: manipulation;
}
.swipe-card-nav.previous { left: 8px; }
.swipe-card-nav.next { right: 8px; }
.swipe-card-nav:disabled { opacity: .25; }

.swipe-card {
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  padding: 30px 24px 26px;
  width: min(340px, 88vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  user-select: none;
  touch-action: auto;
  transition: transform 0.15s ease, opacity 0.15s ease;
  position: relative;
  z-index: 2;
  cursor: default;
}

.swipe-card.status-saved { transform: scale(.97); box-shadow: 0 0 0 4px var(--primary-light); }
.swipe-card.swipe-edge-bump { animation: swipeEdgeBump .18s ease; }
@keyframes swipeEdgeBump { 50% { transform: scale(.985); } }

.swipe-complete-banner {
  margin: 0 12px 8px;
  padding: 8px 10px;
  border: 1px solid var(--primary-light-border);
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
}
.swipe-complete-banner[hidden] { display: none; }
.swipe-complete-banner button { border: 0; border-radius: 9px; padding: 7px 12px; background: var(--primary); color: #fff; font-weight: 700; }

/* ป้ายข้อความบอกทิศตอนลากการ์ด (guideline ตอนปัด) — ใช้ child element เลี่ยงชน ::after เดิม */
.swipe-hint-badge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  padding: 7px 16px;
  border-radius: 24px;
  font-size: 1.05rem;
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  z-index: 5;
}
.swipe-hint-badge.right {
  right: 14px;
  background: var(--color-absent-bg);
  color: var(--color-absent);
  border: 2px solid var(--color-absent);
}
.swipe-hint-badge.left {
  left: 14px;
  background: var(--color-leave-bg);
  color: var(--color-leave);
  border: 2px solid var(--color-leave);
}
.swipe-card.hint-right .swipe-hint-badge.right { opacity: 1; transform: translateY(-50%) scale(1); }
.swipe-card.hint-left .swipe-hint-badge.left { opacity: 1; transform: translateY(-50%) scale(1); }

.swipe-card.swipe-out-right {
  transition: transform 0.35s ease, opacity 0.35s ease;
  transform: translateX(150%) rotate(15deg);
  opacity: 0;
}
.swipe-card.swipe-out-left {
  transition: transform 0.35s ease, opacity 0.35s ease;
  transform: translateX(-150%) rotate(-15deg);
  opacity: 0;
}
.swipe-card.swipe-out-up {
  transition: transform 0.35s ease, opacity 0.35s ease;
  transform: translateY(-120%) scale(0.9);
  opacity: 0;
}
.swipe-card.swipe-in {
  animation: cardFadeIn 0.2s ease;
}

@keyframes cardFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.swipe-card-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.swipe-card-no, .swipe-card-code {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}
.swipe-card-edit {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--bg-app);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.swipe-card-edit:hover, .swipe-card-edit:active {
  background: var(--primary-light);
  color: var(--primary);
}
.swipe-card-photo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--bg-app);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.swipe-card-photo:hover, .swipe-card-photo:active {
  background: var(--primary-light);
  color: var(--primary);
}
.swipe-card-divider {
  width: 100%;
  height: 1px;
  background: var(--border-color);
  margin: 12px 0 20px;
}

.swipe-card-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #e8f4fc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #3d92d8;
  margin-bottom: 8px;
  border: 2px solid #d6eaf8;
  padding: 4px;
  text-align: center;
  line-height: 1.1;
  overflow: hidden;
}
.swipe-card-avatar.has-photo { padding: 0; }
.swipe-card-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.swipe-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}

.swipe-card-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.sc-stat {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
}

.sc-stat.present { background: var(--color-present-bg); color: var(--color-present); }
.sc-stat.late { background: var(--color-late-bg); color: var(--color-late-text); }
.sc-stat.absent { background: var(--color-absent-bg); color: var(--color-absent); }

/* Swipe status indicator overlay */
.swipe-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.swipe-card.hint-right::after { background: rgba(255,59,48,0.08); border: 3px solid var(--color-absent); opacity: 1; }
.swipe-card.hint-left::after { background: rgba(0,122,255,0.08); border: 3px solid var(--color-leave); opacity: 1; }

/* Done state */
.swipe-done-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: fadeIn 0.4s ease;
}

.swipe-edit-done-btn {
  display: none;
}

.swipe-mobile-edit-sheet {
  display: none;
}

.swipe-photo-source-sheet {
  display: none;
}

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

/* ตัวเลื่อนรายชื่อซ้อนบนเส้นคั่นเหนือปุ่มสถานะ จึงไม่กินพื้นที่เป็นแถวใหม่ */
.swipe-student-scrubber {
  position: relative;
  z-index: 6;
  height: 0;
  margin: 0 28px;
}
.swipe-student-scrubber[hidden] { display: none; }
.swipe-student-scrubber input {
  --swipe-scrub-progress: 0%;
  position: absolute;
  top: -9px;
  left: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-x;
}
.swipe-student-scrubber input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--primary) 0 var(--swipe-scrub-progress), var(--border-color) var(--swipe-scrub-progress) 100%);
}
.swipe-student-scrubber input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7.5px;
  border: 3px solid var(--primary);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(15,23,42,.18);
  appearance: none;
  -webkit-appearance: none;
}
.swipe-student-scrubber input::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--border-color);
}
.swipe-student-scrubber input::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
}
.swipe-student-scrubber input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--primary);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(15,23,42,.18);
}
.swipe-student-scrubber input:focus-visible { outline: none; }
.swipe-student-scrubber input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--primary-light-border); }

/* ACTION BUTTONS */
.swipe-action-buttons {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-color);
}

.swipe-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  transition: var(--transition-normal);
}

.swipe-btn:active { transform: scale(0.9); }
.swipe-btn.active i { box-shadow: 0 0 0 4px currentColor; transform: scale(1.04); }
.swipe-btn.active span { color: var(--text-main); }

.swipe-btn i {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  border: 2px solid;
  transition: var(--transition-normal);
}

.swipe-btn span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
}

.swipe-btn.present i { color: var(--color-present); border-color: var(--color-present); background: var(--color-present-bg); }
.swipe-btn.absent i { color: var(--color-absent); border-color: var(--color-absent); background: var(--color-absent-bg); }
.swipe-btn.late i { color: #e6a800; border-color: var(--color-late); background: var(--color-late-bg); }
.swipe-btn.leave i { color: var(--color-leave); border-color: var(--color-leave); background: var(--color-leave-bg); }
.swipe-btn.undo i { color: #5b6270; border-color: #b8bcc4; background: #e4e5e9; }
.swipe-btn.undo span { color: #5b6270; }

@media (max-width: 768px) {
  .swipe-edit-done-btn {
    margin-top: 18px;
    min-height: 44px;
    padding: 0 20px;
    border: 1.5px solid var(--primary-light-border);
    border-radius: var(--radius-btn);
    background: var(--primary-light);
    color: var(--primary);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
  }

  .swipe-mobile-edit-sheet {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: flex-end;
    justify-content: center;
  }

  .swipe-photo-source-sheet {
    position: absolute;
    inset: 0;
    z-index: 21;
    display: none;
    align-items: flex-end;
    justify-content: center;
  }
  .swipe-photo-source-sheet.show { display: flex; }
  .swipe-photo-source-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.34);
  }
  .swipe-photo-source-panel {
    position: relative;
    width: 100%;
    background: var(--bg-card);
    border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    animation: swipeSheetUp 0.2s ease;
  }
  .swipe-photo-source-handle {
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-color);
    margin: 2px auto 10px;
  }
  .swipe-photo-source-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px 12px;
    border-bottom: 1px solid var(--border-color);
  }
  .swipe-photo-source-head strong { color: var(--text-main); font-size: 1.02rem; }
  .swipe-photo-source-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; }
  .swipe-photo-source-actions button {
    min-height: 64px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-soft);
    color: var(--text-main);
    font: inherit;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    touch-action: manipulation;
  }
.swipe-photo-source-actions i { color: var(--primary); font-size: 1.25rem; }

.student-detail-photo-source-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  align-items: flex-end;
  justify-content: center;
}
.student-detail-photo-source-sheet.show { display: flex; }
.student-detail-photo-source-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.34); }
.student-detail-photo-source-panel {
  position: relative;
  width: min(100%, 480px);
  background: var(--bg-card);
  border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  animation: swipeSheetUp 0.2s ease;
}
.student-detail-photo-source-handle { width: 46px; height: 5px; border-radius: 999px; background: var(--border-color); margin: 2px auto 10px; }
.student-detail-photo-source-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 12px; border-bottom: 1px solid var(--border-color); }
.student-detail-photo-source-head strong { color: var(--text-main); font-size: 1.02rem; }
.student-detail-photo-source-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; }
.student-detail-photo-source-actions button {
  min-height: 64px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--text-main);
  font: inherit;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: manipulation;
}
.student-detail-photo-source-actions i { color: var(--primary); font-size: 1.25rem; }

  .swipe-mobile-edit-sheet.show {
    display: flex;
  }
  .swipe-mobile-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.34);
  }
  .swipe-mobile-edit-panel {
    position: relative;
    width: 100%;
    max-height: min(78vh, 720px);
    background: var(--bg-card);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 48px rgba(15,23,42,0.18);
    padding: 8px 14px 18px;
    display: flex;
    flex-direction: column;
    animation: swipeSheetUp 0.2s ease;
  }
  .swipe-mobile-edit-handle {
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-color);
    margin: 2px auto 10px;
  }
  .swipe-mobile-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px 12px;
    border-bottom: 1px solid var(--border-color);
  }
  .swipe-mobile-edit-head strong {
    display: block;
    color: var(--text-main);
    font-size: 1.02rem;
    font-weight: 700;
  }
  .swipe-mobile-edit-head span {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    margin-top: 2px;
  }
  .swipe-mobile-edit-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .swipe-mobile-edit-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .swipe-edit-student-row {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    padding: 12px;
  }
  .swipe-edit-student-row.unchecked {
    border-style: dashed;
    background: var(--bg-light);
  }
  .swipe-edit-student-main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
  }
  .swipe-edit-no {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
  }
  .swipe-edit-student-main strong {
    display: block;
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .swipe-edit-student-main small {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 2px;
  }
  .swipe-edit-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
  .swipe-edit-status-btn {
    min-width: 0;
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }
  .swipe-edit-status-btn i {
    font-size: 0.9rem;
  }
  .swipe-edit-status-btn.present.active { border-color: var(--color-present); background: var(--color-present-bg); color: var(--color-present); }
  .swipe-edit-status-btn.late.active { border-color: var(--color-late); background: var(--color-late-bg); color: var(--color-late-text); }
  .swipe-edit-status-btn.absent.active { border-color: var(--color-absent); background: var(--color-absent-bg); color: var(--color-absent); }
  .swipe-edit-status-btn.leave.active { border-color: var(--color-leave); background: var(--color-leave-bg); color: var(--color-leave); }
}

/* ตัวเลือกแบบ bottom sheet ใช้เฉพาะมือถือ; desktop เปิด file picker โดยตรง */
@media (min-width: 769px) {
  .student-detail-photo-source-sheet { display: none !important; }
}

/* ========================================== */
/* MOBILE BOTTOM NAV                           */
/* ========================================== */
.mobile-bottom-nav {
  display: none;
}

/* ========================================== */
/* ========================================== */
/* ===  DESKTOP ATTENDANCE GRID ============= */
/* ========================================== */
/* หัวตารางในหน้าเช็คชื่อ: บีบช่องว่างด้านบนลง (46px → 16px)
   scope ไว้ที่ #swipe-desktop-view เพราะคลาสนี้ใช้ร่วมกับหน้านักเรียน */
#swipe-desktop-view > .card { padding-top: 6px; }
#swipe-desktop-view .d-student-header-row { padding: 10px 20px 12px; }

.d-student-header-row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  margin: 0 16px 8px 16px;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-bottom: 2px solid var(--border-color);
}

.desktop-student-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.d-student-row {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  transition: var(--transition-normal);
}

.d-student-row:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  border-color: #d1d1d6;
}

.d-col-no { width: 50px; text-align: center; font-weight: 700; color: var(--text-muted); font-size: 0.95rem; }
/* วงกลมเลขที่สี avatar (ชุดเดียวกับมือถือ) — เฉพาะแถวข้อมูล ไม่โดนหัวตาราง (หัวไม่มี .d-no-badge) */
.d-student-row .d-col-no { display: flex; align-items: center; justify-content: center; }
.d-no-badge {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--av-bg, var(--bg-light)); color: var(--av-fg, var(--text-muted));
  font-weight: 700; font-size: 0.9rem;
}
.d-col-code { width: 90px; text-align: center; font-weight: 600; color: var(--text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.d-code-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: var(--transition-normal);
}
.d-code-input::placeholder { color: #c7c7cc; font-weight: 400; }
.d-code-input:hover { border-color: var(--border-color); background: #fff; }
.d-code-input:focus { border-color: var(--primary); background: #fff; color: var(--text-main); outline: none; box-shadow: 0 0 0 3px var(--primary-light); }
.d-col-name { flex: 2; font-weight: 700; font-size: 0.95rem; color: var(--text-main); }
.d-col-status { flex: 3; display: flex; justify-content: center; gap: 8px; }
.d-col-stats { flex: 2.4; text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--primary); display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;}
.d-col-note { flex: 1; }
.d-col-manage { width: 84px; display: flex; justify-content: center; gap: 6px; }

/* ========================================== */
/* STUDENT ROSTER CARDS                        */
/* ========================================== */
.student-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.student-roster-card {
  position: relative;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition-normal);
}

.student-roster-card:hover,
.student-roster-card:focus-visible {
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  outline: none;
}

.student-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.student-card-no {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--av-bg, var(--primary-light));
  color: var(--av-fg, var(--primary));
  font-size: 0.76rem;
  font-weight: 700;
}

.student-card-actions {
  display: flex;
  gap: 6px;
}

.student-card-icon-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-normal);
}

.student-card-icon-btn:hover {
  border-color: var(--primary-light-border);
  background: var(--primary-light);
  color: var(--primary);
}

.student-card-icon-btn.danger:hover {
  border-color: #ffc7c4;
  background: var(--color-absent-bg);
  color: var(--color-absent);
}

.student-card-main {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 0 3px;
}

.student-card-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 19px;
  background: var(--av-bg, var(--primary-light));
  color: var(--av-fg, var(--primary));
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
}

.student-card-avatar-text {
  max-width: 54px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.student-card-avatar-text.is-small {
  font-size: 0.86rem;
}

.student-card-avatar-text.is-tiny {
  font-size: 0.74rem;
}

.student-card-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.student-card-name {
  min-width: 0;
  flex: 1;
}

.student-card-name strong {
  display: block;
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.student-card-name-line,
.student-card-surname-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-card-name-line {
  color: var(--text-main);
  font-weight: 700;
}

.student-card-surname-line {
  color: var(--text-muted);
  font-weight: 600;
}

.student-card-name > span {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 500;
}

.student-card-empty {
  grid-column: 1 / -1;
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 30px;
  border: 1px dashed var(--border-color);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text-muted);
  text-align: center;
}

.student-card-empty i {
  color: var(--primary-light-border);
  font-size: 2.4rem;
}

.student-card-empty strong {
  color: var(--text-main);
  font-size: 0.95rem;
}

.student-card-empty span {
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .student-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .student-roster-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: var(--radius-sm);
    box-shadow: none;
    text-align: center;
  }

  .student-roster-card:active {
    transform: scale(0.97);
  }

  .student-card-top,
  .student-card-main {
    display: contents;
  }

  .student-card-top {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .student-card-actions {
    display: none;
  }

  .student-card-no {
    order: 2;
    min-height: auto;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
  }

  .student-card-avatar {
    order: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
  }

  .student-card-avatar-text {
    max-width: 44px;
    line-height: 1.12;
  }

  .student-card-avatar-text.is-small {
    font-size: 0.78rem;
  }

  .student-card-avatar-text.is-tiny {
    font-size: 0.66rem;
  }

  .student-card-name {
    order: 3;
    width: 100%;
  }

  .student-card-name strong {
    min-height: 0;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.3;
  }

  .student-card-name-line,
  .student-card-surname-line {
    display: inline;
    overflow: visible;
    white-space: normal;
  }

  .student-card-surname-line::before {
    content: " ";
  }

  .student-card-name > span {
    display: none;
  }
}

.d-manage-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-btn);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-normal);
}
.d-manage-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary-light-border); }
.d-manage-btn.danger:hover { background: var(--color-absent-bg); color: var(--color-absent); border-color: #ffc7c4; }

.d-status-btn {
  border: 1px solid var(--border-color);
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-normal);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 70px;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
}

.d-status-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16,24,40,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
}

/* hover: พื้นหลังสีตามสถานะ (คงเงา/เด้งจาก :hover ด้านบนไว้) */
.d-status-btn.type-present:hover { background: var(--color-present-bg); border-color: var(--color-present); color: var(--color-present); }
.d-status-btn.type-absent:hover  { background: var(--color-absent-bg);  border-color: var(--color-absent);  color: var(--color-absent); }
.d-status-btn.type-leave:hover   { background: var(--color-leave-bg);   border-color: var(--color-leave);   color: var(--color-leave); }
.d-status-btn.type-late:hover    { background: var(--color-late-bg);    border-color: var(--color-late);    color: var(--color-late-text); }

.d-status-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(16,24,40,0.12);
}

.d-status-btn.present { border-color: var(--color-present); background: var(--color-present-bg); color: var(--color-present); box-shadow: 0 2px 6px rgba(34,160,90,0.22), inset 0 1px 0 rgba(255,255,255,0.5); }
.d-status-btn.absent { border-color: var(--color-absent); background: var(--color-absent-bg); color: var(--color-absent); box-shadow: 0 2px 6px rgba(220,60,60,0.2), inset 0 1px 0 rgba(255,255,255,0.5); }
.d-status-btn.leave { border-color: var(--color-leave); background: var(--color-leave-bg); color: var(--color-leave); box-shadow: 0 2px 6px rgba(60,110,220,0.2), inset 0 1px 0 rgba(255,255,255,0.5); }
.d-status-btn.late { border-color: var(--color-late); background: var(--color-late-bg); color: var(--color-late-text); box-shadow: 0 2px 6px rgba(210,160,40,0.22), inset 0 1px 0 rgba(255,255,255,0.5); }

.swipe-mini-btn.qr {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

.qr-attendance-sheet {
  width: 680px;
  max-width: 96vw;
}

.qr-attendance-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 16px;
}

.qr-attendance-share,
.qr-attendance-live {
  min-width: 0;
}

.qr-attendance-share {
  text-align: center;
}

.qr-attendance-box {
  width: 220px;
  height: 220px;
  margin: 0 auto 10px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.qr-attendance-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.qr-attendance-code {
  color: var(--primary);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 4px;
}

.qr-attendance-link {
  display: block;
  max-width: 230px;
  margin: 7px auto 0;
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.qr-attendance-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}

.qr-attendance-status {
  padding: 11px 13px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-light);
  color: var(--text-muted);
  font-size: .84rem;
  font-weight: 800;
}

.qr-attendance-status.success {
  border-color: var(--color-present);
  background: var(--color-present-bg);
  color: var(--color-present);
}

.qr-attendance-status.warning {
  border-color: #F6C77A;
  background: #FEF3E2;
  color: #92610A;
}

.qr-attendance-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.qr-attendance-mini span {
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--bg-light);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 800;
}

.qr-attendance-mini b {
  display: block;
  color: var(--text-main);
  font-size: 1.35rem;
  line-height: 1.1;
}

.qr-attendance-list {
  display: grid;
  gap: 8px;
  max-height: 270px;
  overflow: auto;
}

.qr-attendance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
}

.qr-attendance-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .88rem;
}

.qr-attendance-row span {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 800;
}

.qr-attendance-empty {
  min-height: 140px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-muted);
  font-weight: 800;
}

@media (max-width: 680px) {
  .qr-attendance-grid {
    grid-template-columns: 1fr;
  }

  .qr-attendance-box {
    width: 190px;
    height: 190px;
  }
}


/* ===== แถบเตือนเช็คชื่อผิดวัน / คาบเสริม ===== */
.swipe-schedule-warning {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 12px 0;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  line-height: 1.25;
  background: #FEF3E2;
  border: 1px solid #F6C77A;
  color: #92610A;
}
.swipe-schedule-warning > i { font-size: 0.92rem; flex-shrink: 0; }
.swipe-schedule-warning > span { flex: 1; min-width: 0; }
.swipe-schedule-warning > button {
  flex-shrink: 0;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.swipe-schedule-warning > button:hover { background: rgba(146,97,10,0.1); }
.swipe-schedule-warning > button:active { transform: translateY(1px); }

.swipe-schedule-warning.is-extra {
  background: var(--color-present-bg, #E8F5EC);
  border-color: var(--color-present, #22A05A);
  color: var(--color-present, #1B7C45);
}
.swipe-schedule-warning.is-extra > button:hover { background: rgba(34,160,90,0.12); }

@media (min-width: 769px) {
  .swipe-schedule-warning { margin: 16px 24px 0; }
}