:root { --pagebar-top: 0px; }

/* Remove Metronic extra spacing under header */
#kt_app_content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* FULL-WIDTH sticky in-page navbar */
#app_pagebar.app-pagebar {
  position: sticky;
  top: var(--pagebar-top);   /* ✅ dynamic: 0 at top, header height when fixed */
  z-index: 99;
  border-bottom: 1px solid var(--bs-border-color);
  margin: 0 !important;
}

/* Make it compact */
#app_pagebar .app-container {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

/* Kill title margins that create "mystery whitespace" */
#app_pagebar .page-heading,
#app_pagebar h1 {
  margin: 0 !important;
}

#kt_app_wrapper {

    padding-top: 15px !important;


}


/*New navitaro*/
.plus-square {
    /* Small square matching text height */
    width: 14px;
    height: 14px;

    /* Bootstrap Primary Color */
    background-color: var(--bs-primary);

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    border-radius: 4px;

    /* Smooth fade for the highlight */
    transition: opacity 0.2s ease;
}

/* HOVER EFFECT: Reduces opacity slightly to highlight without changing color */
.d-inline-flex:hover .plus-square,
.plus-square:hover {
    opacity: 0.8;
}

/* White Plus Sign */
.plus-square::before,
.plus-square::after {
    content: '';
    position: absolute;
    background-color: #fff;
    border-radius: 1px;
}

/* Horizontal Line */
.plus-square::before {
    width: 10px;
    height: 2px;
}

/* Vertical Line */
.plus-square::after {
    height: 10px;
    width: 2px;
}


/* full clickable "pill" area */
.hover-primary-bg{
  padding: .25rem .5rem;
  border-radius: .5rem;
  transition: background-color .2s ease;
}

/* light primary background on hover for icon + text area */
.hover-primary-bg:hover{
  background-color: rgba(var(--bs-primary-rgb), 0.12);
  /* Bootstrap 5.3+ alternative:
     background-color: var(--bs-primary-bg-subtle);
  */
}

/* optional: keep your icon hover effect */
.hover-primary-bg:hover .plus-square{
  opacity: .85;
}



/*Genera for icons*/

/* One class for the square icon style (works for any <i class="bi ...">) */
.icon-square{
  width: 14px;
  height: 14px;

  background-color: var(--bs-primary);
  border-radius: 4px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;          /* makes the icon glyph white */
  font-size: 10px;      /* critical: keeps glyph fitting inside 14px */
  line-height: 1;

  transition: opacity 0.2s ease;
}

/* Your existing hover pill can control icon opacity */
.hover-primary-bg:hover .icon-square{
  opacity: .85;
}
/* One class to style ANY icon */
.icon-primary{
  color: var(--bs-primary);
  font-size: 1.1rem;  /* tweak: 1.0–1.25rem depending on your header size */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease;
}

/* optional: match your hover behavior */
.hover-primary-bg:hover .icon-primary{
  opacity: .85;
}
.ms-action-icon{
  color: currentColor !important;   /* inherit link color */
  font-size: 1.15em;               /* scales with text */
  line-height: 1;
}




/* =========================
   HEADER HAMBURGER BUTTON
   ========================= */

.app-sidebar-toggle-btn {
  position: relative;
}

/* Three lines (middle + top + bottom) */
.app-sidebar-toggle-btn .app-burger-icon,
.app-sidebar-toggle-btn .app-burger-icon::before,
.app-sidebar-toggle-btn .app-burger-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background-color: currentColor;
}

/* Middle line */
.app-sidebar-toggle-btn .app-burger-icon {
  top: 50%;
}

/* Top line */
.app-sidebar-toggle-btn .app-burger-icon::before {
  top: -6px;
}

/* Bottom line */
.app-sidebar-toggle-btn .app-burger-icon::after {
  bottom: -6px;
}

/* =========================
   SIDEBAR CLOSE (X) BUTTON
   ========================= */

.app-sidebar-close-btn {
  position: relative;
}

/* Container for the X strokes */
.app-sidebar-close-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;              /* center inside the 35x35 button */
}

/* The two diagonal strokes */
.app-sidebar-close-icon::before,
.app-sidebar-close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background-color: currentColor;
  transform-origin: center;
}

/* Diagonal 1 */
.app-sidebar-close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Diagonal 2 */
.app-sidebar-close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.app-header-logo {
  display: block;       /* make sure it actually renders */
}



/* Always show a subtle grey line under the header */


/* Make header more compact vertically */
.app-header .app-container {
  padding-top: 0.35rem !important;   /* reduce these two until it feels right */
  padding-bottom: 0.35rem !important;
}



/*.app-header-2 {*/
/*  border-bottom: 1px solid var(--bs-border-color) !important;*/
/*     margin-top: 50px;*/
/*    max-height: 25px;*/
/*}*/
/* ✅ Force the header to wrap into 2 rows */
#kt_app_header.app-header--two-rows {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;

  height: auto !important;
  overflow: visible !important; /* avoids dropdown clipping */
}

/* ✅ Each "row" takes 100% width so it MUST go under the previous one */
#kt_app_header.app-header--two-rows > #kt_app_header_container {
  flex: 0 0 100% !important;
  width: 100% !important;
}

#kt_app_header.app-header--two-rows > #kt_app_header_2 {
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* ✅ Same background as header (prevents the “different color” issue) */
#kt_app_header.app-header--two-rows > #kt_app_header_2 {
  background: inherit !important;
}

/* ✅ Grey line UNDER row 1 and UNDER row 2 (not on the whole header) */
#kt_app_header_container {
  border-bottom: 1px solid var(--bs-border-color) !important;
}

/* row 2 bottom line (line between header and page content) */
#kt_app_header_2 {
  border-bottom: 1px solid var(--bs-border-color) !important;
}

/* optional: tighten breadcrumbs row spacing */
#kt_app_header_2.app-header-row-2 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}