/* ── PLANTING GUIDE + WEATHER FEATURE ── */
/* Fonts: Poppins (headings), Inter (body) */
/* Colors: Primary var(--color-primary) | Secondary var(--color-secondary) | Accent var(--color-accent) | BG var(--color-bg-page) */

.sc-main--guide { background: var(--color-bg-page); gap: 24px; }

/* ── PAGE HEADER ── */
.sc-guide-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sc-guide-header h1 { font-family:var(--font-heading); font-size:22px; font-weight:700; color:var(--color-primary); display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.sc-guide-header p  { font-family:var(--font-body); font-size:13px; color:#888; }
.sc-guide-controls  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sc-select { padding:8px 12px; border:1.5px solid var(--color-secondary); border-radius:var(--radius-md); font-size:13px; font-family:var(--font-body); color:#333; outline:none; background:#fff; cursor:pointer; }
.sc-select:focus { border-color:var(--color-primary); }
.sc-view-toggle { display:flex; gap:6px; }
.sc-toggle-btn { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1.5px solid var(--color-secondary); border-radius:var(--radius-md); padding:8px 16px; font-size:13px; font-family:var(--font-body); color:#555; cursor:pointer; transition:all 0.15s; }
.sc-toggle-btn.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.sc-toggle-btn:hover:not(.active) { border-color:var(--color-primary); color:var(--color-primary); }

/* ── WEATHER CARD ── */
.sc-weather-card { background:#fff; border-radius:var(--radius-2xl); border:1.5px solid var(--color-secondary); overflow:hidden; box-shadow:var(--shadow-md); transition:box-shadow 0.3s; }
.sc-weather-card:hover { box-shadow:var(--shadow-lg); }
.sc-weather-bg-sunny  { background:linear-gradient(135deg,#fffde7 0%,#fff9c4 40%,#fff 100%); }
.sc-weather-bg-cloudy { background:linear-gradient(135deg,#f5f5f5 0%,#eceff1 40%,#fff 100%); }
.sc-weather-bg-rain   { background:linear-gradient(135deg,#e3f2fd 0%,#e8eaf6 40%,#fff 100%); }
.sc-weather-bg-storm  { background:linear-gradient(135deg,#ede7f6 0%,#e8eaf6 40%,#fff 100%); }
.sc-weather-bg-night  { background:linear-gradient(135deg,#e8eaf6 0%,#ede7f6 40%,#fff 100%); }
.sc-weather-bg-cold   { background:linear-gradient(135deg,#e3f2fd 0%,#e0f7fa 40%,#fff 100%); }

.sc-weather-card-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 16px; border-bottom:1px solid var(--color-border-light); }
.sc-weather-card-title  { display:flex; align-items:center; gap:14px; }
.sc-weather-card-title > i { font-size:28px; color:var(--color-accent); filter:drop-shadow(0 2px 4px rgba(251,192,45,0.3)); }
.sc-weather-card-title h2 { font-family:var(--font-heading); font-size:18px; font-weight:700; color:var(--color-primary); margin-bottom:2px; }
.sc-weather-card-title p  { font-family:var(--font-body); font-size:12px; color:#888; }
.sc-weather-collapse-btn { background:#f5f5f5; border:none; width:32px; height:32px; border-radius:var(--radius-md); cursor:pointer; color:#888; font-size:13px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; }
.sc-weather-collapse-btn:hover { background:var(--color-border-light); color:var(--color-primary); }

/* ── SEARCH ── */
.sc-weather-search { padding:20px 24px 0; }
.sc-weather-search-row { display:flex; gap:10px; flex-wrap:wrap; }
.sc-weather-input-wrap { flex:1; min-width:200px; position:relative; }
.sc-weather-input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--color-secondary); font-size:15px; pointer-events:none; }
.sc-weather-input { width:100%; padding:12px 14px 12px 40px; border:1.5px solid var(--color-secondary); border-radius:var(--radius-lg); font-size:14px; font-family:var(--font-body); color:#333; outline:none; background:#f9fff7; transition:border-color 0.2s,box-shadow 0.2s; }
.sc-weather-input:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(46,125,50,0.1); background:#fff; }
.sc-weather-input::placeholder { color:#bbb; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.sc-input-shake { animation:shake 0.4s ease; border-color:#e53935 !important; }
.sc-weather-btn-check { display:inline-flex; align-items:center; gap:8px; background:var(--color-primary); color:#fff; border:none; padding:12px 22px; border-radius:var(--radius-lg); font-size:14px; font-weight:600; font-family:var(--font-body); cursor:pointer; transition:background 0.2s,transform 0.1s; white-space:nowrap; }
.sc-weather-btn-check:hover  { background:var(--color-primary-dark); }
.sc-weather-btn-check:active { transform:scale(0.97); }
.sc-weather-btn-check:disabled { opacity:0.6; cursor:not-allowed; }
.sc-weather-btn-locate { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--color-primary); border:1.5px solid var(--color-secondary); padding:12px 18px; border-radius:var(--radius-lg); font-size:14px; font-weight:600; font-family:var(--font-body); cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.sc-weather-btn-locate:hover   { background:var(--color-border-light); border-color:var(--color-primary); }
.sc-weather-btn-locate:disabled{ opacity:0.6; cursor:not-allowed; }
.sc-weather-hint { font-family:var(--font-body); font-size:11px; color:#aaa; margin-top:8px; display:flex; align-items:center; gap:5px; }

/* ── LOADING ── */
.sc-weather-loading { display:flex; flex-direction:column; align-items:center; gap:14px; padding:40px 24px; color:#888; font-family:var(--font-body); font-size:14px; }
.sc-weather-spinner { width:40px; height:40px; border:3px solid var(--color-border-light); border-top-color:var(--color-primary); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── ERROR ── */
.sc-weather-error { display:flex; align-items:center; gap:12px; margin:16px 24px; padding:14px 18px; background:#ffebee; border:1px solid #ffcdd2; border-radius:var(--radius-lg); font-family:var(--font-body); font-size:13px; color:#c62828; }
.sc-weather-error i { font-size:20px; flex-shrink:0; }
.sc-weather-error p { flex:1; margin:0; }
.sc-weather-btn-dismiss { background:none; border:1px solid #ef9a9a; color:#c62828; padding:4px 12px; border-radius:var(--radius-sm); font-size:12px; cursor:pointer; font-family:var(--font-body); white-space:nowrap; }

/* ── RESULT PANEL ── */
#weatherResult { padding:0 24px 24px; }
.sc-weather-location-bar { display:flex; align-items:center; justify-content:space-between; padding:16px 0 12px; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--color-primary); border-bottom:1px solid var(--color-border-light); margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.sc-weather-timestamp { font-size:11px; color:#aaa; font-weight:400; }

/* ── MAIN WEATHER DISPLAY ── */
.sc-weather-main { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; margin-bottom:24px; }
.sc-weather-visual { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:140px; background:rgba(46,125,50,0.04); border-radius:var(--radius-xl); padding:20px 24px; border:1px solid var(--color-border-light); }
.sc-weather-icon-img { width:72px; height:72px; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.15)); }
.sc-weather-temp-block { display:flex; align-items:flex-start; line-height:1; }
.sc-weather-temp { font-family:var(--font-heading); font-size:52px; font-weight:800; color:var(--color-primary); line-height:1; }
.sc-weather-unit { font-family:var(--font-heading); font-size:22px; font-weight:600; color:var(--color-primary-light); margin-top:8px; }
.sc-weather-condition { font-family:var(--font-body); font-size:14px; font-weight:600; color:#333; text-align:center; }
.sc-weather-feels { font-family:var(--font-body); font-size:12px; color:#888; text-align:center; }
.sc-weather-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sc-weather-stat { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--color-border-light); border-radius:var(--radius-lg); padding:14px 16px; transition:box-shadow 0.15s; }
.sc-weather-stat:hover { box-shadow:0 2px 8px rgba(46,125,50,0.08); }
.sc-weather-stat-icon { width:40px; height:40px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.sc-stat-rain     { background:#e3f2fd; color:#1565c0; }
.sc-stat-humidity { background:#e0f7fa; color:#00838f; }
.sc-stat-wind     { background:#f3e5f5; color:#6a1b9a; }
.sc-stat-temp     { background:#fff3e0; color:#e65100; }
.sc-weather-stat-info { display:flex; flex-direction:column; gap:2px; }
.sc-weather-stat-value { font-family:var(--font-heading); font-size:18px; font-weight:700; color:#222; line-height:1; }
.sc-weather-stat-label { font-family:var(--font-body); font-size:11px; color:#888; }

/* ── RECOMMENDATION BANNER ── */
.sc-recommendation { display:flex; align-items:flex-start; gap:16px; padding:20px 22px; border-radius:var(--radius-xl); margin-bottom:16px; border:1.5px solid transparent; transition:all 0.3s; }
.sc-rec-good    { background:var(--color-border-light); border-color:var(--color-secondary); }
.sc-rec-caution { background:#fff8e1; border-color:#ffe082; }
.sc-rec-bad     { background:#ffebee; border-color:#ffcdd2; }
.sc-rec-icon-wrap { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.sc-rec-icon-good    { background:var(--color-primary); color:#fff; box-shadow:0 4px 12px rgba(46,125,50,0.3); }
.sc-rec-icon-caution { background:var(--color-accent); color:#fff; box-shadow:0 4px 12px rgba(251,192,45,0.3); }
.sc-rec-icon-bad     { background:#e53935; color:#fff; box-shadow:0 4px 12px rgba(229,57,53,0.3); }
.sc-rec-content h3 { font-family:var(--font-heading); font-size:16px; font-weight:700; margin-bottom:4px; }
.sc-rec-good    .sc-rec-content h3 { color:var(--color-primary-dark); }
.sc-rec-caution .sc-rec-content h3 { color:#f57f17; }
.sc-rec-bad     .sc-rec-content h3 { color:#c62828; }
.sc-rec-content p { font-family:var(--font-body); font-size:13px; color:#555; margin:0; line-height:1.6; }

/* Reason pills */
.sc-rec-reasons { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.sc-rec-pill { font-family:var(--font-body); font-size:12px; color:#444; background:#f5f5f5; border:1px solid #e0e0e0; border-radius:var(--radius-2xl); padding:5px 12px; line-height:1.4; }

/* ── SUGGESTED CROPS ── */
.sc-crops-header { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  margin-bottom:14px; 
  gap:16px;
  flex-wrap:nowrap;
}
.sc-crops-header h3 { 
  font-family:var(--font-heading); 
  font-size:15px; 
  font-weight:700; 
  color:var(--color-primary); 
  display:flex; 
  align-items:center; 
  gap:8px;
  margin:0;
  flex-shrink:1;
  min-width:0;
}
.sc-crops-month { 
  font-family:var(--font-body); 
  font-size:12px; 
  color:#888; 
  background:#f5f5f5; 
  padding:4px 12px; 
  border-radius:var(--radius-2xl);
  white-space:nowrap;
  flex-shrink:0;
}
.sc-crops-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.sc-crop-card { display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid var(--color-border-light); border-radius:var(--radius-lg); padding:14px; transition:all 0.2s; cursor:default; }
.sc-crop-card:hover { border-color:var(--color-secondary); box-shadow:0 4px 12px rgba(46,125,50,0.1); transform:translateY(-2px); }
.sc-crop-card-icon { width:40px; height:40px; background:var(--color-border-light); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--color-primary); flex-shrink:0; }
.sc-crop-card-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sc-crop-card-name { font-family:var(--font-heading); font-size:13px; font-weight:600; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-crop-card-cat  { font-family:var(--font-body); font-size:11px; color:#888; }
.sc-crop-card-days { font-family:var(--font-body); font-size:10px; color:var(--color-primary-light); display:flex; align-items:center; gap:3px; }
.sc-no-crops { display:flex; align-items:center; gap:10px; padding:16px 18px; background:#f9fff7; border:1px solid var(--color-border-light); border-radius:var(--radius-lg); font-family:var(--font-body); font-size:13px; color:#888; }
.sc-no-crops i { color:var(--color-secondary); font-size:18px; flex-shrink:0; }

/* ── CALENDAR VIEW ── */
.sc-calendar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.sc-cal-card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:18px; transition:box-shadow 0.15s; position:relative; }
.sc-cal-card:hover { box-shadow:var(--shadow-md); }
.sc-cal-card.current { border-color:var(--color-primary-light); box-shadow:0 0 0 2px rgba(76,175,80,0.2); }
.sc-cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; }
.sc-cal-month { font-family:var(--font-heading); font-size:14px; font-weight:600; color:var(--color-primary); flex:1; min-width:0; }
.sc-cal-badges { 
  display:flex; 
  flex-direction:column; 
  gap:6px; 
  margin-bottom:12px;
  align-items:flex-start;
}
.sc-cal-season { 
  font-size:11px; 
  font-weight:500; 
  padding:3px 8px; 
  border-radius:var(--radius-2xl); 
  display:flex; 
  align-items:center; 
  gap:4px; 
  white-space:nowrap;
  width:fit-content;
}
.sc-cal-season.dry { background:#fff8e1; color:#f57f17; }
.sc-cal-season.wet { background:#e3f2fd; color:#1565c0; }
.sc-cal-crops { list-style:none; display:flex; flex-direction:column; gap:6px; }
.sc-cal-crops li { font-family:var(--font-body); font-size:12px; color:#444; padding:5px 10px; background:#f9fdf9; border-radius:var(--radius-sm); border:1px solid var(--color-border-light); display:flex; align-items:center; gap:6px; }
.sc-cal-empty { color:#bbb !important; font-style:italic; background:transparent !important; border-color:transparent !important; }
.sc-cal-now-badge { 
  font-family:var(--font-body); 
  font-size:10px; 
  font-weight:600; 
  color:var(--color-primary); 
  background:var(--color-border-light); 
  padding:3px 8px; 
  border-radius:var(--radius-2xl); 
  display:flex; 
  align-items:center; 
  gap:4px;
  width:fit-content;
}

/* ── LIST VIEW ── */
.sc-list-wrap { display:flex; flex-direction:column; gap:10px; }
.sc-list-row { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:16px 20px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.sc-list-row.current { border-color:var(--color-primary-light); box-shadow:0 0 0 2px rgba(76,175,80,0.2); }
.sc-list-month { display:flex; align-items:center; gap:10px; min-width:200px; }
.sc-list-num { font-family:var(--font-heading); font-size:13px; font-weight:700; color:#fff; background:var(--color-primary); width:32px; height:32px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sc-list-name { font-family:var(--font-heading); font-size:14px; font-weight:600; color:var(--color-primary); }
.sc-list-season { font-size:11px; font-weight:500; padding:3px 8px; border-radius:var(--radius-2xl); display:flex; align-items:center; gap:4px; }
.sc-list-season.dry { background:#fff8e1; color:#f57f17; }
.sc-list-season.wet { background:#e3f2fd; color:#1565c0; }
.sc-list-crops { flex:1; display:flex; flex-wrap:wrap; gap:8px; }
.sc-crop-tag { font-family:var(--font-body); font-size:12px; color:#444; background:#f9fdf9; border:1px solid var(--color-border-light); border-radius:var(--radius-sm); padding:4px 10px; display:inline-flex; align-items:center; gap:5px; }
.sc-list-empty { font-size:12px; color:#bbb; font-style:italic; }
.sc-now-badge { font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--color-primary); background:var(--color-border-light); padding:4px 12px; border-radius:var(--radius-2xl); flex-shrink:0; display:flex; align-items:center; gap:4px; }

/* ── RESPONSIVE ── */
@media (max-width:1100px) { .sc-calendar-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px)  {
  .sc-weather-main { grid-template-columns:1fr; }
  .sc-weather-visual { flex-direction:row; min-width:unset; padding:16px 20px; gap:16px; }
  .sc-weather-temp { font-size:40px; }
  .sc-calendar-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px)  {
  .sc-weather-stats { grid-template-columns:1fr 1fr; }
  .sc-crops-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .sc-list-month { min-width:unset; }
  .sc-weather-card-header { flex-wrap:wrap; gap:10px; }
}
@media (max-width:560px)  {
  .sc-weather-search-row { flex-direction:column; }
  .sc-weather-btn-check,
  .sc-weather-btn-locate { width:100%; justify-content:center; }
  .sc-locate-label { display:inline; }
  .sc-calendar-grid { grid-template-columns:1fr; }
  .sc-weather-visual { flex-direction:column; }
  .sc-weather-stats { grid-template-columns:1fr 1fr; }
}