/* ND: fixed top navbar + safe content offset (Desktop/iPad) */
.nd-top-navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
}

/* prevent content being covered by fixed navbar */
:root{ --nd-nav-offset: 56px; }
body{
  padding-top: calc(var(--nd-nav-offset) + env(safe-area-inset-top));
}
@supports (padding: max(0px)){
  body{
    padding-top: calc(var(--nd-nav-offset) + env(safe-area-inset-top));
  }
}

/* Kongsi - Navbar unified styles (anti zoom / anti font jump) */

/* Consistent hover + active state */
.navbar .navbar-nav .nav-link{
  padding: .5rem .75rem;
  margin: .125rem .25rem;
  border-radius: .65rem;
  font-weight: 600;
  font-size: inherit; /* prevent font-size jumping when active */
  letter-spacing: .1px;
  color: rgba(255,255,255,.88);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.navbar .navbar-nav .nav-link:hover{
  background: rgba(255,255,255,.12);
  color: #fff;
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link[aria-current='page']{
  background: rgba(255,255,255,.22);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Hard-lock navbar font sizes: prevent zoom jump between modules */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.navbar .navbar-brand span,
.navbar .navbar-nav .nav-link{
  font-size: 14px !important;
  line-height: 1.2 !important;
}


/* Lock username/role label (e.g., "yudiana • ADMIN") so it never changes between modules */
.navbar .navbar-text.text-white.small.me-2.text-nowrap,
.navbar .navbar-user-badge{
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
}

/* ==========================================================
   Global Responsive Pack (HP / iPad / Desktop)
   - Fokus: rapi, presisi, tabel tetap enak seperti desktop
   ========================================================== */

/* Better tap targets & prevent horizontal overflow */
*, *::before, *::after{ box-sizing: border-box; }
body{ overflow-x:hidden; }
img{ max-width:100%; height:auto; }

/* Containers: keep breathing room on small screens */
@media (max-width: 576px){
  .container, .container-fluid{ padding-left: 12px !important; padding-right: 12px !important; }
  h1, .h1{ font-size: 1.35rem; }
  h2, .h2{ font-size: 1.15rem; }
  h3, .h3{ font-size: 1.02rem; }
  .card{ border-radius: 12px; }
  .card-header, .card-body{ padding: .9rem .9rem; }
  .btn{ padding: .5rem .75rem; }
  .btn-sm{ padding: .45rem .65rem; }
  .form-control, .form-select{ min-height: 40px; }
  .table{ font-size: .82rem; }
  .table th, .table td{ padding: .55rem .6rem; }
}

/* iPad / Tablet: keep desktop feel, but tighter */
@media (min-width: 577px) and (max-width: 991.98px){
  .container, .container-fluid{ padding-left: 16px !important; padding-right: 16px !important; }
  .table{ font-size: .9rem; }
}

/* iPad/tablet NAVBAR:
   When the menu contains many items (admin), it can overflow/cut off on tablet widths.
   Make the nav area horizontally scrollable instead of cutting the right side. */
@media (max-width: 1199.98px){
  .navbar .navbar-nav{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: .25rem;
  }
  .navbar .navbar-nav .nav-link{ flex: 0 0 auto; }

  /* Keep the right-side user badge + logout always visible */
  .navbar .navbar-collapse{ justify-content: space-between; }
  .navbar .navbar-text, .navbar .btn{ flex: 0 0 auto; }
}

/* Table responsive wrapper (will be added automatically via responsive.js) */
.table-responsive{
  -webkit-overflow-scrolling: touch;
}
.table-responsive > table{
  margin-bottom: 0;
}

/* Prevent ugly wrapping in key columns */
.table th{ white-space: nowrap; }
.table td{ vertical-align: middle; }

/* Make long text safe in mobile */
.text-truncate, .badge, .btn{ max-width: 100%; }

/* Inputs: avoid iOS zoom on focus (>=16px) */
@media (max-width: 576px){
  input, select, textarea{ font-size: 16px !important; }
  .form-control-sm, .form-select-sm{ font-size: 16px !important; }
}

/* Utility: better chip/badge spacing */
.badge{ padding: .45em .6em; }

/* ==========================================================
   ND Mobile / iPad Bottom Navbar (e-wallet style)
   - Only icons visible
   - Top navbar menus hidden on touch devices
   ========================================================== */

.nd-bottom-nav{ display:none; }
.nd-touch-top-actions{ display:none; }

@media (max-width: 1366px) and (any-pointer: coarse){
  /* Expose bottom-nav safe height to body/layout via CSS var */
  :root{ --nd-bottom-safe: 78px; }

  /* Slim top navbar on touch devices (HP / iPad) */
  .navbar{ padding-top: .35rem !important; padding-bottom: .35rem !important; }
  .navbar .container-fluid{ padding-top: 2px !important; padding-bottom: 2px !important; }
  .navbar .navbar-brand img{ height: 24px !important; }
  /* Hide the big desktop nav menu area on touch devices */
  .navbar .navbar-toggler{ display:none !important; }
  .navbar #ndNavbar{ display:none !important; }

  /* Show compact top-right actions (name + hamburger) */
  .nd-touch-top-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .nd-touch-user{
    max-width: 52vw;
    color: rgba(255,255,255,.95);
    font-weight: 800;
    font-size: 14px;
    line-height: 1.1;
  }
  .nd-touch-hamburger{
    padding: 6px 8px;
    border-radius: 12px;
    color: rgba(255,255,255,.95);
    text-decoration: none;
  }
  .nd-touch-hamburger i{ font-size: 24px; line-height: 1; }

  /* Give room for fixed bottom bar (include safe-area for iPhone/iPad home indicator) */
  body{ padding-bottom: calc(var(--nd-bottom-safe, 92px) + env(safe-area-inset-bottom)); }

  .nd-bottom-nav{
    /* Default max icons shown before "More" (phones). If total icons > max, JS will reserve 1 slot for More.
       Requirement: HP allow up to 5 icons (then overflow goes to More). */
    --nd-bottom-max: 5;
    --nd-bottom-safe: 78px;
    position: fixed;
    left: 6px;
    right: 6px;
    bottom: calc(6px + env(safe-area-inset-bottom));
    z-index: 1030; /* above content, below modals */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 6px 6px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15,23,42,.16);
  }

  .nd-bottom-item{
    flex: 1 1 0;
    text-decoration: none;
    color: rgba(15,23,42,.78);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
    border-radius: 12px;
    border: none;
    background: transparent;
    line-height: 1;
  }

  .nd-bottom-item i{ font-size: 20px; }

  /* Label exists for accessibility, but hidden visually (icons only) */
  .nd-bottom-label{ display:none; }

  .nd-bottom-item.active,
  .nd-bottom-item[aria-current='page']{
    background: rgba(37,99,235,.10);
    color: #2563eb;
  }

  .nd-bottom-more{ cursor: pointer; }

  /* Offcanvas sheet looks like wallet action sheet */
  .nd-more-sheet{
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }
  .nd-more-sheet .offcanvas-header{
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15,23,42,.08);
  }
  .nd-more-sheet .offcanvas-body{ padding: 10px 0 16px; }
  .nd-more-sheet .list-group-item{
    border: 0;
    padding: 12px 16px;
  }
}

/* iPad / tablet icon limits (touch only)
   - iPad portrait: max 8 icons
   - iPad landscape / tablet besar: max 12 icons */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) and (any-pointer: coarse){
  :root{ --nd-bottom-safe: 84px; }

  .nd-bottom-nav{
    --nd-bottom-max: 8;
    --nd-bottom-safe: 84px;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  body{ padding-bottom: calc(var(--nd-bottom-safe, 96px) + env(safe-area-inset-bottom)); }
  .nd-bottom-item i{ font-size: 22px; }
}

@media (min-width: 900px) and (max-width: 1366px) and (orientation: landscape) and (any-pointer: coarse){
  .nd-bottom-nav{
    --nd-bottom-max: 12;
    --nd-bottom-safe: 88px;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  body{ padding-bottom: calc(var(--nd-bottom-safe, 100px) + env(safe-area-inset-bottom)); }
  .nd-bottom-item i{ font-size: 22px; }
}


/* Account offcanvas (hamburger) */
@media (max-width: 1366px) and (any-pointer: coarse){
  .nd-account-sheet{
    width: min(86vw, 348px);
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
  }
  .nd-account-sheet .offcanvas-header{
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15,23,42,.08);
  }
  .nd-account-sheet .list-group-item{
    border: 0;
    padding: 12px 16px;
  }
}


/* === Touch / Safe-area polish === */
.nd-bottom-nav{
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem);
  padding-left: calc(env(safe-area-inset-left, 0px) + .75rem);
  padding-right: calc(env(safe-area-inset-right, 0px) + .75rem);
}
.nd-bottom-nav a{
  min-width: 44px;
  min-height: 44px;
}

