:root{
  --chili-red: #c0392b;
  --chili-red-dark: #922b21;
  --chili-green: #2e7d32;
  --chili-orange: #e67e22;
  --bg-soft: #f7f5f2;
}

*{ font-family: 'Kanit', 'Segoe UI', sans-serif; }

body{
  background: var(--bg-soft);
}

.app-shell{
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.app-sidebar{
  width: 260px;
  min-width: 260px;
  background: linear-gradient(180deg, var(--chili-red-dark), var(--chili-red) 60%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1030;
  transition: margin-left .25s ease;
}

.sidebar-brand{
  display:flex; align-items:center; gap:.6rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.sidebar-brand i, .sidebar-brand .sidebar-brand-emoji{ font-size: 1.8rem; line-height:1; }
.brand-title{ font-weight:600; font-size:1.05rem; line-height:1.1; }
.brand-sub{ font-size:.72rem; opacity:.8; }

.sidebar-nav{ padding: .75rem .5rem; flex: 1; overflow-y:auto; }
.sidebar-nav .nav-link{
  color: rgba(255,255,255,.88);
  border-radius: .5rem;
  padding: .65rem .9rem;
  margin-bottom: .2rem;
  font-size: .92rem;
  display:flex; align-items:center; gap:.6rem;
}
.sidebar-nav .nav-link i{ font-size:1.05rem; width:1.2rem; text-align:center; }
.sidebar-nav .nav-link:hover{ background: rgba(255,255,255,.12); color:#fff; }
.sidebar-nav .nav-link.active{ background: #fff; color: var(--chili-red-dark); font-weight:600; }

.sidebar-season-box{
  margin: .5rem .75rem 0; padding: .85rem .9rem;
  background: rgba(255,255,255,.1); border-radius: .8rem;
  font-size: .78rem; line-height: 1.35;
}
.sidebar-season-box .season-title{ font-weight:600; margin-bottom:.5rem; }
.sidebar-season-box .season-item{ display:flex; gap:.5rem; margin-bottom:.5rem; }
.sidebar-season-box .season-item:last-child{ margin-bottom:0; }
.sidebar-season-box .season-dot{ width:.6rem; height:.6rem; border-radius:50%; margin-top:.3rem; flex:0 0 auto; }
.sidebar-season-box .season-item strong{ font-weight:600; }

.sidebar-footer{ padding: 1rem; border-top: 1px solid rgba(255,255,255,.15); }

.sidebar-backdrop{
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1020;
}

/* Main */
.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topbar{ background:#fff; border-bottom:1px solid #e9e2da; padding:.6rem 0; }
.app-content{ padding: 1.25rem 1.5rem 2rem; flex:1; }
.app-footer{ background:#fff; border-top:1px solid #e9e2da; }

/* Cards */
.kpi-card{
  border: none;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  overflow: hidden;
}
.kpi-card .kpi-icon{
  width: 52px; height: 52px; border-radius: .8rem;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem; color:#fff;
}
.kpi-value{ font-size: 1.6rem; font-weight: 700; }
.kpi-label{ color:#8a8a8a; font-size:.82rem; }

.bg-chili{ background: var(--chili-red) !important; }
.bg-leaf{ background: var(--chili-green) !important; }
.bg-amber{ background: var(--chili-orange) !important; }
.bg-info-soft{ background:#0d6efd !important; }

.card{
  border: none;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.card-header{
  background: #fff;
  border-bottom: 1px solid #f0ece6;
  font-weight: 600;
  border-radius: 1rem 1rem 0 0 !important;
}

/* Hero banner (แดชบอร์ด) */
.hero-banner{
  border-radius: 1rem;
  background:
    linear-gradient(120deg, rgba(146,43,33,.88), rgba(230,126,34,.55)),
    url('../img/bg.jpg') center/cover;
  color:#fff;
  padding: 1.75rem 2rem;
  min-height: 190px;
  display:flex; flex-direction:column; justify-content:center;
  position: relative;
  overflow: hidden;
}
.hero-banner .hero-emoji{
  position:absolute; right:1.25rem; top:1.25rem;
  font-size:2.6rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.hero-banner h2{ font-weight:700; line-height:1.3; margin-bottom:.25rem; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.hero-banner .hero-sub{ opacity:.95; font-size:.92rem; }

/* Widget การ์ดขนาดเล็ก (สภาพอากาศ/ราคา) */
.widget-card .widget-title{ font-size:.8rem; color:#8a8a8a; margin-bottom:.5rem; }
.widget-card .widget-empty{ color:#aaa; font-size:.82rem; text-align:center; padding: .75rem 0; }
.weather-icon{ font-size:2.4rem; color:#e67e22; }
.weather-temp{ font-size:2rem; font-weight:700; }
.weather-stats{ font-size:.78rem; color:#666; }
.weather-stats > div{ display:flex; align-items:center; gap:.3rem; margin-bottom:.15rem; }

.price-change-up{ color:#2e7d32; }
.price-change-down{ color:#c0392b; }

/* แผนที่แปลง */
#plotMap{ height: 280px; border-radius: .6rem; overflow:hidden; }
.map-legend{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.78rem; margin-top:.5rem; }
.map-legend .legend-dot{ width:.65rem; height:.65rem; border-radius:50%; display:inline-block; margin-right:.3rem; }

/* ปฏิทินปลูกอ้างอิง */
.calendar-ref-table th, .calendar-ref-table td{ text-align:center; font-size:.78rem; vertical-align:middle; }
.calendar-ref-table td.cell-plant{ background:#d9ead3; }
.calendar-ref-table td.cell-harvest{ background:#fce5cd; }

/* หน้าแจ้งเตือน */
.notif-card{ border-left: 4px solid transparent; }
.notif-card.notif-unread{ border-left-color: var(--chili-red); background:#fffaf8; }
.notif-icon{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem;
}

/* หน้าปฏิทินการเพาะปลูก */
.cal-legend{ display:flex; flex-wrap:wrap; gap:.9rem; font-size:.78rem; color:#555; }
.cal-legend .cal-dot{ margin-right:.3rem; }
.cal-dot{ display:inline-block; width:.6rem; height:.6rem; border-radius:50%; }
.cal-dot-dashed{ border:1.5px dashed #999; background:transparent !important; }

.cal-grid-head{
  display:grid; grid-template-columns: repeat(7, 1fr); text-align:center;
  font-size:.78rem; font-weight:600; color:#8a8a8a; margin-bottom:.35rem;
}
.cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.cal-day{
  min-height:92px; border:1px solid #eee6dd; border-radius:.5rem; padding:.35rem;
  background:#fff; cursor:pointer; transition:box-shadow .12s ease;
  display:flex; flex-direction:column; gap:2px; overflow:hidden;
}
.cal-day:hover{ box-shadow:0 2px 8px rgba(0,0,0,.08); }
.cal-day.cal-day-other-month{ background:#faf8f5; color:#bbb; }
.cal-day.cal-day-today{ border-color:var(--chili-red); border-width:2px; }
.cal-day.cal-day-selected{ background:#fdf1ef; }
.cal-day-num{ font-size:.8rem; font-weight:600; align-self:flex-end; }
.cal-event-chip{
  font-size:.68rem; padding:1px 4px; border-radius:4px; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-event-chip.cal-planned{ background:transparent !important; border:1.5px dashed; color:#555 !important; }
.cal-event-more{ font-size:.68rem; color:#999; }

@media (max-width: 767.98px){
  .cal-day{ min-height:60px; }
  .cal-event-chip{ font-size:.6rem; }
}

/* หน้าวางแผนการปลูก */
.plan-timeline{ display:flex; flex-wrap:wrap; gap:0; align-items:stretch; }
.plan-step{
  flex:1; min-width:120px; text-align:center; padding:.75rem .5rem;
  border-top:3px solid #e0dbd3; position:relative;
}
.plan-step.step-seed{ border-color:#8e44ad; }
.plan-step.step-prep{ border-color:#e67e22; }
.plan-step.step-plant{ border-color:var(--chili-green); }
.plan-step.step-harvest{ border-color:var(--chili-red); }
.plan-step .step-icon{ font-size:1.3rem; margin-bottom:.25rem; display:block; }
.plan-step .step-label{ font-weight:600; font-size:.82rem; }
.plan-step .step-date{ font-size:.78rem; color:#8a8a8a; }

/* หน้าพยากรณ์ */
.forecast-stat-card{ transition: box-shadow .15s ease; }
.explain-toggle{ font-size:.8rem; text-decoration:none; }
.explain-panel{
  background:#f7f5f2; border-radius:.6rem; padding:.75rem .9rem;
  font-size:.8rem; line-height:1.6; color:#555;
}
.explain-panel dt{ font-weight:600; color:#333; }
.explain-panel dd{ margin-bottom:.35rem; }
.data-insufficient{ color:#b45309; }

/* ซ่อนปุ่มเพิ่ม/แก้ไข/ลบสำหรับบัญชีผู้เยี่ยมชม (guest) — การป้องกันจริงอยู่ที่ API require_not_guest() แล้ว นี่แค่ซ่อน UI ให้สะอาด */
body[data-role="guest"] .guest-hide{ display:none !important; }
body[data-role="guest"] #tblFarmers td:last-child,
body[data-role="guest"] #tblAreas td:last-child,
body[data-role="guest"] #tblPlots td:last-child,
body[data-role="guest"] #tblHarvests td:last-child,
body[data-role="guest"] #tblCosts td:last-child,
body[data-role="guest"] #tblIrrigation td:last-child,
body[data-role="guest"] #tblPestDisease td:last-child,
body[data-role="guest"] #tblMarketPrice td:last-child{ display:none; }

/* ซ่อนปุ่ม/ฟิลด์ที่เฉพาะ admin/staff ควรเห็นสำหรับบัญชีเกษตรกร (farmer) — การป้องกันจริงอยู่ที่ API ทุกจุดแล้ว นี่แค่ซ่อน UI ให้สะอาด */
body[data-role="farmer"] .farmer-hide{ display:none !important; }

.badge-risk-very_low, .badge-risk-low{ background:#2e7d32 !important; }
.badge-risk-medium{ background:#e67e22 !important; }
.badge-risk-high{ background:#d35400 !important; }
.badge-risk-very_high{ background:#922b21 !important; }

.table-sm td, .table-sm th{ vertical-align: middle; }

.login-wrapper{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background: #f7f5f2;
  padding: 1.5rem;
}
.login-shell{
  width: 100%; max-width: 1080px;
  border-radius: 1.5rem;
  overflow:hidden;
  display:flex;
  background:#fff;
  min-height: 620px;
  box-shadow: 0 25px 60px rgba(0,0,0,.12);
}
.login-visual{
  flex: 0 0 54%;
  background-size: cover;
  background-position: center;
  position: relative;
  align-items: flex-end;
}
.login-visual-overlay{
  width:100%;
  padding: 2.5rem 2.5rem 1.85rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 32%, rgba(255,255,255,.88) 76%, #fff 100%);
}
.login-visual-brand h2{ font-size: 1.9rem; color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.login-visual-brand .login-emoji{ font-size: 2.4rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.login-visual-brand p{ font-size: .88rem; line-height:1.6; color:#fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.login-feature-row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top:.25rem;
}
.login-feature{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem;
  color:#3a3a3a; font-size:.7rem; font-weight:600; line-height:1.25;
}
.login-feature i{
  width:42px; height:42px; border-radius:50%;
  background: linear-gradient(135deg, var(--chili-red), var(--chili-orange)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  box-shadow: 0 4px 10px rgba(192,57,43,.3);
}
.login-form-panel{
  flex: 1 1 auto;
  padding: 3rem 3rem;
  display:flex; flex-direction:column; justify-content:center;
  background:#fff;
}
.login-icon-circle{
  width:64px; height:64px; border-radius:50%;
  background: linear-gradient(135deg, var(--chili-red), var(--chili-orange));
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.7rem;
}
.login-emoji{ font-size: 2.6rem; line-height:1; }
.login-divider{ display:flex; align-items:center; gap:.75rem; color:#aaa; font-size:.78rem; }
.login-divider::before, .login-divider::after{ content:''; flex:1; height:1px; background:#e5e0d8; }

@media (max-width: 575.98px){
  .login-wrapper{ padding: 0; }
  .login-shell{ border-radius:0; min-height:100vh; box-shadow:none; }
  .login-form-panel{ padding: 2rem 1.25rem; }
}

@media (max-width: 991.98px){
  .app-sidebar{ position:fixed; margin-left:-260px; }
  .app-sidebar.show{ margin-left:0; }
  .sidebar-backdrop.show{ display:block; }
}

/* แท็บหลายอันบนมือถือ: เลื่อนแนวนอนแทนการขึ้นบรรทัดใหม่หลายแถว */
@media (max-width: 767.98px){
  .nav-tabs{ flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .nav-tabs .nav-link{ white-space: nowrap; }
  .nav-tabs::-webkit-scrollbar{ height: 4px; }
}

/* หน้ารายงาน: ซ่อนส่วนที่ไม่เกี่ยวข้องตอนพิมพ์/บันทึกเป็น PDF ให้เหลือแต่เนื้อหารายงาน */
@media print {
  .app-sidebar, .app-topbar, .sidebar-backdrop, .no-print { display: none !important; }
  .app-main { margin: 0 !important; }
  .app-content { padding: 0 !important; }
  #reportPrintArea .card { break-inside: avoid; border: 1px solid #ccc !important; box-shadow: none !important; }
  body { background: #fff !important; }
}
.report-header img{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }