/* Nifadigital Store - Mazer UI tweaks
 * Target: Portal + Portal Auth (frontend) only.
 * Loaded AFTER mazer compiled css.
 */

/* Global typography scale: mazer default terasa besar di Full HD */
html {
  font-size: 15px;
}

@media (max-width: 992px) {
  html { font-size: 14.5px; }
}

@media (max-width: 576px) {
  html { font-size: 14px; }
}

/* -------------------- AUTH pages -------------------- */
#auth .row.h-100 {
  min-height: 100vh;
}

#auth #auth-left {
  padding: 2rem 1.75rem;
}

@media (min-width: 992px) {
  #auth #auth-left {
    padding: 2.5rem 2.25rem;
  }
}

@media (min-width: 1200px) {
  #auth #auth-left {
    max-width: 480px; /* biar tidak melebar di layar besar */
  }
}

#auth .auth-logo img {
  height: 40px;
}

#auth .auth-title {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: .5rem;
}

#auth .auth-subtitle {
  font-size: .95rem;
  margin-bottom: 1.25rem;
}

#auth .form-group {
  margin-bottom: .75rem;
}

#auth .form-control,
#auth .form-control-xl {
  font-size: .95rem;
  padding: .55rem .75rem;
}

#auth .btn,
#auth .btn-lg {
  font-size: .95rem;
  padding: .6rem 1rem;
}

#auth .text-lg {
  font-size: .95rem !important;
}

/* Sedikit rapihin spacing link di bawah */
#auth .auth-links {
  margin-top: 1.25rem;
}

/* -----------------------------------------------------
   

/* ------------------------------------------------------------------
   Brand + global UI tokens (moved from inline blocks)
   ------------------------------------------------------------------ */
u20a2 — Safe-area global + disable overscroll + native-like touch
   Level 1 PWA polish (mobile-first, tidak mengganggu desktop)
   ----------------------------------------------------- */

:root,
[data-bs-theme="light"]{
  --nifa-primary: #17B8C6;
  --nifa-primary-hover: #1397A3;
  --nifa-primary-active: #108C97;
  --nifa-primary-soft: #E0F6F5;
  --nifa-primary-rgb: 23, 184, 198;
  --brand-accent: var(--nifa-primary);
  --brand-accent-rgb: var(--nifa-primary-rgb);
  --bs-primary: var(--nifa-primary);
  --bs-primary-rgb: var(--nifa-primary-rgb);
  --bs-info: var(--nifa-primary);
  --bs-info-rgb: var(--nifa-primary-rgb);
  --bs-link-color: var(--nifa-primary);
  --bs-link-color-rgb: var(--nifa-primary-rgb);
  --bs-link-hover-color: var(--nifa-primary-hover);
  --bs-link-hover-color-rgb: 19, 151, 163;
  --bs-link-color: var(--nifa-primary);
  --bs-link-hover-color: var(--nifa-primary-hover);
  --bs-link-color-rgb: var(--nifa-primary-rgb);
  --nifa-safe-top: env(safe-area-inset-top);
  --nifa-safe-bottom: env(safe-area-inset-bottom);
}
[data-bs-theme="dark"]{
  --bs-primary: var(--nifa-primary);
  --bs-primary-rgb: var(--nifa-primary-rgb);
  --bs-info: var(--nifa-primary);
  --bs-info-rgb: var(--nifa-primary-rgb);
  --bs-link-color: var(--nifa-primary);
  --bs-link-color-rgb: var(--nifa-primary-rgb);
  --bs-link-hover-color: var(--nifa-primary-hover);
  --bs-link-hover-color-rgb: 19, 151, 163;
}

