/* รอบ 62c: ปฏิทินโรงเรียน (/school/calendar) — prefix scal-
   ใช้คู่กับ fit.css: .fit-split ซ้าย = ตารางเดือน, ขวา = รายการในเดือน (แท็บเล็ต/มือถือ: รายการอยู่ใต้ตาราง)
   ใช้เฉพาะตัวแปรสีใน :root (โหมดมืดทับให้เองใน dark.css; --warn-text/--info-* มีเฉพาะโหมดมืด จึงใส่ค่าสำรอง)
   มือถือ 390px: ตารางย่อเหลือเลขวัน + จุดสี · ห้ามเลื่อนแนวนอน */

@media screen {
  /* ---------- หัว / แถบเดือน ---------- */
  .scal-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
  .scal-mnav { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .scal-mbtn { min-width: 38px; padding-left: 8px; padding-right: 8px; font-size: 1.1rem; line-height: 1; }
  .scal-mlabel { min-width: 140px; text-align: center; font-size: 1.02rem; white-space: nowrap; }
  .scal-filter { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: .86rem; color: var(--muted); }
  .scal-filter select { min-width: 0; max-width: 220px; }
  .scal-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; font-size: .8rem; color: var(--muted); min-width: 0; }
  .scal-leg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

  /* สีตามประเภท */
  .scal-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--muted); }
  .scal-dot.k-holiday { background: var(--danger); }
  .scal-dot.k-break { background: var(--warn-text, #B26A00); }
  .scal-dot.k-exam { background: var(--info-text, #2563A8); }
  .scal-dot.k-event { background: var(--ok); }
  .scal-dot.off { background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); border-radius: 3px; }

  .scal-chip.k-holiday, .scal-badge.k-holiday { background: var(--danger-soft); color: var(--danger); }
  .scal-chip.k-break, .scal-badge.k-break { background: var(--warn-soft); color: var(--warn-text, #7a5300); }
  .scal-chip.k-exam, .scal-badge.k-exam { background: var(--info-soft, #E7F0FB); color: var(--info-text, #1F5A96); }
  .scal-chip.k-event, .scal-badge.k-event { background: var(--ok-soft); color: var(--ok); }

  /* ---------- ตารางเดือน ---------- */
  .scal-cal { padding: 10px; }
  .scal-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto repeat(var(--scal-weeks, 6), minmax(86px, auto));
    gap: 4px; min-width: 0;
  }
  .scal-wd { padding: 2px 4px 4px; text-align: center; font-size: .8rem; font-weight: 700; color: var(--muted); }
  .scal-wd.off { color: var(--danger); opacity: .75; }
  .scal-cell {
    display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 0; overflow: hidden;
    padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  }
  .scal-cell.can { cursor: pointer; }
  .scal-cell.can:hover { border-color: var(--brand); }
  .scal-cell.off { background: var(--chip); }
  .scal-cell.out { opacity: .45; }
  .scal-cell.today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
  .scal-dnum { align-self: flex-start; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .84rem; font-weight: 600; color: var(--ink); }
  .scal-cell.off .scal-dnum { color: var(--muted); }
  .scal-cell.today .scal-dnum { background: var(--brand); color: var(--brand-ink); }
  .scal-dots { display: none; }
  .scal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .scal-chip {
    display: block; width: 100%; min-width: 0; padding: 1px 6px; border: 0; border-radius: 5px; text-align: left;
    font: inherit; font-size: .74rem; font-weight: 600; line-height: 1.45; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .scal-chip:hover { filter: brightness(.96); box-shadow: inset 0 0 0 1px currentColor; }
  .scal-more { font-size: .72rem; color: var(--muted); padding-left: 4px; }

  /* ---------- รายการในเดือน ---------- */
  .scal-empty { padding: 24px 12px; text-align: center; color: var(--muted); }
  .scal-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
  .scal-item {
    display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; text-align: left;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
  }
  .scal-item:hover { border-color: var(--brand); }
  .scal-item-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .scal-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
  .scal-tag {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap;
    background: var(--chip); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line);
  }
  .scal-item-title { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
  .scal-item-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .84rem; color: var(--muted); min-width: 0; }
  .scal-item-br { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- ป๊อปอัป ---------- */
  .scal-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .scal-check { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink); cursor: pointer; }
  .scal-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); flex: none; }
  .scal-hint { margin: -6px 0 0; }
  .scal-actions { flex-wrap: wrap; }
  .scal-gap { flex: 1 1 auto; }
  .scal-del { color: var(--danger); }
  .scal-view-title { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
  .scal-view p { margin: 0; }
  .scal-note { white-space: pre-line; overflow-wrap: anywhere; color: var(--ink); }
  .scal-dtoggles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .scal-dtog {
    min-height: 44px; padding: 0 4px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer;
  }
  .scal-dtog.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

  /* ---------- แถบในหน้าเช็กชื่อ: วันไม่มีเรียน ---------- */
  .scal-dayoff {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm);
    background: var(--warn-soft); color: var(--warn-text, #7a5300); font-size: .88rem; font-weight: 600; min-width: 0;
  }
  .scal-dayoff svg { flex: none; }
  .scal-dayoff span { min-width: 0; overflow-wrap: anywhere; }

  /* ---------- แจ้งเตือนลอย ---------- */
  .scal-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px));
    padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--ink); color: var(--surface);
    box-shadow: var(--shadow-lg); font-size: .92rem; font-weight: 600; animation: scal-toast-in .2s ease-out;
  }
  .scal-toast-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: rgba(127,127,127,.18); color: inherit; cursor: pointer; }
  @keyframes scal-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
}

/* จอคอม: ตารางยืดเต็มความสูงของกรอบ */
@media screen and (min-width: 1025px) {
  .scal-cal { overflow: hidden; }
  .scal-grid { flex: 1 1 auto; min-height: 0; grid-template-rows: auto repeat(var(--scal-weeks, 6), minmax(0, 1fr)); }
}

@media screen and (max-width: 760px) {
  .scal-page .fit-tools { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .scal-page .fit-tools > .btn { flex: 1 1 auto; }
  .scal-bar { gap: 8px; }
  .scal-mnav { flex: 1 1 100%; }
  .scal-mlabel { flex: 1 1 auto; min-width: 0; }
  .scal-filter { flex: 1 1 100%; }
  .scal-filter select { max-width: none; flex: 1 1 auto; }
  .scal-legend { margin-left: 0; gap: 4px 10px; }

  .scal-cal { padding: 6px; }
  .scal-grid { gap: 2px; grid-template-rows: auto repeat(var(--scal-weeks, 6), minmax(46px, auto)); }
  .scal-wd { font-size: .72rem; padding: 0 0 2px; }
  .scal-cell { align-items: center; gap: 2px; padding: 3px 1px; border-radius: 6px; }
  .scal-dnum { align-self: center; min-width: 22px; height: 22px; font-size: .8rem; }
  .scal-chips { display: none; }
  .scal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
  .scal-dots .scal-dot { width: 6px; height: 6px; }

  .scal-fgrid { grid-template-columns: minmax(0, 1fr); }
  .scal-dtoggles { gap: 4px; }
  .scal-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}