/* ============================================================
   Greeny – Palette Stylesheet (auto-generated)
   Forces the brand palette across ALL pages, light + dark.
   Monochromatic Sage Green: #DCE6D7 #BFCFBB #8EA58C #738A6E #344C3D
   ============================================================ */

.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;}
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}

/* base surfaces */
body{background-color:#F1F4ED;color:#2A352A;}

/* ---- LIGHT utilities ---- */
.bg-primary{background-color:#4F6B54!important;}
.text-primary{color:#4F6B54!important;}
.border-primary{border-color:#4F6B54!important;}
.ring-primary{--tw-ring-color:#4F6B54!important;}
.text-on-primary{color:#ffffff!important;}
.bg-on-primary{background-color:#ffffff!important;}
.bg-primary-container{background-color:#BFCFBB!important;}
.text-on-primary-container{color:#344C3D!important;}
.text-primary-container{color:#4F6B54!important;}
.border-primary-container{border-color:#4F6B54!important;}
.bg-background{background-color:#F1F4ED!important;}
.text-on-background{color:#2A352A!important;}
.border-background{border-color:#F1F4ED!important;}
.bg-surface{background-color:#F1F4ED!important;}
.border-surface{border-color:#F1F4ED!important;}
.text-surface{color:#F1F4ED!important;}
.bg-surface-bright{background-color:#F7FAF4!important;}
.bg-surface-dim{background-color:#D9E2D2!important;}
.bg-surface-container-lowest{background-color:#ffffff!important;}
.bg-surface-container-low{background-color:#EBF0E6!important;}
.bg-surface-container{background-color:#E2EADC!important;}
.text-surface-container{color:#E2EADC!important;}
.bg-surface-container-high{background-color:#D8E2D1!important;}
.text-surface-container-high{color:#D8E2D1!important;}
.bg-surface-container-highest{background-color:#CDD9C5!important;}
.bg-surface-variant{background-color:#DCE5D6!important;}
.text-on-surface{color:#2A352A!important;}
.bg-on-surface{background-color:#2A352A!important;}
.text-on-surface-variant{color:#54624F!important;}
.border-outline-variant{border-color:#BFCFBB!important;}
.bg-outline-variant{background-color:#BFCFBB!important;}
.divide-outline-variant{border-color:#BFCFBB!important;}
.border-outline{border-color:#738A6E!important;}
.text-outline{color:#738A6E!important;}
.border-secondary{border-color:#6E8A72!important;}
.bg-secondary-fixed{background-color:#D2DECB!important;}
.bg-secondary-fixed-dim{background-color:#BFCFBB!important;}
.from-primary{--tw-gradient-from:#4F6B54 var(--tw-gradient-from-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0)) var(--tw-gradient-to-position)!important;}
.to-primary{--tw-gradient-to:#4F6B54 var(--tw-gradient-to-position)!important;}
.border-outline-variant\/30{border-color:rgba(191,207,187,0.3)!important;}
.border-outline-variant\/20{border-color:rgba(191,207,187,0.2)!important;}
.border-outline-variant\/50{border-color:rgba(191,207,187,0.5)!important;}
.bg-primary\/10{background-color:rgba(79,107,84,0.1)!important;}
.bg-primary\/20{background-color:rgba(79,107,84,0.2)!important;}
.bg-primary\/5{background-color:rgba(79,107,84,0.05)!important;}
.bg-primary\/80{background-color:rgba(79,107,84,0.8)!important;}
.bg-surface-container-high\/50{background-color:rgba(216,226,209,0.5)!important;}
.bg-primary-container\/30{background-color:rgba(191,207,187,0.3)!important;}
.bg-primary-container\/80{background-color:rgba(191,207,187,0.8)!important;}
.bg-primary-container\/20{background-color:rgba(191,207,187,0.2)!important;}
.text-primary\/40{color:rgba(79,107,84,0.4)!important;}
.text-primary\/50{color:rgba(79,107,84,0.5)!important;}
.bg-surface\/80{background-color:rgba(241,244,237,0.8)!important;}
.bg-surface\/90{background-color:rgba(241,244,237,0.9)!important;}
.bg-surface-container\/30{background-color:rgba(226,234,220,0.3)!important;}
.bg-surface-container\/70{background-color:rgba(226,234,220,0.7)!important;}
.bg-surface-container\/50{background-color:rgba(226,234,220,0.5)!important;}
.border-primary\/50{border-color:rgba(79,107,84,0.5)!important;}
.border-primary\/20{border-color:rgba(79,107,84,0.2)!important;}
.bg-outline-variant\/30{background-color:rgba(191,207,187,0.3)!important;}
.text-on-surface-variant\/40{color:rgba(84,98,79,0.4)!important;}
.text-on-surface-variant\/30{color:rgba(84,98,79,0.3)!important;}
.ring-primary\/20{--tw-ring-color:rgba(79,107,84,0.2)!important;}
.from-primary\/20{--tw-gradient-from:rgba(79,107,84,0.2) var(--tw-gradient-from-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0)) var(--tw-gradient-to-position)!important;}
.from-primary\/10{--tw-gradient-from:rgba(79,107,84,0.1) var(--tw-gradient-from-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0)) var(--tw-gradient-to-position)!important;}
.to-primary\/60{--tw-gradient-to:rgba(79,107,84,0.6) var(--tw-gradient-to-position)!important;}
.to-primary\/5{--tw-gradient-to:rgba(79,107,84,0.05) var(--tw-gradient-to-position)!important;}
.bg-surface-container-highest\/20{background-color:rgba(205,217,197,0.2)!important;}

/* structural – light */
header{background-color:rgba(241,244,237,.85)!important;border-color:rgba(191,207,187,.6)!important;}
footer{background-color:#CDD9C5!important;}
aside{background-color:#F1F4ED!important;border-color:rgba(191,207,187,.6)!important;}
input,textarea,select{background-color:#EBF0E6;color:#2A352A;border-color:#BFCFBB;}
/* Dropdown <select> + <option>: kontras terbaca di dark mode (opsi native tak distyle -> gelap-di-gelap) */
html.dark select{background-color:#101712;color:#DCE6D7;border-color:#2A3A2D;}
select option{background-color:#EBF0E6;color:#2A352A;}
html.dark select option{background-color:#1C261E;color:#DCE6D7;}
.glass-panel{background:rgba(241,244,237,.7)!important;border-color:rgba(191,207,187,.5)!important;}
.glass-card{background:rgba(255,255,255,.65)!important;border-color:rgba(191,207,187,.4)!important;}
.cat-tab.active{background:#4F6B54;color:#F1F4ED;}
.bar-label{color:#54624F;}

/* ============================ DARK MODE ============================ */
html.dark{color-scheme:dark;}
html.dark body{background-color:#131A14!important;color:#DCE6D7!important;}

/* ---- DARK utilities ---- */
html.dark .bg-primary{background-color:#5C7460!important;}
html.dark .text-primary{color:#8EA58C!important;}
html.dark .border-primary{border-color:#5C7460!important;}
html.dark .ring-primary{--tw-ring-color:#8EA58C!important;}
html.dark .text-on-primary{color:#FFFFFF!important;}
html.dark .bg-on-primary{background-color:#DCE6D7!important;}
html.dark .bg-primary-container{background-color:#344C3D!important;}
html.dark .text-on-primary-container{color:#DCE6D7!important;}
html.dark .text-primary-container{color:#8EA58C!important;}
html.dark .border-primary-container{border-color:#4F6B54!important;}
html.dark .bg-background{background-color:#18211A!important;}
html.dark .text-on-background{color:#DCE6D7!important;}
html.dark .border-background{border-color:#18211A!important;}
html.dark .bg-surface{background-color:#18211A!important;}
html.dark .border-surface{border-color:#18211A!important;}
html.dark .text-surface{color:#18211A!important;}
html.dark .bg-surface-bright{background-color:#1F2A21!important;}
html.dark .bg-surface-dim{background-color:#0F1611!important;}
html.dark .bg-surface-container-lowest{background-color:#101712!important;}
html.dark .bg-surface-container-low{background-color:#1C261E!important;}
html.dark .bg-surface-container{background-color:#212C23!important;}
html.dark .text-surface-container{color:#212C23!important;}
html.dark .bg-surface-container-high{background-color:#2A3A2D!important;}
html.dark .text-surface-container-high{color:#2A3A2D!important;}
html.dark .bg-surface-container-highest{background-color:#344C3D!important;}
html.dark .bg-surface-variant{background-color:#2A3A2D!important;}
html.dark .text-on-surface{color:#DCE6D7!important;}
html.dark .bg-on-surface{background-color:#DCE6D7!important;}
html.dark .text-on-surface-variant{color:#AEC0A9!important;}
html.dark .border-outline-variant{border-color:#3A4A3C!important;}
html.dark .bg-outline-variant{background-color:#3A4A3C!important;}
html.dark .divide-outline-variant{border-color:#3A4A3C!important;}
html.dark .border-outline{border-color:#5C7460!important;}
html.dark .text-outline{color:#8EA58C!important;}
html.dark .border-secondary{border-color:#4A6350!important;}
html.dark .bg-secondary-fixed{background-color:#2A3A2D!important;}
html.dark .bg-secondary-fixed-dim{background-color:#344C3D!important;}
html.dark .from-primary{--tw-gradient-from:#5C7460 var(--tw-gradient-from-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0)) var(--tw-gradient-to-position)!important;}
html.dark .to-primary{--tw-gradient-to:#5C7460 var(--tw-gradient-to-position)!important;}
html.dark .border-outline-variant\/30{border-color:rgba(58,74,60,0.3)!important;}
html.dark .border-outline-variant\/20{border-color:rgba(58,74,60,0.2)!important;}
html.dark .border-outline-variant\/50{border-color:rgba(58,74,60,0.5)!important;}
html.dark .bg-primary\/10{background-color:rgba(92,116,96,0.1)!important;}
html.dark .bg-primary\/20{background-color:rgba(92,116,96,0.2)!important;}
html.dark .bg-primary\/5{background-color:rgba(92,116,96,0.05)!important;}
html.dark .bg-primary\/80{background-color:rgba(92,116,96,0.8)!important;}
html.dark .bg-surface-container-high\/50{background-color:rgba(42,58,45,0.5)!important;}
html.dark .bg-primary-container\/30{background-color:rgba(52,76,61,0.3)!important;}
html.dark .bg-primary-container\/80{background-color:rgba(52,76,61,0.8)!important;}
html.dark .bg-primary-container\/20{background-color:rgba(52,76,61,0.2)!important;}
html.dark .text-primary\/40{color:rgba(142,165,140,0.4)!important;}
html.dark .text-primary\/50{color:rgba(142,165,140,0.5)!important;}
html.dark .bg-surface\/80{background-color:rgba(24,33,26,0.8)!important;}
html.dark .bg-surface\/90{background-color:rgba(24,33,26,0.9)!important;}
html.dark .bg-surface-container\/30{background-color:rgba(33,44,35,0.3)!important;}
html.dark .bg-surface-container\/70{background-color:rgba(33,44,35,0.7)!important;}
html.dark .bg-surface-container\/50{background-color:rgba(33,44,35,0.5)!important;}
html.dark .border-primary\/50{border-color:rgba(92,116,96,0.5)!important;}
html.dark .border-primary\/20{border-color:rgba(92,116,96,0.2)!important;}
html.dark .bg-outline-variant\/30{background-color:rgba(58,74,60,0.3)!important;}
html.dark .text-on-surface-variant\/40{color:rgba(174,192,169,0.4)!important;}
html.dark .text-on-surface-variant\/30{color:rgba(174,192,169,0.3)!important;}
html.dark .ring-primary\/20{--tw-ring-color:rgba(142,165,140,0.2)!important;}
html.dark .from-primary\/20{--tw-gradient-from:rgba(92,116,96,0.2) var(--tw-gradient-from-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0)) var(--tw-gradient-to-position)!important;}
html.dark .from-primary\/10{--tw-gradient-from:rgba(92,116,96,0.1) var(--tw-gradient-from-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0)) var(--tw-gradient-to-position)!important;}
html.dark .to-primary\/60{--tw-gradient-to:rgba(92,116,96,0.6) var(--tw-gradient-to-position)!important;}
html.dark .to-primary\/5{--tw-gradient-to:rgba(92,116,96,0.05) var(--tw-gradient-to-position)!important;}
html.dark .bg-surface-container-highest\/20{background-color:rgba(52,76,61,0.2)!important;}

/* structural – dark */
html.dark header{background-color:rgba(24,33,26,.9)!important;border-color:rgba(58,74,60,.5)!important;}
html.dark footer{background-color:#212C23!important;}
html.dark aside{background-color:#141B16!important;border-color:rgba(58,74,60,.5)!important;}
html.dark input,html.dark textarea,html.dark select{background-color:#1C261E!important;color:#DCE6D7!important;border-color:#3A4A3C!important;}
html.dark .glass-panel{background:rgba(24,33,26,.7)!important;border-color:rgba(58,74,60,.45)!important;}
html.dark .glass-card{background:rgba(33,44,35,.6)!important;border-color:rgba(58,74,60,.35)!important;}
html.dark .cat-tab.active{background:#8EA58C;color:#131A14;}
html.dark .bar-label{color:#AEC0A9!important;}
html.dark .hover\:bg-surface-container-high\/50:hover{background-color:rgba(42,58,45,.5)!important;}
html.dark .hover\:bg-surface-container-high:hover{background-color:#2A3A2D!important;}

/* ── Mobile (≤767px): keterbacaan & navigasi ── */
@media (max-width:767px){
  /* halaman tak boleh melebar horizontal */
  body{overflow-x:clip;}
  /* tabel lebar (seller/admin/profil) digeser di tempat, bukan melebarkan halaman */
  main table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%;}
  /* iOS auto-zoom saat fokus input kalau font <16px — matikan */
  input,select,textarea{font-size:16px!important;}
  /* judul hero jangan kegedean */
  h1{overflow-wrap:anywhere;}
  /* tombol & baris aksi panjang boleh turun baris */
  .flex.gap-3>button,.flex.gap-2>button{min-width:0;}
}

/* ---- FIX ikon toggle tema dobel ----
   tailwind.css hasil compile memakai varian dark: berbasis media (prefers-color-scheme),
   padahal situs pakai dark berbasis class di <html>. Paksa perilaku class-based: */
html:not(.dark) .dark\:block{display:none!important}
html:not(.dark) .dark\:inline{display:none!important}
html:not(.dark) .dark\:flex{display:none!important}
html.dark .dark\:hidden{display:none!important}
html.dark .dark\:block{display:block!important}
html.dark .dark\:inline{display:inline!important}
html.dark .dark\:flex{display:flex!important}