:root{
  --navy: #142a5c;
  --navy-dark: #0c1c40;
  --gold: #e6b93d;
  --gold-light: #fff6dc;
  --link-blue: #145bd6;
  --orange: #d97a12;
}

* { font-family: 'Kanit', sans-serif; box-sizing: border-box; }

html, body{ height: 100%; background: #eef1f6; }

body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================
   ส่วนที่ใช้ร่วมกัน (หน้า login / จัดการหมวดหมู่ / จัดการกิจกรรม)
   ============================================================ */
.app-header{
  background: linear-gradient(180deg, var(--gold-light) 0%, #ffedb0 100%);
  border-bottom: 5px solid var(--gold);
  padding: 1rem 1rem 1.25rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.app-header .logo{
  width: clamp(52px, 14vw, 76px);
  height: clamp(52px, 14vw, 76px);
  object-fit: contain;
  margin-bottom: .4rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

.app-header h1{
  color: var(--navy-dark);
  font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.4rem);
  margin: 0;
}

.app-header p.subtitle{
  color: #6b5a1e;
  font-size: clamp(.7rem, 2.2vw, .88rem);
  margin: .15rem 0 0;
}

.back-bar{
  background: #fff;
  border-bottom: 1px solid #e3e6ee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 .5rem;
}

.back-bar a{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #123a7c;
  text-decoration: none;
  font-weight: 500;
  font-size: .88rem;
  padding: .6rem .5rem;
}

.back-bar a:hover{ color: var(--navy-dark); }
.back-bar .float-end-link{ margin-left: auto; }

main{
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1rem 1.5rem;
}

body.wide main{ max-width: 1140px; }

.action-btn{
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #eef1fb;
  color: var(--link-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(20,43,92,.08);
  transition: transform .15s ease, box-shadow .15s ease;
  border: none;
  width: 100%;
  text-align: left;
}
.action-btn:hover{ color: var(--link-blue); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20,43,92,.15); }
.action-btn i{ font-size: 1.3rem; }
.action-btn.action-btn-admin{ background: var(--gold-light); color: var(--orange); }
.action-btn.action-btn-admin:hover{ color: var(--orange); }

.hl-card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  padding: clamp(1rem, 4vw, 1.75rem);
  margin-bottom: 1.25rem;
}
.hl-card h2{
  color: var(--link-blue);
  font-weight: 700;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  margin-bottom: 1.1rem;
}

.form-label{ font-weight: 500; color: var(--navy-dark); }
.form-hint{ font-size: .8rem; border-radius: 8px; padding: .4rem .6rem; margin-top: .35rem; }
.form-hint.secret{ background: #e6f6ea; color: #1b7a3d; }
.form-hint.info{ background: #eaf2ff; color: #145bd6; }

.hl-table thead th{ background: #eaf2ff; color: var(--link-blue); font-weight: 600; border: none; }
.hl-table td, .hl-table th{ vertical-align: middle; }
.hl-table tbody tr:nth-child(even){ background: #f7f9fd; }

footer{
  background: var(--navy-dark);
  color: #fff;
  text-align: center;
  padding: 1rem .75rem;
  font-size: clamp(.72rem, 2.4vw, .88rem);
  margin-top: auto;
}
footer .brand{ font-weight: 600; }
footer small{ display: block; color: #b9c3dd; margin-top: .2rem; }

.badge-status{ font-size: .78rem; font-weight: 500; padding: .4rem .7rem; border-radius: 20px; }

.login-wrap{ max-width: 380px; margin: 2rem auto; }

/* สี swatch สำหรับหมวดหมู่ */
.color-dot{
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  flex: none;
}
.color-input-wrap{ display: flex; align-items: center; gap: .6rem; }
.color-input-wrap input[type=color]{
  width: 44px; height: 38px; padding: 2px; border-radius: 8px; border: 1px solid #dfe4ee; cursor: pointer;
}

/* ============================================================
   หน้าปฏิทินหลัก (index.php) - โครงแบบแอปเต็มหน้าจอ
   ============================================================ */
body.cal-body{ background: #f4f6fb; }
body.cal-body main{ display: none; } /* main ไม่ได้ใช้ในหน้านี้ */

.cal-app{
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* --- Sidebar --- */
.cal-sidebar{
  width: 260px;
  min-width: 260px;
  background: #fff;
  border-right: 1px solid #e3e6ee;
  display: flex;
  flex-direction: column;
  transition: margin-left .2s ease;
}
.cal-sidebar.collapsed{ margin-left: -260px; }

.cal-sidebar-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1rem;
  border-bottom: 1px solid #eef0f6;
}
.cal-sidebar-top .cal-logo{
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--navy-dark);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.cal-sidebar-top button{
  border: none; background: transparent; color: #8a93a8; font-size: 1.2rem; cursor: pointer;
}

.cal-sidebar-body{ flex: 1; overflow-y: auto; padding: .75rem .9rem 1.5rem; }

.cal-section-title{
  font-size: .74rem;
  font-weight: 700;
  color: #9aa3b8;
  text-transform: none;
  margin: 1rem 0 .5rem;
  letter-spacing: .02em;
}
.cal-section-title:first-child{ margin-top: .25rem; }

.cal-view-btn{
  display: flex; align-items: center; gap: .6rem;
  width: 100%;
  border: none; background: transparent;
  padding: .55rem .6rem;
  border-radius: 10px;
  color: #47546b;
  font-weight: 500;
  font-size: .92rem;
  cursor: pointer;
  text-align: left;
}
.cal-view-btn:hover{ background: #f2f4fa; }
.cal-view-btn.active{ background: #eaf1ff; color: var(--link-blue); font-weight: 600; }
.cal-view-btn i{ font-size: 1rem; width: 18px; text-align: center; }

.cal-cat-item{
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  color: #47546b;
}
.cal-cat-item:hover{ background: #f6f7fb; }
.cal-cat-item input{ accent-color: var(--link-blue); }
.cal-cat-item label{ flex: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-admin-menu{
  border-top: 1px solid #eef0f6;
  padding: .9rem 1rem;
}
.cal-admin-menu a{
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .4rem;
  color: #47546b;
  text-decoration: none;
  font-size: .88rem;
  border-radius: 8px;
}
.cal-admin-menu a:hover{ background: #f2f4fa; color: var(--link-blue); }
.cal-admin-menu a.danger:hover{ color: #c62828; }

/* --- Main area --- */
.cal-main{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cal-topbar{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e3e6ee;
  flex-wrap: wrap;
}
.cal-topbar .cal-hamburger{
  border: none; background: transparent; font-size: 1.3rem; color: #47546b; cursor: pointer;
}
.cal-topbar .cal-nav-btn{
  border: 1px solid #dfe4ee; background: #fff; color: #47546b;
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
}
.cal-topbar .cal-today-btn{
  border: 1px solid #dfe4ee; background: #fff; color: #47546b;
  padding: .4rem .9rem; border-radius: 8px; font-weight: 500; font-size: .85rem; cursor: pointer;
}
.cal-topbar h2{
  margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--navy-dark);
  flex: 1; text-align: center; min-width: 160px;
}
.cal-view-switch{ display: flex; border: 1px solid #dfe4ee; border-radius: 10px; overflow: hidden; }
.cal-view-switch button{
  border: none; background: #fff; color: #47546b; padding: .4rem .85rem; font-size: .84rem; font-weight: 500; cursor: pointer;
}
.cal-view-switch button + button{ border-left: 1px solid #dfe4ee; }
.cal-view-switch button.active{ background: var(--link-blue); color: #fff; }

.cal-login-btn{
  background: var(--gold);
  color: var(--navy-dark);
  border: none;
  padding: .5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .86rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.cal-login-btn:hover{ color: var(--navy-dark); filter: brightness(0.96); }

.cal-admin-badge{
  position: relative;
}
.cal-admin-badge > button{
  background: #eaf1ff; color: var(--link-blue); border: none;
  padding: .5rem .9rem; border-radius: 8px; font-weight: 600; font-size: .86rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
}
.cal-admin-dropdown{
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid #e3e6ee; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 200px; padding: .5rem; z-index: 50;
}
.cal-admin-dropdown.show{ display: block; }
.cal-admin-dropdown .menu-label{ font-size: .72rem; color: #9aa3b8; font-weight: 700; padding: .3rem .6rem; }
.cal-admin-dropdown a{
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: 8px; color: #47546b; text-decoration: none; font-size: .88rem;
}
.cal-admin-dropdown a:hover{ background: #f2f4fa; color: var(--link-blue); }
.cal-admin-dropdown a.danger:hover{ color: #c62828; background: #fdeeee; }
.cal-admin-dropdown hr{ margin: .35rem 0; border-color: #eef0f6; }

/* --- Calendar grid (month view) --- */
.cal-body-scroll{ flex: 1; overflow: auto; padding: 0; }

.cal-grid-wrap{ display: flex; flex-direction: column; height: 100%; }

.cal-weekdays{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #e3e6ee;
  background: #fafbfd;
}
.cal-weekdays div{
  padding: .55rem 0;
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  color: #8a93a8;
}

.cal-month-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(110px, 1fr);
  flex: 1;
}
.cal-day-cell{
  border-right: 1px solid #eef0f6;
  border-bottom: 1px solid #eef0f6;
  padding: .3rem;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 110px;
  background: #fff;
}
.cal-day-cell:hover{ background: #fafcff; }
.cal-day-cell.other-month{ background: #fbfbfd; color: #c3c9d6; }
.cal-day-cell.other-month .cal-day-num{ color: #c3c9d6; }
.cal-day-cell .cal-day-num{
  font-size: .8rem; font-weight: 600; color: #47546b;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; margin-bottom: 2px;
}
.cal-day-cell.today .cal-day-num{ background: var(--link-blue); color: #fff; }

.cal-event-bar{
  font-size: .72rem;
  padding: .18rem .4rem;
  border-radius: 6px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-weight: 500;
}
.cal-event-bar:hover{ filter: brightness(0.92); }
.cal-more-link{
  font-size: .72rem; color: #6b7a99; font-weight: 500; padding: .1rem .4rem; cursor: pointer;
}
.cal-more-link:hover{ color: var(--link-blue); }

/* --- Week / Day view --- */
.cal-week-grid, .cal-day-view{ display: flex; flex-direction: column; }
.cal-week-header, .cal-day-header{
  display: grid;
  border-bottom: 1px solid #e3e6ee;
  background: #fafbfd;
}
.cal-week-header{ grid-template-columns: 60px repeat(7, 1fr); }
.cal-day-header{ grid-template-columns: 60px 1fr; }
.cal-week-header > div, .cal-day-header > div{ padding: .5rem .3rem; text-align: center; font-size: .8rem; font-weight: 600; color: #47546b; }

.cal-allday-row{ display: grid; border-bottom: 1px solid #eef0f6; min-height: 44px; }
.cal-week-grid .cal-allday-row{ grid-template-columns: 60px repeat(7, 1fr); }
.cal-day-view .cal-allday-row{ grid-template-columns: 60px 1fr; }
.cal-allday-row > div{ border-right: 1px solid #eef0f6; padding: .25rem; }
.cal-allday-label{ font-size: .7rem; color: #9aa3b8; display: flex; align-items: center; justify-content: center; }

/* --- List view --- */
.cal-list-view{ padding: 1rem 1.25rem; }
.cal-list-group{ margin-bottom: 1.25rem; }
.cal-list-date{ font-size: .84rem; font-weight: 700; color: #47546b; margin-bottom: .5rem; padding-bottom: .4rem; border-bottom: 1px solid #eef0f6; }
.cal-list-item{
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .3rem;
  border-radius: 8px;
  cursor: pointer;
}
.cal-list-item:hover{ background: #f6f8fc; }
.cal-list-item .color-dot{ width: 10px; height: 10px; }
.cal-list-item .cal-list-title{ font-weight: 500; color: var(--navy-dark); font-size: .9rem; }
.cal-list-item .cal-list-cat{ font-size: .76rem; color: #9aa3b8; }
.cal-list-empty{ color: #9aa3b8; font-size: .88rem; padding: 1rem 0; text-align: center; }

/* --- Modal enhancements --- */
.cal-modal .modal-content{ border-radius: 16px; border: none; }
.cal-modal .modal-header{ border-bottom: 1px solid #eef0f6; }
.cal-modal .modal-title{ font-weight: 700; color: var(--navy-dark); font-size: 1.05rem; }
.cal-upload-box{
  border: 2px dashed #c7d0e6; border-radius: 12px; padding: 1rem; text-align: center; color: #6b7a99; cursor: pointer;
  font-size: .84rem;
}
.cal-upload-box:hover{ border-color: var(--link-blue); background: #f5f8ff; }
.cal-upload-box i{ font-size: 1.4rem; color: #9aa8c7; display: block; margin-bottom: .3rem; }

.cal-event-detail img{ max-width: 100%; border-radius: 10px; margin-top: .6rem; }
.cal-event-detail .cal-detail-cat{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; padding: .25rem .6rem; border-radius: 20px;
}

@media (max-width: 860px){
  .cal-sidebar{ position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; box-shadow: 0 0 20px rgba(0,0,0,.15); }
  .cal-sidebar.collapsed{ margin-left: -260px; }
  .cal-sidebar:not(.collapsed){ margin-left: 0; }
  .cal-topbar h2{ font-size: .95rem; }
  .cal-view-switch button{ padding: .35rem .55rem; font-size: .76rem; }
  .cal-month-grid{ grid-auto-rows: minmax(80px, 1fr); }
  .cal-day-cell{ min-height: 80px; }
}