/* #### Mobile Phones Portrait #### */
@media screen and (device-width <= 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (device-width <= 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (device-width <= 640px){
  /* some CSS here */
}

/* #### Retina screen (iphone4, samsung note, etc.) Portrait or Landscape #### */
@media
only screen and (min-device-pixel-ratio: 2),
only screen and (   min-device-pixel-ratio: 2),
only screen and (     min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                resolution >= 192dpi),
only screen and (                resolution >= 2dppx),
only screen and (                   height <= 640px) ,
only screen and (                   device-height <= 640px) {
  /* Retina-specific stuff here */
  body{
    padding-top : 60px;
  }

 
/* #header {
    height : 30px;
  }*/

  #logo {
    height : 30px;
    margin: 0 5px;
  }

  #logo h1 {
    font-size : 1.5em;
    margin: 5px 5px 5px 40px;
    line-height: 20px;
  }

  #title{
    height : 30px;
    margin : 0 5px;
    padding-right:5px;
  }

  #title h1 {
    margin : 0 5px;
    font-size : 1.5em;
    line-height: 30px;
  }

  #headermenu{
    height:55px;
    position: fixed;
  }

  .navbar-inner {
    min-height:30px;
    padding: 0 10px;
  }

  /*  for ie */

/*  .navbar-inner ul { */

/*    height:30px\9; */

/*  } */

  /*  for ie */
  .navbar-inner ul li{
    display:inline\9;
  }

  #overview-box {
    right:10px;
    bottom:40px;
  }

  #bottom-dock  {
    width: 100%;
    height: auto;
  }

  #bottom-dock.visible {
    height: 100%;
    opacity: 1;
  }

  #bottom-dock.half-transparent {
    height: 100%;
    opacity: 1;
  }

}

/* #### Tablets Portrait or Landscape #### */
@media screen and (device-width >= 768px) and (device-width <= 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (width >= 1024px){
  /* some CSS here */
}

@media (pointer: coarse) {
  #headermenu{
    height:55px;
    position: fixed;
  }
  #logo {
    height: 60px !important;
    width: 240px !important;
    margin-top: 5px !important;
    margin-left: 0px !important;
  }
  #header {
    background: #fff !important;
    height: 55px !important;
  }
  #auth {
    padding-bottom: 0px !important;
    height: 55px !important;
  }
  ul.nav.pull-right {
      top: 25%;
  }
  input#search-project {
    margin-top: 25px !important;
  }
  #menuToggle {
      top: 60px !important;
  }
}

/* --- 0. Do strojenia: zmieniaj tylko te trzy liczby ------------------------ */
body:not(:has(#mapmenu)) {
	--wkg-header-h: 60px;   /* wysokość paska nagłówka */
	--wkg-logo-h: 40px;     /* wysokość logo (szerokość zostaje z motywu) */
	--wkg-header-pad: 12px; /* odstęp od lewej i prawej krawędzi */

	padding-top: var(--wkg-header-h); /* treść startuje pod nagłówkiem */
}

/* --- 1. Pasek nagłówka: jeden rząd o stałej wysokości ---------------------- */
body:not(:has(#mapmenu)) #header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: auto;
	z-index: 1030;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wkg-header-pad);
	height: var(--wkg-header-h) !important;
	min-height: var(--wkg-header-h);
	max-height: var(--wkg-header-h);
	margin: 0;
	padding: 0 var(--wkg-header-pad);
	overflow: visible; /* menu użytkownika musi wyjść poza pasek */
}

/* --- 2. Logo: stała wysokość pudełka; obrazek skaluje się sam ------------- */
body:not(:has(#mapmenu)) #header #logo {
	flex: 0 0 auto;
	float: none;
	height: var(--wkg-logo-h) !important;
	min-height: var(--wkg-logo-h);
	max-height: var(--wkg-logo-h);
	margin: 0 !important;
	padding: 0;
}

/* --- 3. Tytuł: jedyny element, który wolno ścisnąć ------------------------ */
body:not(:has(#mapmenu)) #header #title {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	height: auto !important;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
}

body:not(:has(#mapmenu)) #header #title h1,
body:not(:has(#mapmenu)) #header #title h2 {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; /* długa nazwa przycina się wielokropkiem */
}

/* --- 4. Menu po prawej: koniec position:fixed ----------------------------- */
body:not(:has(#mapmenu)) #header #headermenu,
body:not(:has(#mapmenu)) #header #headermenu.navbar,
body:not(:has(#mapmenu)) #header #headermenu.navbar-fixed-top {
	position: relative;
	top: auto;
	left: auto;
	right: auto !important;
	bottom: auto;
	float: none;
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	height: auto;
	min-height: 0;
	margin: 0 0 0 auto; /* dosuwa menu do prawej krawędzi */
	padding: 0;
	background: transparent;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible;
}

body:not(:has(#mapmenu)) #header #auth,
body:not(:has(#mapmenu)) #header .navbar-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	height: auto !important;
	min-height: 0;
	margin: 0;
	padding: 0 !important;
	background: transparent;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	overflow: visible;
}

body:not(:has(#mapmenu)) #header .nav {
	position: static;
	float: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2px;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

body:not(:has(#mapmenu)) #header .nav > li,
body:not(:has(#mapmenu)) #header .nav > li > a {
	float: none;
	display: flex;
	align-items: center;
	line-height: normal;
}

body:not(:has(#mapmenu)) #header .nav > li {
	position: static;
}

body:not(:has(#mapmenu)) #header .nav > li > a {
	gap: 6px;
	white-space: nowrap;
}

body:not(:has(#mapmenu)) #header .nav > li > a .icon {
	flex: 0 0 auto;
	float: none;
	align-self: center;
}

body:not(:has(#mapmenu)) #header .nav .caret {
	margin-top: 0;
	align-self: center;
}

body:not(:has(#mapmenu)) #header .nav > li > .dropdown-menu {
	top: 100%;
	margin-top: 0;
}

body:not(:has(#mapmenu)) #header .nav > li > .dropdown-menu.pull-right {
	right: 0;
	left: auto;
}

/* --- 5. Wyszukiwarka w nagłówku i wąskie okno ----------------------------- */
body:not(:has(#mapmenu)) #header .navbar-search,
body:not(:has(#mapmenu)) #header form.navbar-form {
	float: none;
	flex: 0 1 240px;
	min-width: 0;
	margin: 0;
}

@media (max-width: 900px) {
	body:not(:has(#mapmenu)) #header .navbar-search,
	body:not(:has(#mapmenu)) #header form.navbar-form {
		flex: 0 1 150px;
	}
}