/* ธีมสีมหาวิทยาลัยพะเยา: ม่วง-ทอง */
:root {
  --up-purple: #5d2489;
  --up-purple-dark: #431a63;
  --up-purple-light: #7c3fae;
  --up-gold: #fdb913;
}

body {
  font-family: 'Sarabun', sans-serif;
  background: #f5f3f8;
}

.btn-primary {
  --bs-btn-bg: var(--up-purple);
  --bs-btn-border-color: var(--up-purple);
  --bs-btn-hover-bg: var(--up-purple-dark);
  --bs-btn-hover-border-color: var(--up-purple-dark);
  --bs-btn-active-bg: var(--up-purple-dark);
  --bs-btn-active-border-color: var(--up-purple-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--up-purple);
  --bs-btn-border-color: var(--up-purple);
  --bs-btn-hover-bg: var(--up-purple);
  --bs-btn-hover-border-color: var(--up-purple);
  --bs-btn-active-bg: var(--up-purple);
  --bs-btn-active-border-color: var(--up-purple);
}
a { color: var(--up-purple); }

/* ---------- หลังบ้าน ---------- */
.admin-topbar {
  background: linear-gradient(90deg, var(--up-purple-dark), var(--up-purple));
  min-height: 52px;
  z-index: 1030;
}

