/* ==========================================================================
   Kalender Tanam - Mekarsari Agro
   Mengikuti DESIGN.md: radius kecil, pemisah berupa border, tanpa animasi
   berulang, dan oranye hanya untuk tindakan menuju katalog.
   ========================================================================== */

.kalender-page main {
  padding-bottom: 3rem;
}

/* --- Hero ---------------------------------------------------------------- */

.kal-hero {
  background: var(--primary-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 2.5rem 0;
}

.kal-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.kal-hero h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  color: var(--text-main);
  margin: 0.75rem 0 0.75rem;
  line-height: 1.2;
}

.kal-hero p {
  color: var(--text-muted);
  max-width: 56ch;
  line-height: 1.65;
}

.kal-hero-note {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
}

.kal-hero-note h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.kal-hero-note p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.kal-hero-note p:last-child {
  margin-bottom: 0;
}

/* --- Panel pemilihan ----------------------------------------------------- */

.kal-panel {
  padding: 2rem 0 0;
}

.kal-panel-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.kal-panel-head {
  margin-bottom: 1.25rem;
}

.kal-panel-head h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.3rem;
}

.kal-panel-head p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.kal-lokasi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.kal-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.kal-field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}

.kal-field select,
.kal-field input[type="date"] {
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}

.kal-field select:hover,
.kal-field input[type="date"]:hover {
  border-color: var(--primary-light);
}

.kal-field select:focus-visible,
.kal-field input[type="date"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.kal-zona-ket {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  border-left: 3px solid var(--primary-light);
  padding-left: 0.75rem;
}

/* --- Filter kategori & pilihan komoditas --------------------------------- */

.kal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
}