html[data-orientation="landscape"].is-touch .nd-bottom-nav{
  /* a bit shorter in landscape so content feels "less cramped" */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .35rem);
}

/* If any page uses fixed bottom actions, keep them above the home indicator */
.nd-fab, .nd-floating-actions, .floating-actions, .sticky-actions{
  bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
}


/* === ND Slim Navbar (ideal height) === */
#ndTopNavbar.navbar{
  height: 56px !important;
  min-height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}
#ndTopNavbar.navbar .container-fluid{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#ndTopNavbar.navbar .navbar-brand{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
}
#ndTopNavbar.navbar .navbar-brand img{
  height: 26px !important;
  width: auto !important;
}
#ndTopNavbar.navbar .navbar-nav .nav-link{
  padding: 6px 10px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
#ndTopNavbar.navbar .navbar-user-badge,
#ndTopNavbar.navbar .navbar-text{
  font-size: 13px !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Mobile: sedikit lebih tinggi untuk tap */
@media (max-width: 576px){
  #ndTopNavbar.navbar{
    height: 48px !important;
    min-height: 48px !important;
  }
  #ndTopNavbar.navbar .navbar-nav .nav-link{
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
}



/* ===== ND Windows 8 Reload Slide Transition ===== */
:root{
  --nd-slide-ms: 260ms;
  --nd-ease: cubic-bezier(.2,.9,.2,1);
}