/* -------------------- Nifa brand buttons/badges -------------------- */
.btn-primary{
  --bs-btn-bg: var(--nifa-primary);
  --bs-btn-border-color: var(--nifa-primary);
  --bs-btn-hover-bg: var(--nifa-primary-hover);
  --bs-btn-hover-border-color: var(--nifa-primary-hover);
  --bs-btn-active-bg: var(--nifa-primary-active);
  --bs-btn-active-border-color: var(--nifa-primary-active);
  --bs-btn-disabled-bg: var(--nifa-primary);
  --bs-btn-disabled-border-color: var(--nifa-primary);
  background-color: var(--nifa-primary) !important;
  border-color: var(--nifa-primary) !important;
  box-shadow: 0 10px 24px rgba(var(--nifa-primary-rgb), .18);
}
.portal .btn-primary,
body.portal .btn-primary{
  background-color: var(--nifa-primary) !important;
  border-color: var(--nifa-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--nifa-primary-hover) !important;
  border-color: var(--nifa-primary-hover) !important;
  box-shadow: 0 12px 28px rgba(var(--nifa-primary-rgb), .22);
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle{
  background-color: var(--nifa-primary-active) !important;
  border-color: var(--nifa-primary-active) !important;
  box-shadow: 0 8px 18px rgba(var(--nifa-primary-rgb), .22);
}
.btn-primary:disabled,
.btn-primary.disabled{
  opacity: .65;
  box-shadow: none;
}

.btn-outline-primary{
  --bs-btn-color: var(--nifa-primary);
  --bs-btn-border-color: rgba(var(--nifa-primary-rgb), .55);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nifa-primary);
  --bs-btn-hover-border-color: var(--nifa-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--nifa-primary-active);
  --bs-btn-active-border-color: var(--nifa-primary-active);
  --bs-btn-disabled-color: rgba(var(--nifa-primary-rgb), .6);
  --bs-btn-disabled-border-color: rgba(var(--nifa-primary-rgb), .35);
  color: var(--nifa-primary) !important;
  border-color: rgba(var(--nifa-primary-rgb), .55) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background-color: var(--nifa-primary) !important;
  border-color: var(--nifa-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(var(--nifa-primary-rgb), .20);
}
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle{
  background-color: var(--nifa-primary-active) !important;
  border-color: var(--nifa-primary-active) !important;
  color: #fff !important;
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled{
  color: rgba(var(--nifa-primary-rgb), .6) !important;
  border-color: rgba(var(--nifa-primary-rgb), .35) !important;
  background: transparent !important;
}

/* Treat btn-info as brand (to avoid blue default) */
.btn-info{
  --bs-btn-bg: var(--nifa-primary);
  --bs-btn-border-color: var(--nifa-primary);
  --bs-btn-hover-bg: var(--nifa-primary-hover);
  --bs-btn-hover-border-color: var(--nifa-primary-hover);
  --bs-btn-active-bg: var(--nifa-primary-active);
  --bs-btn-active-border-color: var(--nifa-primary-active);
  --bs-btn-disabled-bg: var(--nifa-primary);
  --bs-btn-disabled-border-color: var(--nifa-primary);
  background-color: var(--nifa-primary) !important;
  border-color: var(--nifa-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(var(--nifa-primary-rgb), .18);
}
.portal .btn-info,
body.portal .btn-info{
  background-color: var(--nifa-primary) !important;
  border-color: var(--nifa-primary) !important;
  color: #fff !important;
}
.btn-outline-info{
  --bs-btn-color: var(--nifa-primary);
  --bs-btn-border-color: rgba(var(--nifa-primary-rgb), .55);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nifa-primary);
  --bs-btn-hover-border-color: var(--nifa-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--nifa-primary-active);
  --bs-btn-active-border-color: var(--nifa-primary-active);
  --bs-btn-disabled-color: rgba(var(--nifa-primary-rgb), .6);
  --bs-btn-disabled-border-color: rgba(var(--nifa-primary-rgb), .35);
  color: var(--nifa-primary) !important;
  border-color: rgba(var(--nifa-primary-rgb), .55) !important;
}

/* Secondary buttons: neutral (avoid blue) */
.btn-secondary{
  background-color: #e9eef3 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Sidebar active state (portal) */
body.portal #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
body.portal .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
body.portal .sidebar-wrapper .menu .sidebar-link.active{
  background: var(--nifa-primary) !important;
  color: #fff !important;
  font-weight: 600;
}
body.portal #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link i,
body.portal #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link span,
body.portal .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link i,
body.portal .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link span,
body.portal .sidebar-wrapper .menu .sidebar-link.active i,
body.portal .sidebar-wrapper .menu .sidebar-link.active span{
  color: #fff !important;
}
.btn-secondary:hover,
.btn-secondary:focus{
  background-color: #dde6ef !important;
  border-color: #d6e0ea !important;
  color: #0f172a !important;
}
.btn-secondary:active,
.btn-secondary.active{
  background-color: #d3dce6 !important;
  border-color: #c9d3dd !important;
  color: #0f172a !important;
}
.btn-outline-secondary{
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  background-color: #eef2f6 !important;
  border-color: #dbe4ee !important;
  color: #0f172a !important;
}

.badge.bg-primary{
  background-color: var(--nifa-primary) !important;
}
.badge.bg-primary-lt,
.badge.bg-light-primary,
.badge.bg-azure-lt{
  background: rgba(var(--nifa-primary-rgb), .12) !important;
  color: var(--nifa-primary) !important;
  border: 1px solid rgba(var(--nifa-primary-rgb), .22) !important;
}
.text-primary{
  color: var(--nifa-primary) !important;
}

/* Focus ring for inputs/selects/textareas */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible{
  border-color: rgba(var(--nifa-primary-rgb), .55) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--nifa-primary-rgb), .18) !important;
}

/* Links + tabs */
a:hover,
a:focus-visible{
  color: var(--nifa-primary-hover);
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
  background-color: var(--nifa-primary) !important;
  border-color: var(--nifa-primary) !important;
  color: #fff !important;
}
.nav-tabs .nav-link:hover{
  border-color: rgba(var(--nifa-primary-rgb), .35) rgba(var(--nifa-primary-rgb), .35) transparent;
}
.nav-tabs .nav-link.active{
  border-bottom-color: transparent;
}

/* Status badges (Nifa tone) */
.badge.bg-success{
  background-color: #19A07F !important;
}
.badge.bg-success-lt,
.badge.bg-green-lt{
  background: rgba(25, 160, 127, .12) !important;
  color: #19A07F !important;
  border: 1px solid rgba(25, 160, 127, .24) !important;
}
.badge.bg-warning{
  background-color: #C88B00 !important;
  color: #fff !important;
}
.badge.bg-warning-lt,
.badge.bg-amber-lt{
  background: rgba(200, 139, 0, .14) !important;
  color: #8A5B00 !important;
  border: 1px solid rgba(200, 139, 0, .26) !important;
}
.badge.bg-info{
  background-color: #1BA6C8 !important;
}
.badge.bg-info-lt,
.badge.bg-cyan-lt{
  background: rgba(27, 166, 200, .14) !important;
  color: #1BA6C8 !important;
  border: 1px solid rgba(27, 166, 200, .26) !important;
}

/* Cards, alerts, table hover */
.card{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
.card:hover{
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
  border-color: rgba(var(--nifa-primary-rgb), .18);
}
.alert{
  border-radius: .85rem;
  border: 1px solid rgba(0,0,0,.06);
}
.alert-primary{
  border-color: rgba(var(--nifa-primary-rgb), .28);
  background: rgba(var(--nifa-primary-rgb), .08);
  color: #0b3b3a;
}
.alert-info{
  border-color: rgba(27, 166, 200, .28);
  background: rgba(27, 166, 200, .08);
  color: #0b3b3a;
}
.alert-warning{
  border-color: rgba(200, 139, 0, .28);
  background: rgba(200, 139, 0, .08);
  color: #4a3600;
}
.alert-success{
  border-color: rgba(25, 160, 127, .28);
  background: rgba(25, 160, 127, .08);
  color: #0b3b2f;
}
.table-hover > tbody > tr:hover > *{
  background: rgba(var(--nifa-primary-rgb), .06) !important;
}

/* Active buttons in groups */
.btn-check:checked + .btn,
.btn-check:active + .btn,
.btn-group .btn.active,
.btn-group .btn:active,
.btn-group .btn:focus-visible{
  background-color: var(--nifa-primary) !important;
  border-color: var(--nifa-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .2rem rgba(var(--nifa-primary-rgb), .18) !important;
}

html, body{
  /* IMPORTANT: jangan mematikan scroll chaining di root.
     Beberapa browser akan membuat wheel/touch scroll tidak bekerja (hanya bisa drag scrollbar). */
  overscroll-behavior-y: auto;
  overscroll-behavior-x: auto;
  -webkit-text-size-adjust: 100%;
}

/* Jika perlu menahan ‘bounce’ di elemen tertentu (sheet/panel), pakai contain di sana, bukan di html/body */
.offcanvas .offcanvas-body{
  overscroll-behavior: contain;
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Remove grey highlight & reduce accidental double tap zoom feel */
a, button, input, textarea, select{
  -webkit-tap-highlight-color: transparent;
}

/* Touch-action: jangan set global ke semua <a>, karena banyak kartu/link menutupi layar sehingga scroll bisa ‘ketahan’ di beberapa device.
   Batasi hanya pada tombol/elemen aksi. */
button, .btn, a.btn, [role="button"],
input[type="button"], input[type="submit"],
.sf-nav-icon{
  touch-action: manipulation;
}

/* Pastikan link normal tetap bisa pan/scroll */
a{
  touch-action: auto;
}

@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 767.98px) {
    /* Topbars: respect notch safe-area when viewport-fit=cover */
    .sf-topbar{ padding-top: calc(var(--bs-navbar-padding-y, .5rem) + env(safe-area-inset-top)) !important; }
    .portal-mobile-topbar{ padding-top: calc(.55rem + env(safe-area-inset-top)) !important; }

    /* Bottom sheets (Bootstrap offcanvas-bottom) keep content above home indicator */
    .offcanvas.offcanvas-bottom .offcanvas-body{
      padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
  }
}