/* ================================
   TOKENS / ROOT
==================================*/
:root{
  --warungsayur-primary: #198754;        /* Bootstrap 'success' */
  --warungsayur-primary-600: #157347;
  --navbar-h: 56px;                 /* tinggi navbar */
}
@media (min-width: 992px){
  :root{ --navbar-h: 64px; }
}

/* ================================
   GLOBAL / BASE
==================================*/
html{ font-size:16px; }
@media (max-width:575.98px){ html{ font-size:15px; } }

body{
  background:#f6faf7;
  overflow-x:hidden;
  margin-top:0 !important;
  padding-top:0 !important;         /* hindari padding dobel saat nav fixed */
}
.muted{ color: color-mix(in oklab, CanvasText 60%, Canvas 40%); }

/* ================================
   LAYOUT KONTEN (TANPA SIDEBAR)
==================================*/
/* Fallback default (browser lama yg belum support :has) */
.content{
  padding-top:.75rem;
  margin-left:0;
  padding-bottom:48px;
  padding-left:.875rem;
  padding-right:.875rem;
}

/* Jika navbar fixed-top → tambahkan padding setinggi nav */
body:has(nav.navbar.fixed-top) .content{
  padding-top: calc(var(--navbar-h) + .75rem);
}

/* Responsif padding konten */
@media (min-width:768px){
  .content{ padding-left:1rem; padding-right:1rem; }
}
@media (min-width:1200px){
  .content{ padding-left:1.25rem; padding-right:1.25rem; }
}

/* ================================
   KOMPONEN
==================================*/
.brand-badge{
  letter-spacing:.5px;
  background:rgba(25,135,84,.12);
  color:var(--warungsayur-primary);
  padding:.35rem .6rem;
  border-radius:.75rem;
  font-weight:600;
}

/* Card & header */
.card{ border-radius:.75rem; }
.card-farm{ border:1px solid rgba(0,0,0,.06); }
.card .card-header{ border-bottom:1px solid var(--bs-border-color); }

/* Headings */
h1,.h1{ font-size:clamp(1.25rem, 2.2vw + .6rem, 2rem); }
h2,.h2{ font-size:clamp(1.1rem, 1.7vw + .55rem, 1.5rem); }
.display-6 i{ line-height:1; }

/* Charts min-height */
#chartPanen,#chartRevenue,#chartKomoditas{ min-height:180px; }

/* Tables: scroll aman di mobile */
.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:12px;
  border:1px solid var(--bs-border-color);
  background:Canvas;
}

/* Grid kartu dashboard */
.cards-grid{ display:grid; gap:.75rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:576px){ .cards-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:768px){ .cards-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1200px){ .cards-grid{ grid-template-columns:repeat(6,1fr); } }

/* Grid form responsif */
.form-grid{ display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width:576px){ .form-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .form-grid{ grid-template-columns:repeat(3,1fr); } }

/* ================================
   UTIL
==================================*/
.overflow-hidden{ overflow:hidden !important; }

.btn-ghost{
  background:transparent;
  border:1px solid var(--bs-border-color);
  color: color-mix(in oklab, CanvasText 70%, Canvas 30%);
  border-radius:12px;
  padding:.45rem .7rem;
}
.btn-ghost:hover{ background: color-mix(in oklab, Canvas 88%, CanvasText 12%); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ================================
   ROUTER / ANTI FLASH
==================================*/
#app{
  background:#f6faf7;              /* sama seperti body */
  min-height:60vh;
  position:relative;                /* untuk skeleton/overlay */
  opacity:1;                        /* pastikan terlihat */
  visibility:visible;
}

.app-fade{
  transition:opacity .18s ease;
  opacity:1;                       /* default terlihat */
}
.app-fade.is-loading{
  opacity:0;                       /* hanya saat loading disembunyikan */
}

/* veil ringan saat transisi (opsional) */
.route-skel{
  background:rgba(246,250,247,.75);
  animation: skfade .18s ease;
}
@keyframes skfade{ from{opacity:0} to{opacity:1} }

