/**
 * RHI Design System v1
 * Sumber token: RHI UI Foundation v0.2.1.
 * File ini menjadi fondasi visual tunggal seluruh Page RHI.
 */
:root{
  --rhi-ui-gold:#c58b16 !important;
  --rhi-ui-gold-dark:#8b5d16 !important;
  --rhi-ui-gold-soft:#f8edda !important;
  --rhi-ui-ink:#241f1a !important;
  --rhi-ui-muted:#716b64 !important;
  --rhi-ui-line:#e9dfcf !important;
  --rhi-ui-surface:#ffffff !important;
  --rhi-ui-canvas:#f6f4f0 !important;
  --rhi-ui-green:#20ad5f !important;
  --rhi-ui-blue:#3295df !important;
  --rhi-ui-danger:#b83a3a !important;
  --rhi-ui-shadow:0 16px 42px rgba(80,59,28,.10) !important;
  --rhi-ui-shadow-soft:0 8px 24px rgba(61,48,28,.08) !important;
  --rhi-ui-radius-xl:30px !important;
  --rhi-ui-radius-lg:22px !important;
  --rhi-ui-radius-md:16px !important;
  --rhi-ui-radius-sm:12px !important;
  --rhi-ui-content:1280px !important;
  --rhi-ui-space-1:4px !important;
  --rhi-ui-space-2:8px !important;
  --rhi-ui-space-3:12px !important;
  --rhi-ui-space-4:16px !important;
  --rhi-ui-space-5:20px !important;
  --rhi-ui-space-6:24px !important;
  --rhi-ui-space-8:32px !important;
  --rhi-ui-space-10:40px !important;
  --rhi-ui-space-12:48px !important;

  /* Alias kompatibilitas untuk empat halaman Page RHI yang sudah final. */
  --rhi-gold:var(--rhi-ui-gold) !important;
  --rhi-gold-2:#d6a027 !important;
  --rhi-gold-dark:var(--rhi-ui-gold-dark) !important;
  --rhi-ink:var(--rhi-ui-ink) !important;
  --rhi-muted:var(--rhi-ui-muted) !important;
  --rhi-canvas:var(--rhi-ui-canvas) !important;
  --rhi-card:var(--rhi-ui-surface) !important;
  --rhi-line:var(--rhi-ui-line) !important;
  --rhi-error:var(--rhi-ui-danger) !important;
  --rhi-success:#126d3c !important;
  --rhi-radius:var(--rhi-ui-radius-xl) !important;
  --rhi-shadow:var(--rhi-ui-shadow) !important;
}

