/* Global typography + dashboard header hardening */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap');

:root { --sl-font: 'Josefin Sans', sans-serif; }

html, body,
body *,
button, input, select, textarea,
.btn, .form-control, .dropdown-menu, .table,
.navbar, .sidebar, .header_iner, .main_content,
.dataTables_wrapper, .modal, .toast,
.tooltip, .popover {
  font-family: var(--sl-font) !important;
}


/* Header/profile interaction hardening: the profile menu opens ONLY after tapping/clicking the avatar.
   A hidden menu never receives pointer events, preventing accidental Settings/Logout activation. */
.header_iner,
.header_iner .header_right,
.header_iner .profile_info { overflow: visible !important; }
.header_iner { position: relative; z-index: 10000 !important; }
.header_iner .profile_info { position: relative; z-index: 10020 !important; }
.header_iner .profile_info > img {
  position: relative;
  z-index: 10022;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.header_iner .profile_info .profile_info_iner {
  z-index: 10050 !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  max-height: min(520px, calc(100vh - 105px));
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 18px 45px rgba(24,34,53,.16);
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.header_iner .profile_info.profile-open .profile_info_iner {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0);
}
.header_iner .profile_info .profile_info_details a {
  white-space: nowrap !important;
  min-height: 42px;
  display: flex !important;
  align-items: center;
}
.header_iner .profile_info .profile_info_details a:last-child {
  color: #ed4d5f !important;
  font-weight: 600 !important;
  border-top: 1px solid #eef0f4;
  margin-top: 4px;
  padding-top: 12px;
}

/* Reliable menu/close controls: no icon-font dependency. */
.sidebar_icon {
  position: relative !important; width: 44px !important; height: 44px !important;
  min-width: 44px !important; padding: 0 !important; border: 0 !important;
  background: transparent !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  cursor: pointer !important; touch-action: manipulation !important;
  z-index: 10030 !important;
}
.sidebar_icon .hamburger-lines {
  width: 26px !important; height: 20px !important; display: block !important;
  position: relative !important; font-size: 0 !important;
  background: linear-gradient(#111,#111) 0 0/26px 3px no-repeat,
              linear-gradient(#111,#111) 0 8.5px/26px 3px no-repeat,
              linear-gradient(#111,#111) 0 17px/26px 3px no-repeat !important;
}
.sidebar_icon .hamburger-lines span { display:none !important; }
.sidebar_icon[aria-expanded="true"] .hamburger-lines {
  background: linear-gradient(45deg, transparent 46%, #111 47%, #111 53%, transparent 54%) center/26px 20px no-repeat,
              linear-gradient(-45deg, transparent 46%, #111 47%, #111 53%, transparent 54%) center/26px 20px no-repeat !important;
}

/* The sidebar's close control is also CSS-only; never show a broken ti-close glyph. */
.sidebar_close_icon {
  width: 42px !important; height: 42px !important;
  display: inline-flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important; font-size:0 !important; line-height:0 !important;
}
.sidebar_close_icon .ti-close { display:none !important; }
.sidebar_close_icon::before, .sidebar_close_icon::after {
  content:'' !important; position:absolute !important; width:24px !important; height:3px !important;
  border-radius:3px !important; background:#111 !important;
}
.sidebar_close_icon::before { transform:rotate(45deg) !important; }
.sidebar_close_icon::after { transform:rotate(-45deg) !important; }

@media (min-width: 992px) {
  .header_iner .profile_info .profile_info_iner { right: 0 !important; }
}
@media (max-width: 991.98px) {
  .header_iner .profile_info .profile_info_iner {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    width: min(240px, calc(100vw - 24px)) !important;
  }
}


/* ===== Icon fonts must keep their own font-family =====
   The global "body * { font-family: ... !important }" rule above was overriding
   the icon fonts, so <i class="fa ..."> / <i class="fe ..."> rendered as empty boxes. */
body .fa, body i.fa, body .fa::before, body .fa::after,
body [class^="fa-"], body [class*=" fa-"]{
  font-family: 'FontAwesome' !important;
}
body .fe, body i.fe, body [class^="fe-"], body [class*=" fe-"]{
  font-family: 'feather' !important;
}
body [class^="ti-"], body [class*=" ti-"]{
  font-family: 'themify' !important;
}
body .material-icons, body [class^="material-icons"], body [class*=" material-icons"]{
  font-family: 'Material Icons' !important;
}