/* Tema Oyi untuk halaman web Frappe (login, lupa password, portal). Selaras dengan login OPS/SCM/FNA. */

@font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 300 800;
  src: url(../fonts/open-sans-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-display: swap; font-weight: 300 800;
  src: url(../fonts/open-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(../fonts/fredoka-latin-wght-normal.woff2) format('woff2'); }

:root, [data-theme=light] {
  --oyi-paper: #f8f9fa; --oyi-line: #e3e6ea; --oyi-line-strong: #cdd2d8; --oyi-ink: #202124; --oyi-muted: #5f6368;
  --oyi-green: #3c7a2a; --oyi-green-strong: #2d5e1f; --oyi-ring: 0 0 0 3px rgba(60, 122, 42, .3);
  --oyi-shadow-pop: 0 18px 40px -20px rgba(32, 33, 36, .35);
  --font-stack: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --primary: var(--oyi-green);
  --primary-color: var(--oyi-green);
  --btn-primary: var(--oyi-green);
  --bg-color: var(--oyi-paper);
  --control-bg: #ffffff;
}
html body, html body *:not(code):not(pre):not(kbd):not(samp) { font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important; }
html body, body .page-content-wrapper, body .web-footer { background: var(--oyi-paper); color: var(--oyi-ink); -webkit-font-smoothing: antialiased; }
html body :is(h1, h2, h3, .page-card-head h4) { font-family: 'Fredoka', 'Open Sans', system-ui, sans-serif !important; letter-spacing: .1px; }

/* Kartu login */
.for-login .page-card, .for-forgot .page-card, .for-login-with-email-link .page-card, .for-signup .page-card,
.page-card {
  background: #fff; border: 1px solid var(--oyi-line); border-radius: 16px; box-shadow: var(--oyi-shadow-pop);
}
.page-card-head img.app-logo, .page-card-head .app-logo { width: 64px; height: 64px; max-height: none; border-radius: 14px; background: transparent; }
.page-card-head h4 { font-size: 22px; font-weight: 600; color: var(--oyi-ink); }
.form-control, .login-content .form-control, .page-card input.form-control {
  background: #fff !important; border: 1px solid var(--oyi-line-strong) !important; border-radius: 12px; min-height: 42px;
}
.page-card .btn-default, .btn-login-option, .for-login .btn-default, .for-forgot .btn-default, .page-card .btn-secondary {
  background: #fff !important; border: 1px solid var(--oyi-line-strong) !important; color: var(--oyi-ink); min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
}
.page-card .btn-default:hover, .btn-login-option:hover, .for-login .btn-default:hover { background: #e8f3e1; border-color: #a9c9b7; color: #2a5320; }
.form-control:focus { border-color: var(--oyi-green); box-shadow: var(--oyi-ring); }
.btn { border-radius: 12px; font-weight: 600; }
.btn-primary, .btn.btn-primary, .btn-login {
  background: var(--oyi-green) !important; border-color: var(--oyi-green) !important; color: #fff !important; min-height: 42px;
}
.btn-primary:hover, .btn-login:hover { background: var(--oyi-green-strong) !important; border-color: var(--oyi-green-strong) !important; }
.page-card a, .forgot-password-message a, .sign-up-message a { color: var(--oyi-green); }

/* Halaman login tidak perlu footer "Powered by". */
body[data-path=login] .web-footer, body[data-path="update-password"] .web-footer { display: none; }

/* Tombol mata pada kolom password (owner 6 Nov 2026): teks "Menunjukkan/Menyembunyikan" diganti ikon mata.
   Tipe input berubah saat ditekan, jadi ikonnya mengikuti tanpa JavaScript tambahan. */
.password-field { position: relative; }
.password-field .toggle-password {
  font-size: 0 !important; color: transparent !important; width: 36px; height: 36px; cursor: pointer;
  /* !important: CSS login Frappe (.for-login .page-card ... .toggle-password) memasang top: 5px -> ikon naik 18px */
  position: absolute; right: 2px !important; top: 50% !important; bottom: auto !important; margin: 0 !important;
  transform: translateY(-50%) !important; padding: 0 !important; border-radius: 8px;
  background: no-repeat center / 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.password-field input[type="text"] ~ .toggle-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c7a2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.password-field .toggle-password:hover { background-color: #f1f3f4; }
.password-field input.form-control { padding-right: 40px !important; }