html,body,button,input,select,textarea{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
html,body,.rhi-page-root{background-color:var(--rhi-ui-canvas)}

/* Fondasi reusable untuk seluruh halaman aplikasi berikutnya. */
.rhi-ui-page{min-height:100svh;color:var(--rhi-ui-ink);background:var(--rhi-ui-canvas)}
.rhi-ui-container{width:min(var(--rhi-ui-content),calc(100% - 32px));margin-inline:auto}
.rhi-ui-section{padding-block:clamp(20px,3vw,40px)}
.rhi-ui-card{min-width:0;padding:clamp(16px,2vw,24px);border:1px solid var(--rhi-ui-line);border-radius:var(--rhi-ui-radius-lg);background:var(--rhi-ui-surface);box-shadow:var(--rhi-ui-shadow-soft)}
.rhi-ui-card-soft{background:linear-gradient(135deg,#fffdf9,var(--rhi-ui-gold-soft))}
.rhi-ui-grid{display:grid;gap:var(--rhi-ui-space-4);min-width:0}
.rhi-ui-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rhi-ui-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rhi-ui-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rhi-ui-stack{display:flex;flex-direction:column;gap:var(--rhi-ui-space-4);min-width:0}
.rhi-ui-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rhi-ui-space-3);min-width:0}
.rhi-ui-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 18px;border:0;border-radius:var(--rhi-ui-radius-md);font-weight:800;text-decoration:none;cursor:pointer}
.rhi-ui-button-primary{color:#fff;background:linear-gradient(135deg,#d6a027,#a86a08);box-shadow:var(--rhi-ui-shadow-soft)}
.rhi-ui-button-secondary{color:var(--rhi-ui-gold-dark);border:1px solid var(--rhi-ui-line);background:var(--rhi-ui-surface)}
.rhi-ui-muted{color:var(--rhi-ui-muted)}
.rhi-ui-gold{color:var(--rhi-ui-gold-dark)}

@media(max-width:1024px){
  .rhi-ui-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rhi-ui-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .rhi-ui-container{width:min(var(--rhi-ui-content),calc(100% - 24px))}
  .rhi-ui-grid-2,.rhi-ui-grid-3,.rhi-ui-grid-4{grid-template-columns:1fr}
  .rhi-ui-card{border-radius:var(--rhi-ui-radius-md)}
}

/* Sinkronisasi komponen empat halaman final dengan palet resmi. */
.rhi-auth-button,
.rhi-system-button--primary,
.rhi-system-button--primary:visited{
  color:#fff !important;
  background:linear-gradient(135deg,#d6a027,#a86a08) !important;
}
.rhi-auth-link,
.rhi-system-button--secondary,
.rhi-system-button--secondary:visited{
  color:var(--rhi-ui-gold-dark) !important;
}
.rhi-system-button--secondary,
.rhi-system-button--secondary:visited{
  border-color:var(--rhi-ui-gold) !important;
  background:var(--rhi-ui-surface) !important;
}


/* v0.2.9: password toggle isolation for front-page gateway/theme coexistence. */
body.page-rhi-view .rhi-page-root .rhi-input-wrap > button.rhi-auth-toggle{
  -webkit-appearance:none!important;appearance:none!important;
  position:absolute!important;left:auto!important;right:9px!important;top:50%!important;bottom:auto!important;
  display:grid!important;place-items:center!important;float:none!important;
  width:42px!important;min-width:42px!important;max-width:42px!important;
  height:42px!important;min-height:42px!important;max-height:42px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;
  background:transparent!important;background-image:none!important;box-shadow:none!important;
  transform:translateY(-50%)!important;line-height:1!important;overflow:hidden!important;z-index:5!important;
}
body.page-rhi-view .rhi-page-root .rhi-input-wrap > button.rhi-auth-toggle:hover,
body.page-rhi-view .rhi-page-root .rhi-input-wrap > button.rhi-auth-toggle:focus{background:#f6f1e7!important;box-shadow:none!important;outline:none!important}
body.page-rhi-view .rhi-page-root .rhi-input-wrap > button.rhi-auth-toggle::before,
body.page-rhi-view .rhi-page-root .rhi-input-wrap > button.rhi-auth-toggle::after{display:none!important;content:none!important}
body.page-rhi-view .rhi-page-root .rhi-input-wrap > button.rhi-auth-toggle img{display:block!important;width:22px!important;height:22px!important;margin:0!important;padding:0!important;object-fit:contain!important;filter:none!important}


/* v0.2.10: tablet panel balance + consistent input text alignment. */
body.page-rhi-view .rhi-page-root .rhi-input-wrap > input,
body.page-rhi-view .rhi-page-root .rhi-input-wrap > input[type="text"],
body.page-rhi-view .rhi-page-root .rhi-input-wrap > input[type="email"],
body.page-rhi-view .rhi-page-root .rhi-input-wrap > input[type="password"]{
  text-align:left!important;
  direction:ltr!important;
  text-indent:0!important;
}
body.page-rhi-view .rhi-page-root .rhi-input-wrap > input::placeholder{
  text-align:left!important;
  direction:ltr!important;
  opacity:1!important;
}
@media (min-width:768px) and (max-width:1180px){
  body.page-rhi-view .rhi-page-root .rhi-auth-panel{
    background:linear-gradient(160deg,#ffffff 0%,#fffdf9 100%)!important;
    background-image:linear-gradient(160deg,#ffffff 0%,#fffdf9 100%)!important;
    background-position:center!important;
    background-size:100% 100%!important;
  }
  body.page-rhi-view .rhi-page-root .rhi-auth-card{
    max-width:520px!important;
    margin-inline:auto!important;
  }
}


/* v0.2.11: complete form-field isolation from Elementor/theme CSS. */
body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-field{
  display:grid!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > input,
body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > input[type="text"],
body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > input[type="email"],
body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > input[type="password"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  position:relative!important;
  display:block!important;
  float:none!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:58px!important;
  height:auto!important;
  margin:0!important;
  padding-top:15px!important;
  padding-right:52px!important;
  padding-bottom:15px!important;
  padding-left:52px!important;
  border:1px solid var(--rhi-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  background-image:none!important;
  color:var(--rhi-ink)!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:16px!important;
  font-weight:400!important;
  font-style:normal!important;
  line-height:1.4!important;
  letter-spacing:normal!important;
  text-align:left!important;
  text-indent:0!important;
  direction:ltr!important;
  white-space:normal!important;
  box-shadow:none!important;
  outline:none!important;
}
body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > input::placeholder{
  color:#aaa39a!important;
  font:inherit!important;
  font-weight:400!important;
  line-height:inherit!important;
  letter-spacing:normal!important;
  text-align:left!important;
  text-indent:0!important;
  direction:ltr!important;
  opacity:1!important;
}
body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > input:focus{
  border-color:#c69735!important;
  background:#fffefb!important;
  box-shadow:0 0 0 4px rgba(198,151,53,.13)!important;
}
body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > .rhi-field-icon{
  position:absolute!important;
  left:17px!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  display:block!important;
  width:21px!important;
  min-width:21px!important;
  max-width:21px!important;
  height:21px!important;
  min-height:21px!important;
  max-height:21px!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  line-height:1!important;
  pointer-events:none!important;
  z-index:4!important;
}
body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > .rhi-field-icon > img{
  display:block!important;
  width:21px!important;
  height:21px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
}
@media(max-width:767px){
  body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > input,
  body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > input[type="text"],
  body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > input[type="email"],
  body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > input[type="password"]{
    min-height:57px!important;
    padding-left:48px!important;
    padding-right:48px!important;
    font-size:15px!important;
  }
  body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > .rhi-field-icon{
    left:16px!important;
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:20px!important;
    min-height:20px!important;
    max-height:20px!important;
  }
  body.page-rhi-view .rhi-page-root .rhi-auth-form .rhi-input-wrap > .rhi-field-icon > img{
    width:20px!important;
    height:20px!important;
  }
}

/* v0.2.49 — Help Center entry and login submit state. */
.rhi-auth-help-center{display:grid;gap:5px;margin-top:16px;padding:14px 16px;border:1px solid rgba(184,132,22,.18);border-radius:14px;background:#fbf7ef;text-align:center;color:#6d6255;font-size:13px;line-height:1.5}
.rhi-auth-help-center>span{font-weight:600}
.rhi-auth-help-center .rhi-auth-link{font-weight:800}
.rhi-auth-button[aria-busy="true"],.rhi-auth-button:disabled{cursor:wait;opacity:.72;pointer-events:none}