/* 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: 14px; }
  .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; }