/* ================================
   DETAIL BUDIDAYA POLISH
==================================*/
.bg-hero{
  background:linear-gradient(180deg, rgba(25,135,84,.05), rgba(25,135,84,.02));
  border:1px solid var(--bs-border-color);
  border-radius:12px;
}
.status-pill{ display:flex; align-items:center; gap:.5rem; }
.status-pill .badge{ font-weight:700; letter-spacing:.3px; }

.card-soft{ border-radius:14px; }
.card-elevate{ box-shadow:0 6px 20px rgba(0,0,0,.06); }
.card-elevate:hover{ box-shadow:0 10px 28px rgba(0,0,0,.08); }

.side-sticky{ position:sticky; top:calc(var(--navbar-h) + 32px); }
@media (max-width:991.98px){ .side-sticky{ position:static; top:auto; } }

.meta-chips .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .65rem; border:1px solid var(--bs-border-color);
  border-radius:999px; background:#fff; font-size:.85rem;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
}

.info-box{
  border:1px solid var(--bs-border-color);
  border-radius:12px; padding:1rem;
  background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
}
.label{ font-size:.78rem; color:var(--bs-secondary-color); }
.value{ font-weight:600; color:var(--bs-emphasis-color); }

.info-kv{ border-radius:10px; padding:.5rem 0; }
.info-kv .k{ font-size:.78rem; color:var(--bs-secondary-color); }
.info-kv .v{ font-weight:600; }

.badge-status{
  text-transform:uppercase; padding:.5rem .7rem; border-radius:.8rem;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
}
.badge-status.tanam{   background: color-mix(in oklab, #198754 20%, white); color:#0f5132; }
.badge-status.panen{   background: color-mix(in oklab, #198754 25%, white); color:#0f5132; }
.badge-status.selesai{ background: var(--bs-secondary); color:#fff; }

.card-soft hr{
  opacity:.25; margin:1.25rem 0;
  border-top:1px solid var(--bs-border-color);
}

#bd-title{ letter-spacing:.2px; }

.form-label{ cursor:pointer; }
.hint-bubble{
  position:absolute; z-index:10; top:-6px; right:8px;
  transform:translateY(-100%) scale(.98); opacity:0;
  background:#fff; border:1px solid var(--bs-border-color);
  border-radius:.5rem; padding:.25rem .5rem; font-size:.8rem;
  color:var(--bs-emphasis-color); box-shadow:0 6px 24px rgba(0,0,0,.06);
  transition:opacity .16s ease, transform .16s ease; pointer-events:none;
}
.hint-bubble.show{ opacity:1; transform:translateY(-110%) scale(1); }

.toolbar .col-lg-4,.toolbar .col-lg-3,.toolbar .col-md-6,.toolbar .col-md-2{ position:relative; }

.table-fader{ transition:opacity .18s ease; }
.table-fader.is-fading{ opacity:0; }

@keyframes rowFlash{ 0%{background:#fff8d6;} 100%{background:transparent;} }
.row-highlight{ animation:rowFlash 1.2s ease forwards; }

#formBudidaya .form-label{ font-weight:500; }
#formBudidaya .form-control, #formBudidaya .form-select{ border-radius:.65rem; }

.status-pill .badge-status{ font-weight:700; letter-spacing:.4px; }

.status-lg .badge-status{
  font-size:1rem; padding:.6rem .9rem; border-radius:1rem;
}
@media (min-width:992px){
  .status-lg .badge-status{ font-size:1.000rem; }
}

/* Brand di navbar */
.navbar .brand-title{
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  line-height:1.1;
}
.navbar .brand-sub{
  font-size:.75rem;
  letter-spacing:.2px;
}

/* Variasi aksen hijau tipis di desktop */
@media (min-width:992px){
  .navbar .brand-title{
    position:relative;
    padding-right:.25rem;
  }
  .navbar .brand-title::after{
    content:"";
    position:absolute;
    right:-.4rem; bottom:-.15rem; left:0;
    height:2px;
    background:linear-gradient(90deg,#198754 0%, rgba(25,135,84,.15) 100%);
    border-radius:2px;
  }
}


  /* elevasi & layering, yang aktif selalu di atas */
  .cat-dd-company { z-index: 1060; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
  .cat-dd-image   { z-index: 1061; box-shadow: 0 8px 24px rgba(0,0,0,.1); }