.kal-pill {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

/* Hover hanya untuk perangkat yang benar-benar punya hover, dan tidak meniru
   tampilan pilihan aktif. */
@media (hover: hover) {
  .kal-pill:not(.active):hover {
    color: var(--primary-action);
    border-color: var(--primary-light);
  }
}

.kal-pill:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.kal-pill.active {
  color: var(--on-primary);
  background: var(--primary-action);
  border-color: var(--primary-action);
}

.kal-crop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.kal-crop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-height: 44px;
  padding: 0.85rem;
  text-align: left;
  font-family: inherit;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

@media (hover: hover) {
  .kal-crop:not(.active):hover { border-color: var(--primary-light); }
}

.kal-crop:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.kal-crop.active {
  border-color: var(--primary-action);
  background: var(--primary-bg);
}

.kal-crop-emoji {
  font-size: 1.35rem;
  line-height: 1;
}

.kal-crop-nama {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}

.kal-crop-umur {
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* --- Kondisi kosong ------------------------------------------------------ */

.kal-kosong {
  margin-top: 1.5rem;
  padding: 2rem 1.25rem;
  text-align: center;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.kal-kosong i {
  font-size: 1.75rem;
  color: var(--primary-light);
  margin-bottom: 0.6rem;
  display: block;
}

.kal-kosong p {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Hasil --------------------------------------------------------------- */

.kal-hasil {
  padding-top: 2rem;
  scroll-margin-top: 5rem;
}

.kal-hasil-head h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.kal-hasil-head p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 70ch;
  margin-bottom: 1.25rem;
}

.kal-status {
  border: 1px solid var(--border-color);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  background: var(--bg-surface);
  margin-bottom: 1.5rem;
}

.kal-status-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.kal-status strong {
  display: block;
  font-size: 1.1rem;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

.kal-status p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.kal-status.is-tanam {
  border-left-color: var(--primary-action);
  background: var(--primary-bg);
}

.kal-status.is-persiapan {
  border-left-color: var(--accent);
}

.kal-status.is-tunggu {
  border-left-color: var(--border-color);
}

/* --- Bar 12 bulan -------------------------------------------------------- */

.kal-kalender-card,
.kal-timeline-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.kal-card-head h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.kal-card-head p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

.kal-bar {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.25rem;
  overflow-x: auto;
}

.kal-bar-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem 0.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.kal-bar-col.is-hujan {
  background: var(--bg-body);
}

.kal-bar-col.is-now {
  border-color: var(--text-main);
}

.kal-bar-nama {
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
}

.kal-bar-col.is-now .kal-bar-nama {
  color: var(--text-main);
}

.kal-bar-slot {
  display: block;
  height: 14px;
  border-radius: 2px;
  border: 1px solid var(--border-color);
  background: transparent;
}

.kal-bar-tanam.is-aktif {
  background: var(--primary-action);
  border-color: var(--primary-action);
}

.kal-bar-panen.is-aktif {
  background: var(--primary-bg);
  border-color: var(--primary-action);
  border-style: dashed;
}

.kal-bar[data-panen="kosong"] .kal-bar-panen {
  display: none;
}

.kal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.kal-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.kal-legenda i {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--border-color);
  display: inline-block;
}

.kal-legenda .lg-tanam {
  background: var(--primary-action);
  border-color: var(--primary-action);
}

.kal-legenda .lg-panen {
  background: var(--primary-bg);
  border-color: var(--primary-action);
  border-style: dashed;
}

.kal-legenda .lg-hujan {
  background: var(--bg-body);
}

.kal-legenda .lg-now {
  background: transparent;
  border-color: var(--text-main);
}

.kal-jendela-list {
  list-style: none;
  margin-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.kal-jendela-list li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-color);
}

.kal-jendela-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.kal-jendela-list strong {
  font-size: 0.92rem;
  color: var(--text-main);
}

.kal-jendela-bulan {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-action);
  margin: 0.15rem 0 0.3rem;
}

.kal-jendela-list p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- Timeline fase ------------------------------------------------------- */

.kal-anchor {
  max-width: 320px;
  margin-bottom: 1.25rem;
}

.kal-timeline {
  list-style: none;
}

.kal-fase {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
}

.kal-fase:first-child {
  border-top: none;
  padding-top: 0;
}

.kal-fase.is-now .kal-fase-isi h4 {
  color: var(--primary-action);
}

.kal-fase-tanggal {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

.kal-fase-hst {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.kal-fase-isi h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.3rem;
}

.kal-fase-isi p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.kal-fase-nutrisi {
  margin-top: 0.4rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--primary-light);
}

.kal-fase-nutrisi i {
  color: var(--primary-light);
  margin-right: 0.3rem;
}

/* --- Tindakan lanjutan --------------------------------------------------- */

.kal-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.kal-aksi a,
.kal-aksi button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.kal-aksi a:hover,
.kal-aksi button:hover {
  border-color: var(--primary-light);
  background: var(--primary-bg);
}

.kal-aksi a:focus-visible,
.kal-aksi button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Oranye khusus tindakan menuju katalog, sesuai DESIGN.md. */
.kal-aksi .kal-aksi-katalog {
  background: var(--accent);
  border-color: var(--accent);
  color: #1f2937;
}

.kal-aksi .kal-aksi-katalog:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* --- Sumber & catatan ---------------------------------------------------- */

.kal-sumber {
  padding-top: 1rem;
}

.kal-sumber-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.kal-sumber-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.kal-sumber-card > p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.kal-sumber-list {
  list-style: none;
  border-top: 1px solid var(--border-color);
}

.kal-sumber-list li {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border-color);
}

.kal-sumber-list li:last-child {
  border-bottom: none;
}

.kal-sumber-list strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-main);
}

/* Tautan sumber berdiri sendiri, jadi tetap diberi tinggi sentuh 44 px. */
.kal-sumber-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--primary-action);
  font-size: 0.85rem;
  word-break: break-word;
}

.kal-sumber-list p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 0.15rem;
}

.kal-sumber-versi {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* --- Mobile: tata letak satu kolom --------------------------------------- */

@media (max-width: 900px) {
  .kal-hero-grid {
    grid-template-columns: 1fr;
  }

  .kal-fase {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

@media (max-width: 640px) {
  .kal-hero {
    padding: 1.75rem 0;
  }

  .kal-panel-card,
  .kal-kalender-card,
  .kal-timeline-card,
  .kal-sumber-card {
    padding: 1.15rem;
  }

  .kal-lokasi-grid {
    grid-template-columns: 1fr;
  }

  .kal-crop-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* Dua belas kolom terlalu sempit di ponsel, jadi kalender digulir mendatar. */
  .kal-bar {
    grid-template-columns: repeat(12, 46px);
    padding-bottom: 0.5rem;
  }

  .kal-aksi a,
  .kal-aksi button {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kal-pill,
  .kal-crop,
  .kal-field select,
  .kal-field input[type="date"],
  .kal-aksi a,
  .kal-aksi button {
    transition: none;
  }
}