/* ==========================================================================
   ระบบเก็บผลงานครู — สไตล์เฉพาะที่ DaisyUI ไม่ได้ให้มา
   ธีม garden: ชมพูเป็นสีหลัก เขียวใบไม้เป็นสีรอง มุมกลมมน
   ========================================================================== */

[data-theme="garden"] {
  --rounded-box: 1.25rem;
  --rounded-btn: 9999px;
  --rounded-badge: 9999px;
  --border-btn: 1.5px;
  --animation-btn: 0.22s;
}

:root {
  --ink:        #241f20;
  --ink-soft:   #6d6264;
  --page:       #f4f1f1;
  --card:       #ffffff;
  --hairline:   #e6e0e1;
  --pink:       #e96d7b;
  --pink-deep:  #c94d5c;
  --leaf:       #5c7f67;
  --sand:       #d9a05b;
  --clay:       #c1654a;
  --sky:        #6f97ad;

  /* เงามีทิศทาง ไม่ใช่เงาเบลอรอบตัว */
  --lift-1: 0 2px 6px -2px rgba(56, 34, 38, .10);
  --lift-2: 0 8px 24px -8px rgba(56, 34, 38, .18);
  --lift-3: 0 16px 40px -12px rgba(56, 34, 38, .26);
}

body {
  font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--page);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.font-display, .btn, .badge, .stat-num, .tab {
  font-family: 'Mitr', 'Sarabun', sans-serif;
  font-weight: 500;
}
h1 { line-height: 1.15; letter-spacing: -0.01em; }
h2, h3 { line-height: 1.3; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  vertical-align: -0.18em;
  user-select: none;
}

/* ---------- แถบเมนูบน ---------- */

.app-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, #fff 0%, #fdfbfb 100%);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--lift-1);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 13px;
  background: var(--pink);
  color: #fff;
  font-size: 21px;
  box-shadow: var(--lift-2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-family: 'Mitr', sans-serif; font-weight: 600; font-size: 1.02rem; }
.brand-text small { font-size: .68rem; color: var(--ink-soft); letter-spacing: .02em; }
@media (max-width: 400px) { .brand-text small { display: none; } }