.sidebar {
  --bs-offcanvas-width: 260px;
  background: linear-gradient(180deg, var(--up-purple-dark), var(--up-purple));
}
/* จอใหญ่: แสดงค้างด้านซ้ายแบบเดิม */
@media (min-width: 992px) {
  .sidebar {
    display: flex !important;
    width: 250px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
  }
}
.sidebar-brand { color: var(--up-gold); }
.sidebar .nav-link { color: rgba(255,255,255,.85); border-radius: .5rem; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar .nav-link.active { background: var(--up-gold); color: var(--up-purple-dark); font-weight: 600; }
.admin-main { min-width: 0; }

.stat-card { border: 0; border-radius: 1rem; color: #fff; }
.stat-card .stat-icon { font-size: 2.2rem; opacity: .5; }
.stat-purple { background: linear-gradient(135deg, #5d2489, #7c3fae); }
.stat-gold   { background: linear-gradient(135deg, #d99a00, #fdb913); }
.stat-teal   { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.stat-blue   { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.stat-red    { background: linear-gradient(135deg, #b91c1c, #ef4444); }

.card { border: 0; box-shadow: 0 1px 4px rgba(93,36,137,.08); border-radius: .75rem; }
.table > :not(caption) > * > * { vertical-align: middle; }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.login-body { background: linear-gradient(135deg, var(--up-purple-dark), var(--up-purple) 60%, var(--up-purple-light)); }
.login-card { border-radius: 1rem; }
.login-icon {
  width: 64px; height: 64px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.8rem;
  background: var(--up-purple); color: var(--up-gold);
}

/* ---------- หน้าเว็บเผยแพร่ (บอร์ดสถานะรายวัน) ---------- */
.public-body { background: #faf9fc; }
.public-navbar { background: linear-gradient(90deg, var(--up-purple-dark), var(--up-purple)); }
.public-hero {
  background: linear-gradient(135deg, var(--up-purple-dark), var(--up-purple) 55%, var(--up-purple-light));
  color: #fff;
  padding: 2.5rem 0 2.75rem;
}
.public-hero .accent { color: var(--up-gold); }
.public-footer { background: var(--up-purple-dark); }

.date-nav .form-control { max-width: 170px; }

.exec-card { height: 100%; border-left: .35rem solid var(--up-purple); }
.exec-card.status-office  { border-left-color: #198754; }
.exec-card.status-offsite { border-left-color: #fdb913; }
.exec-card.status-leave   { border-left-color: #dc3545; }
.exec-card .exec-avatar {
  width: 52px; height: 52px; flex: 0 0 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.5rem;
  background: #ece5f5; color: var(--up-purple);
}

.status-row-leave { background: #fff5f5; }

/* ---------- ตารางรายสัปดาห์ ---------- */
.week-card { overflow: hidden; }
.week-table { border-collapse: separate; border-spacing: 0; margin-bottom: 0; }
.week-table th, .week-table td {
  border: 0;
  border-bottom: 1px solid #f0ebf7;
  padding: .7rem .65rem;
  font-size: .9rem;
}
.week-table tbody tr:last-child th,
.week-table tbody tr:last-child td { border-bottom: 0; }

/* หัวตาราง */
.week-table thead th {
  background: #f6f2fb;
  border-bottom: 2px solid #e6dcf2;
  text-align: center;
  padding: .6rem .65rem .55rem;
}
.week-table thead .dow { font-weight: 700; color: var(--up-purple-dark); }
.week-table thead .dnum { font-size: .75rem; font-weight: 400; color: #8a7f99; }

/* คอลัมน์ชื่อ (ตรึงซ้ายเมื่อเลื่อนแนวนอน) */
.week-table .name-col {
  min-width: 220px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  text-align: left;
  box-shadow: inset -1px 0 0 #f0ebf7;
}
.week-table thead .name-col { background: #f6f2fb; z-index: 3; }
.week-table .day-col { min-width: 140px; }

/* คอลัมน์วันนี้ */
.week-table .today-col { background: #fffbef; }
.week-table thead .today-col {
  background: #fff6d9;
  border-bottom: 3px solid var(--up-gold);
}
.today-badge {
  display: inline-block;
  margin-top: .15rem;
  padding: .05rem .5rem;
  border-radius: 1rem;
  background: var(--up-gold);
  color: var(--up-purple-dark);
  font-size: .68rem;
  font-weight: 700;
}

/* แถว hover */
.week-table tbody tr:hover td:not(.today-col),
.week-table tbody tr:hover .name-col { background: #faf8fd; }

/* ชื่อ + avatar */
.wname { display: flex; align-items: center; gap: .6rem; }
.wname .wavatar {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1rem;
  background: #ece5f5; color: var(--up-purple);
}
.wname .wavatar.exec { background: var(--up-purple); color: var(--up-gold); }
.wname .wtitle { font-weight: 600; line-height: 1.25; }
.wname .wsub { font-size: .75rem; color: #8a7f99; line-height: 1.3; }

/* ชิปสถานะในเซลล์ */
.wchip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .7rem;
  border-radius: 2rem;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.wchip-office   { background: #e3f4ea; color: #157347; }
.wchip-offsite  { background: #fff1c8; color: #8a6d00; }
.wchip-sick     { background: #fdeaec; color: #b02a37; }
.wchip-personal { background: #ffe7d6; color: #c2571c; }
.wchip-vacation { background: #dcf3f8; color: #0e7490; }
.wchip-official { background: #e3ecfd; color: #1d4ed8; }
.wchip-other    { background: #e9e7ee; color: #4b445a; }

/* จุดเช็คสำหรับวันที่มาปฏิบัติงาน */
.wdot {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #e3f4ea; color: #157347;
  font-size: .95rem;
}

/* ข้อความรายละเอียดใต้ชิป */
.wnote {
  font-size: .74rem;
  color: #8a7f99;
  line-height: 1.35;
  margin-top: .25rem;
  max-width: 180px;
  margin-left: auto; margin-right: auto;
}

/* คำอธิบายสัญลักษณ์ */
.week-legend { font-size: .8rem; color: #6c6478; }
.week-legend .wchip, .week-legend .wdot { transform: scale(.9); }

/* ---------- ปฏิทินตารางปฏิบัติงานผู้บริหาร ---------- */
.exec-calendar-card { display: block; }
.exec-calendar-day {
  min-height: 96px; border: 1px solid #ece7f6; border-radius: .65rem; padding: .55rem; background: #fff;
  box-shadow: inset 0 1px 0 rgba(93,36,137,.04);
}
.exec-calendar-day.empty { background: transparent; border-style: dashed; border-color: #e5dff0; }
.exec-calendar-day.status-office { border-left: 4px solid #198754; background: linear-gradient(135deg, #f8fdf9 0%, #ffffff 100%); }
.exec-calendar-day.status-offsite { border-left: 4px solid #fdb913; background: linear-gradient(135deg, #fffdf5 0%, #ffffff 100%); }
.exec-calendar-day.status-leave {
  border-left: 4px solid #dc3545; background: linear-gradient(135deg, #fff5f6 0%, #ffffff 100%);
  box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.15);
}
.exec-calendar-day.status-leave-training {
  border-left: 4px solid #f59e0b; background: linear-gradient(135deg, #fffdf2 0%, #ffffff 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2);
}
.exec-calendar-day.status-present { border-left: 4px solid #198754; background: linear-gradient(135deg, #f8fdf9 0%, #ffffff 100%); }
.exec-calendar-date {
  font-weight: 700; color: var(--up-purple-dark); display: inline-flex; align-items: center; gap: .3rem;
}
.exec-calendar-day.status-leave .exec-calendar-date {
  color: #b42318; background: #fde2e4; border-radius: 999px; padding: .12rem .45rem;
}
.exec-calendar-day.status-leave-training .exec-calendar-date {
  color: #9a5b00; background: #fef3c7; border-radius: 999px; padding: .12rem .45rem;
}
.exec-calendar-status {
  font-size: .74rem; font-weight: 600; margin-top: .25rem; color: #4b5563;
}
.exec-calendar-day.status-leave .exec-calendar-status {
  color: #b42318; display: flex; align-items: center; gap: .3rem;
}
.exec-calendar-day.status-leave .exec-calendar-status::before {
  content: '✕';
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; border-radius: 50%; background: #dc3545; color: #fff; font-size: .7rem;
}
.exec-calendar-day.status-leave-training .exec-calendar-status {
  color: #b45309; display: flex; align-items: center; gap: .3rem;
}
.exec-calendar-day.status-leave-training .exec-calendar-status::before {
  content: '◔';
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; border-radius: 50%; background: #f59e0b; color: #fff; font-size: .7rem;
}
.exec-calendar-detail { font-size: .72rem; color: #6c6478; margin-top: .25rem; line-height: 1.25; }

/* ---------- แผนผังห้องทำงาน ---------- */
.fp-legend { font-size: .85rem; color: #5c5470; display: inline-flex; align-items: center; gap: .35rem; }
.fp-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw-office  { background: #22a06b; }
.sw-offsite { background: #e0a400; }
.sw-leave   { background: #dc3545; }

.fp-card { overflow: hidden; }
.fp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  background:
    radial-gradient(circle at 20% 15%, #ffffff 0, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #f3eefb, #ece7f6);
  overflow: hidden;
}
/* เส้นตารางพื้นห้อง */
.fp-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(93,36,137,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93,36,137,.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* พื้นหลังเป็นรูปแปลนห้อง (background-size 100% 100% เพื่อให้พิกัด % ตรงกับภาพเป๊ะ) */
.fp-stage.has-bg {
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.fp-stage.has-bg .fp-grid { display: none; }

.fp-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--up-purple-light); text-align: center;
}

/* โต๊ะทำงานบนแผนผัง */
.fp-desk {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 140px;
  background: #fff;
  border-radius: .7rem;
  border: 1px solid #eadff5;
  border-top: 4px solid #adb5bd;
  box-shadow: 0 3px 10px rgba(67,26,99,.14);
  padding: .5rem .6rem .55rem;
  text-align: center;
  z-index: 1;
}
.fp-desk.is-exec { width: 152px; box-shadow: 0 4px 14px rgba(67,26,99,.22); }
.fp-desk.desk-office  { border-top-color: #22a06b; }
.fp-desk.desk-offsite { border-top-color: #e0a400; }
.fp-desk.desk-leave   { border-top-color: #dc3545; background: #fff8f8; }

.fp-desk-top { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-bottom: .2rem; }
.fp-ava {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: .9rem;
  background: #ece5f5; color: var(--up-purple);
}
.fp-desk.is-exec .fp-ava { background: var(--up-purple); color: var(--up-gold); }
.fp-dot { font-size: 1rem; }
.fp-desk.desk-office  .fp-dot { color: #22a06b; }
.fp-desk.desk-offsite .fp-dot { color: #e0a400; }
.fp-desk.desk-leave   .fp-dot { color: #dc3545; }

.fp-name { font-weight: 600; font-size: .82rem; line-height: 1.2; }
.fp-role { font-size: .68rem; color: #8a7f99; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.fp-detail {
  margin-top: .25rem; font-size: .68rem; line-height: 1.25;
  color: #7a4f00; background: #fff3d6; border-radius: .4rem; padding: .1rem .3rem;
}
.fp-desk.desk-leave .fp-detail { color: #a12530; background: #fde3e6; }
.fp-sub { display: block; margin-top: .1rem; }

/* ชิปคนที่ยังไม่ได้จัดวาง */
.fp-chip {
  display: inline-flex; align-items: center;
  padding: .3rem .7rem; border-radius: 2rem;
  font-size: .82rem; background: #f1ecf8; border: 1px solid #e4d9f2;
}
.fp-chip.desk-office  { border-left: 4px solid #22a06b; }
.fp-chip.desk-offsite { border-left: 4px solid #e0a400; }
.fp-chip.desk-leave   { border-left: 4px solid #dc3545; }

/* โหมดแก้ไข (หลังบ้าน) */
.fp-edit .fp-desk { cursor: grab; user-select: none; touch-action: none; border-top-color: var(--up-purple-light); }
.fp-edit .fp-desk.is-exec { border-top-color: var(--up-gold); }
.fp-edit .fp-desk.dragging { cursor: grabbing; opacity: .85; box-shadow: 0 8px 22px rgba(67,26,99,.35); z-index: 5; }
.fp-desk .fp-remove {
  position: absolute; top: -8px; right: -8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #dc3545; color: #fff; border: 0;
  display: none; align-items: center; justify-content: center; font-size: .7rem; line-height: 1;
}
.fp-edit .fp-desk .fp-remove { display: inline-flex; }
.fp-tray-chip {
  cursor: grab; user-select: none; touch-action: none;
  display: inline-flex; align-items: center;
  padding: .35rem .75rem; border-radius: 2rem;
  font-size: .85rem; background: #fff; border: 1px solid #e4d9f2;
  box-shadow: 0 1px 3px rgba(67,26,99,.1);
}
.fp-tray-chip.is-exec { border-left: 4px solid var(--up-gold); }

/* ---------- จอเล็ก (มือถือ) ---------- */
@media (max-width: 575.98px) {
  /* ส่วนหัวหน้าเผยแพร่ + แถบเลือกวันที่ */
  .public-hero { padding: 1.5rem 0 1.75rem; }
  .public-hero h1 { font-size: 1.15rem; }
  .public-hero .fs-5 { font-size: 1rem !important; }
  .date-nav { flex-wrap: wrap; }
  .date-nav .form-control { max-width: none; flex: 1 1 130px; }

  /* ตารางรายสัปดาห์: ลดขนาดให้พอดีจอ */
  .week-table th, .week-table td { font-size: .82rem; padding: .5rem .45rem; }
  .week-table .name-col { min-width: 150px; }
  .week-table .day-col { min-width: 118px; }
  .wname { gap: .4rem; }
  .wname .wavatar { display: none; }
  .wchip { font-size: .73rem; padding: .22rem .55rem; }
  .wnote { max-width: 130px; font-size: .7rem; }
  .wdot { width: 26px; height: 26px; font-size: .85rem; }

  /* ตารางทั่วไป + สถิติ */
  .table { font-size: .875rem; }
  .stat-card .fs-3 { font-size: 1.4rem !important; }

  /* แผนผัง: ย่อโต๊ะและเปิดให้เลื่อนแนวนอนได้ */
  .fp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fp-stage { aspect-ratio: auto; height: 460px; min-height: 0; width: 640px; }
  .fp-desk { width: 108px; padding: .4rem .45rem; }
  .fp-desk.is-exec { width: 116px; }
  .fp-name { font-size: .76rem; }
  .fp-role { font-size: .64rem; }
}
.section-title {
  border-left: .35rem solid var(--up-gold);
  padding-left: .75rem;
}

/* วันปัจจุบันในปฏิทิน (Today Highlight) */
.exec-calendar-day.is-today {
  outline: 3px solid #198754; /* default outline */
  outline-offset: -1px;
  box-shadow: 0 0 12px rgba(25, 135, 84, 0.4);
  position: relative;
  z-index: 1;
}
.exec-calendar-day.is-today .exec-calendar-date::after {
  content: 'วันนี้';
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  background: #198754; /* default badge bg */
  color: #ffffff;
  padding: .05rem .35rem;
  border-radius: .25rem;
  margin-left: .25rem;
}

/* หากวันนี้มีสถานะต่างๆ ให้สีล้อมรอบ (Outline & Badge) เปลี่ยนตามสถานะนั้นๆ */
.exec-calendar-day.is-today.status-office,
.exec-calendar-day.is-today.status-present {
  outline-color: #198754; /* เขียว */
  box-shadow: 0 0 12px rgba(25, 135, 84, 0.4);
}
.exec-calendar-day.is-today.status-office .exec-calendar-date::after,
.exec-calendar-day.is-today.status-present .exec-calendar-date::after {
  background: #198754;
}

.exec-calendar-day.is-today.status-offsite {
  outline-color: #fdb913; /* เหลืองทอง */
  box-shadow: 0 0 12px rgba(253, 185, 19, 0.4);
}
.exec-calendar-day.is-today.status-offsite .exec-calendar-date::after {
  background: #fdb913;
  color: #ffffff;
}

.exec-calendar-day.is-today.status-leave {
  outline-color: #dc3545; /* แดง */
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.4);
}
.exec-calendar-day.is-today.status-leave .exec-calendar-date::after {
  background: #dc3545;
}

.exec-calendar-day.is-today.status-leave-training {
  outline-color: #f59e0b; /* ส้ม */
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}
.exec-calendar-day.is-today.status-leave-training .exec-calendar-date::after {
  background: #f59e0b;
}

/* วันที่ผ่านมาแล้ว (Past Days Highlight) */
.exec-calendar-day.is-past {
  filter: grayscale(80%) opacity(70%);
  background-color: #f9f9fb;
  border-color: #e5dfef;
}