/* ===================================================================
   dashboard-notes.css — โน้ตประจำห้อง + ข้อความฝากทีม (หน้า Dashboard/ภาพรวม)
   แยกไฟล์ต่างหากจาก components.css เพราะเป็น widget เฉพาะของหน้า Dashboard เท่านั้น
   ใช้ CSS variable (--card-bg, --line, --accent ฯลฯ) ทั้งหมด เพื่อให้เข้ากับระบบปรับสีธีม
   (theme-prefs.js) โดยอัตโนมัติ ไม่ต้องแก้ไฟล์นี้เพิ่มเมื่อผู้ใช้เปลี่ยนสีธีม
   =================================================================== */

/* ---------- โน้ตประจำห้อง ---------- */

.room-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.room-note-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong, var(--line));
  border-radius: var(--radius-md);
  padding: 14px 14px 12px;
  transition: box-shadow .15s ease, transform .15s ease;
}

.room-note-card.st-available { border-left-color: var(--bento-mint); }
.room-note-card.st-occupied { border-left-color: var(--bento-pink); }
.room-note-card.st-reserved { border-left-color: var(--bento-pink-soft); }
.room-note-card.st-maintenance { border-left-color: var(--bento-coral); }

.room-note-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
}

.room-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.room-note-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-dim);
}

.room-note-badge.st-available { background: var(--bento-mint); color: var(--bento-mint-text); }
.room-note-badge.st-occupied { background: var(--bento-pink); color: var(--bento-pink-occupied-text); }
.room-note-badge.st-reserved { background: var(--bento-pink-soft); color: var(--bento-pink-text); }
.room-note-badge.st-maintenance { background: var(--bento-coral); color: var(--bento-coral-text); }

.room-note-text {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 10px;
  max-height: 4.5em;
  overflow: hidden;
}

.room-note-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.room-note-time {
  font-size: 11.5px;
  color: var(--text-faint);
}

.room-note-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* ---------- ข้อความฝากทีม (handover notes) ---------- */

.handover-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.handover-item {
  position: relative;
  display: flex;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  overflow: hidden;
}

.handover-item.pinned {
  border-color: var(--amber);
  background: var(--amber-dim);
}

.handover-item.pinned::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--amber);
}

.handover-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
}

.handover-avatar.av-0 { background: var(--accent-dim); color: var(--accent-deep); }
.handover-avatar.av-1 { background: color-mix(in srgb, var(--bento-purple-stat) 20%, transparent); color: var(--bento-purple-stat); }
.handover-avatar.av-2 { background: color-mix(in srgb, var(--bento-slate) 22%, transparent); color: var(--bento-slate-sub); }
.handover-avatar.av-3 { background: color-mix(in srgb, var(--bento-coral) 25%, transparent); color: var(--bento-coral-sub); }
.handover-avatar.av-4 { background: color-mix(in srgb, var(--bento-pink) 20%, transparent); color: var(--bento-pink-text); }

.handover-body {
  flex: 1 1 auto;
  min-width: 0;
}

.handover-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.handover-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.handover-time {
  font-size: 11.5px;
  color: var(--text-faint);
}

.handover-message {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.handover-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.handover-pin-btn.is-pinned {
  color: var(--amber);
  border-color: var(--amber);
}

.handover-locked {
  color: var(--text-faint);
  cursor: default;
  opacity: .6;
}
.handover-locked:hover {
  color: var(--text-faint);
  border-color: var(--line);
}

/* ---------- ฟอร์มเพิ่มข้อความฝากทีม (ในหน้า Dashboard เอง ไม่ต้องเปิด modal) ---------- */

.handover-add-box {
  background: var(--card-bg);
  border: 1px dashed var(--line-strong, var(--line));
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.handover-add-box textarea {
  width: 100%;
  resize: vertical;
  min-height: 44px;
}

.handover-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.handover-pin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}

@media (max-width: 720px) {
  .room-notes-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .room-notes-grid {
    grid-template-columns: 1fr;
  }
}