.nav-links { display: none; gap: 4px; margin-left: 18px; }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .9rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}
.nav-link .material-symbols-outlined { font-size: 19px; }
.nav-link:hover { background: #f6eef0; color: var(--pink-deep); }
.nav-link.is-active { background: var(--pink); color: #fff; box-shadow: var(--lift-2); }

.nav-burger {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 140ms ease;
}
.nav-burger:hover { background: #f6eef0; }

/* ---------- ชิพสถานะโหมดแก้ไข (ตัวชูโรงของหน้า) ---------- */

.ig-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Mitr', sans-serif;
  font-size: .76rem;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.ig-pill .material-symbols-outlined { font-size: 17px; }
.ig-pill-on {
  background: #fdeef0;
  color: var(--pink-deep);
  border-color: #f6cdd3;
  box-shadow: 0 0 0 0 rgba(233, 109, 123, .5);
  animation: pill-breathe 3.2s ease-in-out infinite;
}
.ig-pill-on:hover { background: #fbe1e5; }
.ig-pill-off { background: #eef1ee; color: var(--leaf); border-color: #d8e0d9; }
.ig-pill-off:hover { background: #e6ebe6; }

@keyframes pill-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 109, 123, .30); }
  50%      { box-shadow: 0 0 0 5px rgba(233, 109, 123, 0); }
}

/* ---------- การ์ด ---------- */

.card-soft {
  background: var(--card);
  border-radius: var(--rounded-box);
  box-shadow: var(--lift-1);
  border: 1px solid var(--hairline);
}
.card-pad { padding: 20px; }
@media (min-width: 768px) { .card-pad { padding: 26px; } }

.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.section-title .material-symbols-outlined { font-size: 21px; color: var(--pink); }

/* ---------- ชิพประเภทผลงาน ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Mitr', sans-serif;
  font-size: .74rem;
  padding: 3px 11px;
  border-radius: 999px;
  background: #f2eef0;
  color: #6a5257;
  white-space: nowrap;
  transition: transform 160ms cubic-bezier(.22, 1.2, .36, 1), box-shadow 160ms ease;
}
a.chip:hover, .chip-hover:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.chip-count { background: var(--leaf); color: #fff; }
.chip-doc   { background: var(--sand); color: #4a3416; }

/* ---------- ลิงก์ในข้อความ (แทนที่ URL ยาว ๆ ที่ล้นกรอบ) ---------- */

.link-chip {
  display: inline-flex; max-width: 100%; align-items: center; gap: 5px;
  font-family: 'Mitr', sans-serif;
  font-size: .82rem;
  padding: 4px 12px 4px 10px;
  margin: 2px 0;
  border-radius: 999px;
  background: #eef4ee;
  color: var(--leaf);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  transition: background-color 140ms ease, transform 140ms ease;
}
.link-chip:hover { background: var(--leaf); color: #fff; transform: translateY(-1px); }
.link-chip .material-symbols-outlined { font-size: 16px; flex: none; }

/* ---------- ตาราง ---------- */

.list-row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 4px 14px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hairline);
  transition: background-color 140ms ease;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: #faf6f7; }
.list-date {
  font-family: 'Mitr', sans-serif;
  font-size: .78rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.25;
}
.list-date b { display: block; font-size: 1.32rem; color: var(--pink-deep); font-weight: 600; }
.list-title { font-weight: 500; color: var(--ink); text-decoration: none; }
.list-title:hover { color: var(--pink-deep); }
.list-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; }
.list-actions { display: flex; gap: 6px; }
@media (max-width: 640px) {
  .list-row { grid-template-columns: 58px 1fr; }
  .list-actions { grid-column: 2; justify-content: flex-end; margin-top: 6px; }
  .list-date b { font-size: 1.15rem; }
}

.icon-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn .material-symbols-outlined { font-size: 19px; }
.icon-btn-edit:hover   { background: #f6eef0; color: var(--pink-deep); }
.icon-btn-view:hover   { background: #eef1ee; color: var(--leaf); }
.icon-btn-danger:hover { background: #fdeceb; color: #b8402f; }

/* ---------- ปุ่ม ---------- */

.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: 'Mitr', sans-serif; font-weight: 500;
  padding: 11px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.btn-pill:hover:not(:disabled) { filter: brightness(.95); transform: translateY(-1px); }
.btn-pill:active:not(:disabled) { transform: translateY(0); }
.btn-pill:disabled { opacity: .65; cursor: progress; }
.btn-pink  { background: var(--pink); color: #fff; box-shadow: var(--lift-2); }
.btn-leaf  { background: var(--leaf); color: #fff; box-shadow: var(--lift-2); }
.btn-ghost-soft { background: #fff; color: var(--ink-soft); border: 1.5px solid var(--hairline); }
.btn-pill.is-done { animation: btn-pop 420ms cubic-bezier(.22, 1.4, .36, 1); }

@keyframes btn-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---------- ฟอร์ม ---------- */

.field { margin-bottom: 18px; }
.field > label,
.field-label {
  display: block;
  font-family: 'Mitr', sans-serif;
  font-size: .85rem;
  margin-bottom: 6px;
  color: var(--ink);
}
.field-label .req { color: var(--pink-deep); }
.field-hint { font-size: .78rem; color: var(--ink-soft); margin-top: 5px; }

.input-soft {
  width: 100%;
  padding: 12px 15px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input-soft:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233, 109, 123, .16);
}
textarea.input-soft { line-height: 1.7; resize: vertical; }
select.input-soft { appearance: none; background-image: none; }

/* ---------- แถบบันทึกติดล่างจอบนมือถือ ---------- */

.sticky-save {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin: 22px -16px -24px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 768px) {
  .sticky-save { position: static; margin: 22px 0 0; padding: 0; background: none; border: 0; backdrop-filter: none; }
}

/* ---------- ปุ่มลอยเพิ่มผลงานบนมือถือ ---------- */

.fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 35;
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: 20px;
  background: var(--pink);
  color: #fff;
  box-shadow: var(--lift-3);
  text-decoration: none;
  transition: transform 180ms cubic-bezier(.22, 1.2, .36, 1);
}
.fab:hover { transform: translateY(-3px) rotate(-4deg); }
.fab .material-symbols-outlined { font-size: 28px; }
@media (min-width: 1024px) { .fab { display: none; } }

/* ---------- รูปตัวอย่างในฟอร์ม ---------- */

.thumb { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--lift-1); aspect-ratio: 1; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x {
  position: absolute; top: 5px; right: 5px;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border: 0; border-radius: 9px;
  background: rgba(36, 31, 32, .72);
  color: #fff;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.thumb-x:hover { background: #b8402f; }
.thumb-x .material-symbols-outlined { font-size: 17px; }

/* ---------- สถิติหน้าภาพรวม ---------- */

.stat-card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-box);
  padding: 18px 20px;
  box-shadow: var(--lift-1);
}
.stat-card::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--accent-bar, var(--pink));
}
.stat-label { font-size: .8rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.stat-label .material-symbols-outlined { font-size: 18px; color: var(--accent-bar, var(--pink)); }
.stat-num {
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-top: 4px;
}
.stat-sub { font-size: .76rem; color: var(--ink-soft); }

/* แถบภาคเรียนบนหน้าภาพรวม — ตัวชูโรงของหน้านี้ */
.term-strip { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #eae4e5; }
.term-strip span { display: block; transition: width 700ms cubic-bezier(.22, 1, .36, 1); }
.term-1 { background: var(--pink); }
.term-2 { background: var(--leaf); }
.term-3 { background: var(--sand); }

.legend-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }

/* ---------- toast ---------- */

.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(420px, calc(100vw - 32px));
}
.toast-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 12px 17px;
  border-radius: 15px;
  background: #2f2729;
  color: #fff;
  font-size: .92rem;
  box-shadow: var(--lift-3);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transition: opacity 200ms ease, transform 320ms cubic-bezier(.22, 1.3, .36, 1);
}
.toast-item.is-in { opacity: 1; transform: none; }
.toast-item.is-out { opacity: 0; transform: translateY(8px) scale(.98); }
.toast-ok    { background: #3f6b52; }
.toast-error { background: #a63a2c; }
.toast-item .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }

/* ---------- กล่องยืนยัน / ถามรหัส ---------- */

.ig-backdrop {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(36, 31, 32, .5);
  backdrop-filter: blur(2px);
  z-index: 100;
  opacity: 0;
  transition: opacity 180ms ease;
}
.ig-backdrop.ig-show { opacity: 1; }
.ig-card {
  width: 100%; max-width: 390px;
  padding: 26px;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--lift-3);
  transform: translateY(14px) scale(.97);
  transition: transform 260ms cubic-bezier(.22, 1.3, .36, 1);
}
.ig-backdrop.ig-show .ig-card { transform: none; }
.ig-card h3 { font-size: 1.12rem; margin: 0 0 5px; }
.ig-card p { margin: 0 0 16px; font-size: .88rem; color: var(--ink-soft); }
.ig-card label { display: block; font-family: 'Mitr', sans-serif; font-size: .82rem; margin-bottom: 6px; }
.ig-card input {
  width: 100%; padding: 12px 15px;
  font-family: inherit; font-size: 1rem;
  border: 1.5px solid var(--hairline); border-radius: 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ig-card input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(233, 109, 123, .16); }
.ig-err { min-height: 1.2em; margin-top: 8px; font-size: .84rem; color: #b8402f; }
.ig-actions { display: flex; gap: 9px; margin-top: 17px; }
.ig-actions button { flex: 1; }

/* ---------- ทยอยปรากฏ ---------- */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.empty-state { text-align: center; padding: 56px 20px; color: var(--ink-soft); }
.empty-state .material-symbols-outlined { font-size: 54px; color: #d8ccce; }

/* ---------- ปิด animation ตามการตั้งค่าเครื่อง ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- พิมพ์ ---------- */

@media print {
  .app-nav, .fab, .toast-host, .no-print { display: none !important; }
  body { background: #fff; }
  .card-soft, .stat-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  main { padding: 0 !important; max-width: none !important; }
}