#ndPageContent{
  min-height: 60vh;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

html.nd-enter-prep #ndPageContent{
  opacity: 0;
  transform: translate3d(18px,0,0);
}
html.nd-enter #ndPageContent{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: transform var(--nd-slide-ms) var(--nd-ease),
              opacity   var(--nd-slide-ms) var(--nd-ease);
}
html.nd-enter-prep-back #ndPageContent{
  opacity: 0;
  transform: translate3d(-18px,0,0);
}
html.nd-enter-back #ndPageContent{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: transform var(--nd-slide-ms) var(--nd-ease),
              opacity   var(--nd-slide-ms) var(--nd-ease);
}
html.nd-leave #ndPageContent{
  opacity: 0;
  transform: translate3d(-18px,0,0);
  transition: transform var(--nd-slide-ms) var(--nd-ease),
              opacity   var(--nd-slide-ms) var(--nd-ease);
}

/* Navbar anti-flicker */
#ndTopNavbar, .nd-bottom-nav{
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* iOS tap highlight off */
*{ -webkit-tap-highlight-color: transparent; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  html.nd-enter #ndPageContent,
  html.nd-enter-back #ndPageContent,
  html.nd-leave #ndPageContent{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  html.nd-enter-prep #ndPageContent,
  html.nd-enter-prep-back #ndPageContent{
    opacity: 1 !important;
    transform: none !important;
  }
}