@CHARSET "UTF-8";

/* ============================================================
   Satya Design System — tokens globais
   Disponíveis em todas as páginas do Flux LIMS
   ============================================================ */
:root {
  --db-blue-900:  #062A57;
  --db-blue-800:  #083878;
  --db-blue-700:  #0A4C8C;
  --db-blue-600:  #115FA8;
  --db-blue-500:  #1E78C8;
  --db-blue-400:  #4E97D8;
  --db-blue-300:  #8FBCE7;
  --db-blue-200:  #C2D8F1;
  --db-blue-100:  #E3EDF9;
  --db-blue-50:   #F1F6FC;
  --db-peri-400:  #8B9BE0;
  --db-peri-300:  #A8B8E8;
  --db-peri-200:  #CAD4F0;
  --db-peri-100:  #EBEDF7;
  --db-gray-900:  #14161D;
  --db-gray-800:  #242833;
  --db-gray-700:  #3A3F4D;
  --db-gray-600:  #565C6B;
  --db-gray-500:  #757C8B;
  --db-gray-400:  #9AA1AE;
  --db-gray-300:  #C3C8D2;
  --db-gray-200:  #DFE2EA;
  --db-gray-150:  #EAEDF3;
  --db-gray-100:  #F2F4F8;
  --db-gray-50:   #F8F9FC;
  --db-white:     #FFFFFF;
  --db-green-700: #15663A;
  --db-green-600: #1F8A4C;
  --db-green-100: #E0F2E7;
  --db-amber-700: #9A5B00;
  --db-amber-600: #C77700;
  --db-amber-100: #FBEFD8;
  --db-red-600:   #A50E0E;
  --db-red-100:   #F8E5E5;
  --db-maroon:    #880808;
  /* ação destrutiva (botões, menus) — distinta do vermelho de dados --db-red-* */
  --db-danger:        #DC2626;
  --db-danger-strong: #B91C1C;
  --db-danger-soft:   #F87171;
  --db-shadow-sm: 0 1px 3px rgba(8,56,120,0.08), 0 1px 2px rgba(8,56,120,0.04);
  --db-shadow-md: 0 4px 12px rgba(8,56,120,0.10), 0 2px 4px rgba(8,56,120,0.05);
}

/********/
/* TAGS */
/********/

a img {
	border: none;
}

body {
	width: 100%; 
	min-width: 100%; 
	height: 100%; 
	min-height: 100%;
	font-size: medium;
	font-size-adjust: 0.5;
}

h1, h2, h3 {
	margin-top: 0;
}

h1 {
	font-size: 1.6em;
	font-weight: normal;
}

h2 {
	font-size: 1.6em;
}

h3 {
	font-size: 1em;
	margin-top: 20px;
}

html {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

img.left {
	float: left;
	margin: 0 20px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 20px;
}

/***********/
/* CLASSES */
/***********/

.alert-activity {
	border-color: yellow;
	border: 5px;
	margin-bottom: 10px;
}

.alert-text {
	display: inline-block;
	max-width: 270px;
}

.alert-thumbnail {
	display: inline-block;
	width: 50px;
	margin: auto auto;
}

.alert-commands {
	display: inline-block;
	width: 50px;
}

.alert-time {
	color: gray;
	max-width: 310px;
}

.align-top { /* utility class */
	vertical-align: top;
}

.ADD {
	color: green;
	font-weight: bold;
}

.DEL {
	color: red;
	font-weight: bold;	
}

.MOD {
	color: gold;
	font-weight: bold;	
}

.banner {
	height: 100%;
	background-size: cover;
}

.banner-picture {
	width: 3em;
}

.byline {
	margin: -60px 20px 20px 20px;
}

.byline a {
	color: #DC8700;
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

.creation-grid {
	width:100%;
}

.dp-xml {
	width: 1000px;
}

.entry {
	padding: 0 20px;
}

.entry p {
	line-height: 200%;
}

.event-red .fc-event,
.event-red a,
.event-red .fc-event-inner{
   background-color: red;
   border-color: red;
   color: white;
}

.event-yellow .fc-event,
.event-yellow a,
.event-yellow .fc-event-inner{
   background-color: yellow;
   border-color: yellow;
   color: white;
}

.event-purple .fc-event,
.event-purple a,
.event-purple .fc-event-inner{
   background-color: purple;
   border-color: purple;
   color: white;
}

.event-green .fc-event,
.event-green a,
.event-green .fc-event-inner{
   background-color: green;
   border-color: green;
   color: white;
}

.event-white .fc-event,
.event-white a,
.event-white .fc-event-inner{
   background-color: white;
   border-color: white;
   color: black;
}

.event-black .fc-event,
.event-black a,
.event-black .fc-event-inner{
   background-color: black;
   border-color: black;
   color: white;
}

.formLabel {
	font-weight: bold;
}

.general-picture {
	width: 2em;
}

.header-image-link {
	width: 32px;
}

.header-image-link:hover {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

/* This parent can be any width and height */
.header-layout-unit > .ui-layout-unit-content {
	text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.header-layout-unit > .ui-layout-unit-content:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.header-layout-unit, .header-layout-unit>.ui-layout-unit-content {
	background-color: transparent;
}

.header-logo {
	height: 100%;
	background: url("/javax.faces.resource/images/logo.png.xhtml") no-repeat 0% 0% transparent;
}

.header-text {
	display: block;
	color: #ffffff;
	font-size:120%;
	text-shadow: 0px 0px 11px #000;
}

.header-text-small {
	display: block;
	color: #ffffff;
	font-size: 9px;
}

.header-username {
	display: block;
	color: #ffffff;
	font-size: 90%;
	font-weight: bold;
	margin-left: 6px;
	margin-right: 10px;
}

.link-nounderline {
	text-decoration: none;
}

.hide-paginator-header .ui-paginator.ui-paginator-top.ui-widget-header {
	display: none !important;
}

.hide-datatable-header .ui-paginator.ui-paginator-top.ui-widget-header {
	display: none !important;
}

.hide-extra { 
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow:ellipsis; 
}

.homeMenu {
	width: 200px;
	float: left;
	margin-right: 10px
}

.homeText {
	line-height: 175%;
}

.imagebox a {
    margin-left:10px;
}

.lims-header, .lims-header tr, .ui-panelgrid.lims-header .ui-panelgrid-cell {
    background-color: #0B4881;
}

.lims-header .header-image-link:hover {
    background: #0081c2;
}       

.links {
	padding: 4px 0px;
	text-align: right;
	font-weight: bold;
}

.links a {
	border: none;
}

.menu {
	margin-bottom: 3px;
	overflow: visible !important; 
	z-index: 10 !important;	
}

/* ============================================================
   Breadcrumb — Satya design system
   ============================================================ */
.ui-breadcrumb.menu-breadcrumb {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 6px 14px !important;
	border-bottom: 1px solid var(--db-gray-200) !important;
	margin: 0 !important;
}

/* lista de itens */
.ui-breadcrumb.menu-breadcrumb ul {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* ícone de home */
.ui-breadcrumb.menu-breadcrumb .ui-breadcrumb-home a {
	display: flex !important;
	align-items: center !important;
	color: var(--db-blue-600) !important;
	text-decoration: none !important;
	padding: 0 6px 0 0 !important;
}
.ui-breadcrumb.menu-breadcrumb .ui-breadcrumb-home a::before {
	font-family: 'PrimeIcons' !important;
	content: '\e90b' !important; /* pi-home */
	font-size: 13px !important;
	line-height: 1 !important;
}
/* esconde o ícone jQuery UI legado */
.ui-breadcrumb.menu-breadcrumb .ui-breadcrumb-home .ui-icon {
	display: none !important;
}

/* separador › */
.ui-breadcrumb.menu-breadcrumb .ui-breadcrumb-chevron {
	color: var(--db-gray-300) !important;
	font-size: 11px !important;
	margin: 0 4px !important;
	list-style: none !important;
}
/* esconde ícone pi nativo e usa pseudo-elemento */
.ui-breadcrumb.menu-breadcrumb .ui-breadcrumb-chevron::before {
	content: none !important;
}
.ui-breadcrumb.menu-breadcrumb .ui-breadcrumb-chevron::after {
	content: '›' !important;
	font-size: 14px !important;
	color: var(--db-gray-400) !important;
	font-style: normal !important;
}

/* itens clicáveis */
.ui-breadcrumb.menu-breadcrumb .ui-menuitem a {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--db-blue-600) !important;
	text-decoration: none !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	transition: color 100ms !important;
}
.ui-breadcrumb.menu-breadcrumb .ui-menuitem a:hover {
	color: var(--db-blue-800) !important;
	text-decoration: underline !important;
}

/* item atual (último) */
.ui-breadcrumb.menu-breadcrumb .ui-menuitem:last-child a,
.ui-breadcrumb.menu-breadcrumb .ui-menuitem .ui-state-active {
	color: var(--db-gray-700) !important;
	font-weight: 600 !important;
	pointer-events: none !important;
}

/* ============================================================
   Menubar — Satya design system
   ============================================================ */

/* Container */
.ui-menubar.menuVertical {
  background: var(--db-white) !important;
  border: none !important;
  border-bottom: 1px solid var(--db-gray-200) !important;
  border-radius: 0 !important;
  padding: 0 8px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
}

/* Root list */
.ui-menubar.menuVertical .ui-menubar-root-list {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 3px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Item links — root e submenu */
.ui-menubar.menuVertical .ui-menuitem-link {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 5px !important;
  padding: 6px 10px !important;
  color: var(--db-gray-700) !important;
  background: transparent !important;
  border: none !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 100ms, color 100ms !important;
}
.ui-menubar.menuVertical .ui-menuitem-link:hover,
.ui-menubar.menuVertical .ui-menuitem.ui-state-hover > .ui-menuitem-link,
.ui-menubar.menuVertical .ui-menuitem.ui-state-active > .ui-menuitem-link {
  background: var(--db-blue-50) !important;
  color: var(--db-blue-700) !important;
  border: none !important;
}

/* Ícone e texto */
.ui-menubar.menuVertical .ui-menuitem-icon {
  font-size: 13px !important;
  color: inherit !important;
  width: auto !important;
  margin: 0 !important;
}
.ui-menubar.menuVertical .ui-menuitem-text {
  font-size: 12.5px !important;
  color: inherit !important;
  position: static !important;
  margin-left: 0 !important;
}

/* Seta de submenu */
.ui-menubar.menuVertical .ui-submenu-icon {
  font-size: 9px !important;
  margin-left: 2px !important;
  color: var(--db-gray-400) !important;
}

/* Painel de submenu */
.ui-menubar.menuVertical .ui-menu-list {
  background: var(--db-white) !important;
  border: 1px solid var(--db-gray-200) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(8,56,120,0.12) !important;
  padding: 4px !important;
  margin-top: 2px !important;
  width: auto !important;
}
.ui-menubar.menuVertical .ui-menu-list .ui-menuitem-link {
  border-radius: 5px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
}
.ui-menubar.menuVertical .ui-menuseparator {
  border-top: 1px solid var(--db-gray-150) !important;
  margin: 4px 8px !important;
}

/* ============================================================
   Mobile nav extras (busca + perfil/logout) — oculto no desktop
   ============================================================ */
#mobileNavExtras { display: none !important; }

/* dentro do drawer aberto — o JS move o div para dentro do .menuVertical */
body.mobile-nav-open > .ui-menubar.menuVertical #mobileNavExtras {
  display: block !important;
  border-top: 2px solid var(--db-gray-150);
}

/* busca */
.mobile-nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--db-gray-50);
  border-bottom: 1px solid var(--db-gray-150);
}
.mobile-nav-search-icon {
  color: var(--db-gray-400);
  font-size: 14px;
  flex-shrink: 0;
}
.mobile-nav-search .mobile-nav-ac,
.mobile-nav-search .ui-autocomplete { flex: 1 !important; min-width: 0; }
.mobile-nav-search .ui-autocomplete-input {
  width: 100% !important;
  border: 1px solid var(--db-gray-300) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  background: var(--db-white) !important;
  box-sizing: border-box !important;
}

/* usuário */
.mobile-nav-user {
  padding: 12px 12px 14px;
  background: var(--db-gray-50);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-nav-username {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--db-gray-800);
  border-bottom: 1px solid var(--db-gray-200);
  margin-bottom: 4px;
}
.mobile-nav-username .pi { color: var(--db-blue-500); font-size: 15px; }

.mobile-nav-user-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--db-gray-700) !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
}
.mobile-nav-user-btn:hover { color: var(--db-blue-700) !important; }
.mobile-nav-user-btn .pi { font-size: 15px; color: var(--db-gray-400); }
.mobile-nav-user-btn:hover .pi { color: var(--db-blue-500); }

.mobile-nav-logout { color: var(--db-danger) !important; }
.mobile-nav-logout:hover { color: var(--db-danger-strong) !important; }
.mobile-nav-logout .pi { color: var(--db-danger) !important; }

/* ============================================================
   Hamburger button (mobile only)
   ============================================================ */
.mobile-nav-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--db-gray-700);
  background: var(--db-white);
  border-bottom: 1px solid var(--db-gray-200);
  user-select: none;
  font-size: 13px;
  font-weight: 600;
}
.mobile-nav-icon-open  { font-size: 17px; }
.mobile-nav-icon-close { display: none; font-size: 17px; }

/* Backdrop */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14,24,48,0.4);
  z-index: 1098;
}

/* ---- Mobile ≤ 800px ---- */
@media screen and (max-width: 800px) {

  /* botão compacto no canto superior direito — não cobre o conteúdo */
  .mobile-nav-btn {
    display: flex;
    position: fixed;
    top: var(--mobile-nav-btn-top, 0px);
    right: 0;
    left: auto;
    width: auto;
    padding: 10px 16px;
    background: var(--db-blue-700);
    color: #fff;
    border-radius: 0 0 0 10px;
    z-index: 1100;
    box-shadow: 0 3px 10px rgba(8,56,120,0.28);
    gap: 7px;
  }
  .mobile-nav-icon-open,
  .mobile-nav-icon-close { font-size: 18px; color: #fff !important; }
  .mobile-nav-label { font-size: 13px; font-weight: 600; color: #fff; }

  /* esconde o menubar — especificidade (0,2,1) supera a regra desktop (0,2,0) */
  body > .ui-menubar.menuVertical,
  .ui-menubar.menuVertical { display: none !important; }
  .menuHorizontal           { display: none !important; }

  /* breadcrumb compacto */
  .ui-breadcrumb.menu-breadcrumb { padding: 5px 12px !important; }

  /* quando aberto: backdrop + ícone fecha */
  body.mobile-nav-open .mobile-nav-backdrop   { display: block; }
  body.mobile-nav-open .mobile-nav-icon-open  { display: none; }
  body.mobile-nav-open .mobile-nav-icon-close { display: block; }

  /* drawer — especificidade (0,3,1) ganha de tudo acima */
  body.mobile-nav-open > .ui-menubar.menuVertical {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: var(--mobile-nav-top, 44px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    z-index: 1099 !important;
    border-radius: 0 0 10px 10px !important;
    border-top: 1px solid var(--db-blue-300) !important;
    box-shadow: 0 8px 28px rgba(8,56,120,0.20) !important;
    max-height: calc(100vh - var(--mobile-nav-top, 44px)) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  /* itens empilhados verticalmente */
  body.mobile-nav-open > .ui-menubar.menuVertical .ui-menubar-root-list {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px 8px 12px !important;
    width: 100% !important;
  }
  body.mobile-nav-open > .ui-menubar.menuVertical .ui-menuitem { width: 100% !important; }
  body.mobile-nav-open > .ui-menubar.menuVertical .ui-menuitem > .ui-menuitem-link {
    padding: 12px 14px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    border-bottom: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media screen and (min-width: 801px) {
  .menuHorizontal { display: none !important; }
  .mobile-nav-btn { display: none !important; }
  body > .ui-menubar.menuVertical { display: none !important; }
}

.menuFont {
    font-size: 0.8em;
}

.nav-bar {
	background-color: #E5E5E5;
	filter:alpha(opacity=95);
	height: 43px; 
	opacity:0.95;
	z-index: 20; 
}

.pe-layout-pane-content {
	padding: 0;
}

.post {
	padding-bottom: 15px;
}

.post h1 {
	font-weight: normal;
}

.preformatted {
    white-space: pre;
}

.profile-picture {
/* 	margin: auto; */
	display: block;
	max-width: 130px;
	max-height: 130px;
	width: auto;
	height: auto;
	border-radius: 5%;
	-webkit-border-radius: 5%;
	-moz-border-radius: 5%;
/* 	box-shadow: 0 0 8px rgba(0, 0, 0, .8); */
/* 	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); */
/* 	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); */
}

.profile-picture:hover {
	filter: brightness(80%);
	background-color: black;
	transition: filter 0.4s
}

.profile-thumbnail {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
/*	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); */
}

.header-option {
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}

.notification {
	position: relative;
}

.notification-num {
	position: absolute;
	top: -1.3rem;
	right: -0.33rem;
	width: 1.2rem;
	height: 1.2rem;
	font-size: 0.6rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border-radius: 50%;
	/*background-color: #e74c3c; */
}

.submenu-content {
	text-align: center;
}

.submenu-title {
	padding: 4px 10px;
}

.tag {
	padding: 0 15px;
}

.title {
	height: 30px;
	margin-left: 10px;
	padding: 8px 0 0 20px;
}

.title a {
	border-bottom: none;
	color: #FFFFFF;
}

.title a:hover {
	border-bottom: 1px dotted #000000;
}

.themeMenu {
	height: 300px;
	width: 200px;
}

.tooManyItems > span {
	text-decoration: underline;
}

.top {
	display: inline-block;
	vertical-align: text-top;
}

.ui-blockui {
    z-index: 21;
}

.ui-blockui-content {
    z-index: 9999;
}

.ui-dialog-limited.ui-dialog {
 	max-height: 480px !important;
 	max-width: 50% !important; 		
}

.ui-dialog-limited.ui-dialog > .ui-dialog-content {
	max-height: 390px !important;
	overflow-y: scroll !important;	
}

.ui-icon.fa {
    text-indent:0px;
	background-image: none !important;
}

.ui-icon-flux-calendar {
    background: url("/javax.faces.resource/images/calendar.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-disabled-activity {
    background: url("/javax.faces.resource/images/disabled-activity-16x16.png.xhtml")!important;
	height: 16px;
	width: 16px;
}

.ui-icon-flux-document {
    background: url("/javax.faces.resource/images/document-node16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-home {
    background: url("/javax.faces.resource/images/home_small.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-minus {
    background: url("/javax.faces.resource/images/minus.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-network {
    background: url("/javax.faces.resource/images/network-16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-node {
    background: url("/javax.faces.resource/images/node16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-node-child {
    background: url("/javax.faces.resource/images/node-select-child16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-node-sister {
    background: url("/javax.faces.resource/images/node-select-sister16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-not-permitted-activity {
	background: url("/javax.faces.resource/images/tube-red16x16.png.xhtml")!important;
	height: 16px;
	width: 16px;
}

.ui-icon-flux-plus {
    background: url("/javax.faces.resource/images/plus.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-selected-document {
    background: url("/javax.faces.resource/images/blue-document-node16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-selected-node {
    background: url("/javax.faces.resource/images/node-select16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-tube-empty {
    background: url("/javax.faces.resource/images/tube-empty16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-tube-full {
    background: url("/javax.faces.resource/images/tube-full16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-tube-red {
    background: url("/javax.faces.resource/images/tube-red16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-tube-yellow {
    background: url("/javax.faces.resource/images/tube-yellow16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-tube-blue {
    background: url("/javax.faces.resource/images/tube-blue16x16.png.xhtml")!important;
    height: 16px;
    width: 16px;
}

.ui-icon-flux-status-green {
    background: url("/javax.faces.resource/images/status-green-16x16.png.xhtml")!important;
	height: 16px;
	width: 16px;
}

.ui-icon-flux-status-red {
    background: url("")!important;
	height: 16px;
	width: 16px;
}

.ui-icon-flux-status-yellow {
    background: url("/javax.faces.resource/images/status-warning-16x16.png.xhtml")!important;
	height: 16px;
	width: 16px;
}

.ui-growl {
	margin-top: 60px;
}

.ui-layout-north {
	z-index: 20 !important;
	overflow: visible !important;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible !important;
}

.ui-layout-unit, #top .ui-layout-unit-content.ui-widget-content {
    padding: 0 !important;
}

.ui-menu.ui-widget li.ui-corner-all, .ui-menu.ui-widget a.ui-corner-all {
    border-radius: 2px;
    margin-right: 16px;
}

/* submenu width based on its content */
.ui-menubar .ui-menu-list {
	width: auto !important;
}

/* make space for rightward facing arrows */
.ui-menubar ul.ui-menuitem {
    padding-right: 64px !important;
}

/* hides the downward facing arrows of the menu item in the menubar */
.ui-menuitem-link > .ui-icon-triangle-1-s {
	display: none !important;
}

/* wraps the rightward facing arrows */
.ui-menuitem-link > span.ui-icon-triangle-1-e {
	position: absolute;
	right: 0px;
}

/* prevents line break after menu item icon (both below) */
.ui-menuitem > .ui-menuitem-link > .ui-menuitem-text {
	position: relative !important;
	margin-left: 6px !important;
}

.ui-menu-list > .ui-menuitem {
	/*display: inline-block;*/
	white-space: nowrap;
}

.ui-panel {
	border: 0;
}

.ui-panelgrid td {
	padding: 2.5px 3px 2.5px 3px;
}

.ui-panelgrid-cell {
	border: 0 !important;
}

.ui-state-highlight .ui-icon {
    background-image: url("/javax.faces.resource/images/ui-icons_333333_256x240.png.xhtml?ln=primefaces-bootstrap");	
}

.ui-themeswitcher a.ui-selectonemenu-label-container {
	text-decoration: none !important;
}

.ui-widget {
	font-size: 90%;
}

.ui-widget .ui-widget {
	font-size: 100%;
}

.unread-alerts {
	background-color: red;
	padding: 1px 3px;
	border-radius: 2px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}

.unread-alerts-new {
	background-color: var(--db-danger);
}

.ware-header, .ware-header tr {
    background-color: #157854;
}

.ware-header .header-image-link:hover {
    background: #30AC59;
}

.with-border>tbody>tr, .with-border>tbody>tr>td {  
	border-style: solid !important; 
}

/* .without-border td { */
/* 	vertical-align: top; */
/* } */

.without-border tr, .without-border td {
	border: 0;
	border-style: none !important; 
	margin: 0;
	padding: 0;
}

.without-border > tr, .without-border > td {
	border: 0;
    border-style: none !important; 
    margin: 0;
    padding: 0;
}

.wms-header, .wms-header tr {
    background-color: #d88f41;
}

.wms-header .header-image-link:hover {
    background: #FFA319;
}

.module-container {
	border-radius: 3px; 
	background-color: #39A0ED; 
	color: #fff; 
	font-size: 0.7rem; 
	white-space: nowrap; 
	padding: 0 5px; 
	max-width: 300px; 
	overflow: hidden; 
	text-overflow: ellipsis;
	margin-left: 5px;
}

/*******/
/* IDs */
/*******/

#banner-content {
	width:100%;
	background: url("/javax.faces.resource/images/logo.png.xhtml") no-repeat 0% 0%;
	background-size: contain;
	background-color: #0B4881;
	margin:0 auto;
	height:110%;
	font-size:140%;
}

#content {
	width: 70%;
	float: left;
}

#countdowntimer {
	display: block;
}

#footer {
	height: 70px;
	margin: 0 auto;
	padding: 0 20px;
	font-size: 14px;
}

#footer a {

}

#footer p {
	margin: 0;
	padding: 25px 0 0 0;
	text-align: center;
}

#footer .copyright {
	float: left;
}

#footer .link {
	float: right;
}

#globalthemeswitcher {
	position: absolute;
	top: 5px;
	right: 50px;
}

#header {
	border:none;
}

#header > .ui-layout-unit-content {
	padding: 0 !important;
}

#header-grid {
	width:100%;
	height:4em;
	border-collapse: separate;
}

#header-grid td{
	border-width: 0;
}

#logo {
	text-align: left;
}

#page {
	padding: 10px 0px;
	background: #FFFFFF;
}

#sidebar {
	float: left;
	width: 25%;
	padding: 0 10px;
	margin-left: -1px;
	overflow: hidden;
}

#sidebar a.ui-state-hover,#sidebar a.ui-state-highlight {
	border: 0 none;
	text-decoration: none;
	font-weight: normal;
}

#sidebar table {
	width: 100%;
}

#sidebar table td {
	vertical-align: top;
}

#sidebar ul {
	padding: 0;
	margin: 0;
}

#sidebar ul li {
	list-style-type: none;
	padding: 1px;
}

#top.ui-widget-content {
	border: none;
}

/*
 * Had to override the ui-state-error to work with ui-inputfield
 * since, when a inputfield validation fails, its contents and the background
 * were both colored white, so the user couldn't see what she was typing into
 * the input field.
 * Hack made by daniel conrado (2020-12-15)
 */
.ui-inputfield.ui-state-error 
{
	border: 1px solid #cd0a0a;
	color: inherit;
}

.workflow-card-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.workflow-card {
	flex: 1;
	box-sizing: border-box;
	border-radius: .5rem;
	box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
	margin-bottom: 8px;
	padding: 0;
	display: flex;
}

.workflow-card-header {
	margin: 0;
	padding: 16px;
	border-top-left-radius: .5rem;
	border-bottom-left-radius: .5rem;
	flex: 1;
	background-color: #0b4881;
}

.workflow-card-header h2 {
	margin: 0;
	text-align: center;
}

.workflow-card-header a {
	color: #fff;
	text-decoration: none;
}

.workflow-card-ruler {
	border-left-width: 4px;
	border-left-style: hidden; /* hidden for now */
	border-left-color: #c179b9; /* alternatives: purple #c179b9 red #B02E0C, yellow #FFAD05, blue #0D86C4. Color palette generated by: https://coolors.co/0b4881-f5f5f5-0d86c4-ffad05-b02e0c */
}

.workflow-card-body {
	flex: 3;
	padding: 16px;
	margin: 0;
}

.workflow-card-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.workflow-card-actions .primary {
	font-size: 108%;
	font-weight: bold;
	margin-bottom: 2px;
}

.action-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.action-container p:first-of-type {
	margin-top: 0;
}

.CodeMirror {
	height: auto;
}

body .ui-layout-unit {
	border: 0
}

.icon-badge:after {
	position:relative;
	right:8px;
	top:-10px;
	width:10px;
	height:10px;
	line-height:5px;
	padding:5px;
	color:var(--db-danger);
	background-color:var(--db-danger);
	font-size:5px;
	border-radius:30px;
	content:"A:";
	border:solid 1px var(--db-danger);
}   

.layoutpane-leftpanel {
	margin-top: 2px;
	margin-left: 0px;
	margin-right: 2px;
}

.layoutpane-rightpanel {
	margin-top: 2px;
	margin-left: 2px;
	margin-right: 0px;
}

.layoutpane-middlepanel {
	margin-top: 0px;
}

/* ============================================================
   Profile dialog — redesign 2026
   Prefixo db-prof- / db-pref- / db-form- para evitar colisões
   ============================================================ */

/* Remove padding padrão do dialog de perfil */
.db-profile-dlg .ui-dialog-content {
	padding: 0 !important;
}

/* Tabs: remove borda e espaçamento genérico do PrimeFaces */
.db-ptabs.ui-tabview .ui-tabview-panels {
	padding: 0 !important;
	border: none !important;
}

.db-ptabs.ui-tabview .ui-tabview-nav {
	background: #F2F4F8;
	border-bottom: 1px solid #DFE2EA !important;
	padding: 0 20px;
}

.db-ptabs.ui-tabview .ui-tabview-nav li a {
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 500;
	color: #757C8B;
}

.db-ptabs.ui-tabview .ui-tabview-nav li.ui-tabview-selected a,
.db-ptabs.ui-tabview .ui-tabview-nav li.ui-state-active a {
	color: #115FA8;
}

/* ---- Avatar ---- */
.db-prof-body {
	display: flex;
	gap: 28px;
	padding: 24px;
	min-width: 380px;
}

.db-prof-avatar-col {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.db-prof-avatar-btn.ui-commandlink,
.db-prof-avatar-btn.ui-commandlink:hover {
	position: relative;
	display: inline-block;
	border: none !important;
	background: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	text-decoration: none;
	outline: none;
}

.db-prof-avatar-img {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	object-fit: cover;
	border: 3px solid #C2D8F1;
	display: block;
	transition: border-color 0.15s;
}

.db-prof-avatar-btn:hover .db-prof-avatar-img {
	border-color: #115FA8;
}

.db-prof-avatar-badge {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 22px;
	height: 22px;
	background: #115FA8;
	border-radius: 50%;
	border: 2px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 10px;
	pointer-events: none;
}

.db-prof-avatar-hint {
	font-size: 11px;
	color: #9AA1AE;
	text-align: center;
	max-width: 80px;
	line-height: 1.3;
}

/* ---- Info ---- */
.db-prof-info-col {
	flex: 1;
	min-width: 0;
}

.db-prof-name {
	font-size: 17px;
	font-weight: 700;
	color: #062A57;
	margin: 0 0 18px 0;
	line-height: 1.25;
}

.db-prof-field {
	margin-bottom: 14px;
}

.db-prof-field-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #9AA1AE;
	margin-bottom: 2px;
}

.db-prof-field-value {
	display: block;
	font-size: 14px;
	color: #242833;
	word-break: break-all;
}

.db-prof-actions {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #EAEDF3;
}

.db-prof-btn.ui-commandlink {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 7px 14px !important;
	border: 1px solid #C2D8F1 !important;
	background: transparent !important;
	color: #115FA8 !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.12s, border-color 0.12s;
}

.db-prof-btn.ui-commandlink:hover {
	background: #F1F6FC !important;
	border-color: #115FA8 !important;
}

/* ---- Preferences tab ---- */
.db-pref-body {
	padding: 24px;
	min-width: 380px;
}

.db-pref-item {
	margin-bottom: 20px;
}

.db-pref-item-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #565C6B;
	margin-bottom: 10px;
}

/* ---- Sub-dialogs (senha, foto) ---- */
.db-subdlg .ui-dialog-content {
	padding: 0 !important;
}

.db-form-body {
	padding: 20px 24px 8px;
}

.db-form-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}

.db-form-label.ui-outputlabel {
	font-size: 12px;
	font-weight: 600;
	color: #565C6B;
	margin-bottom: 5px;
}

.db-form-input .ui-inputfield {
	border-radius: 6px;
	border: 1px solid #C3C8D2;
	padding: 8px 10px;
	font-size: 13px;
	width: 100%;
	box-sizing: border-box;
}

.db-form-input .ui-inputfield:focus {
	border-color: #115FA8;
	outline: none;
	box-shadow: 0 0 0 3px rgba(17,95,168,0.12);
}

.db-form-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	padding: 12px 24px 20px;
	border-top: 1px solid #EAEDF3;
	margin-top: 8px;
}

.db-form-btn-primary.ui-button {
	background: #115FA8 !important;
	border-color: #115FA8 !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 8px 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.db-form-btn-primary.ui-button:hover {
	background: #0A4C8C !important;
	border-color: #0A4C8C !important;
}

.db-form-btn-ghost.ui-button {
	background: transparent !important;
	border: 1px solid #C3C8D2 !important;
	color: #565C6B !important;
	border-radius: 6px !important;
	padding: 8px 18px !important;
	font-size: 13px !important;
}

/* ============================================================
   p:fileUpload dentro do dialog de perfil
   ============================================================ */
.db-subdlg .ui-fileupload {
	border: none !important;
	border-radius: 0;
}

.db-subdlg .ui-fileupload .ui-fileupload-buttonbar {
	background: #F2F4F8 !important;
	border: none !important;
	border-bottom: 1px solid #DFE2EA !important;
	padding: 12px 16px !important;
	display: flex;
	gap: 8px;
	align-items: center;
	border-radius: 0 !important;
}

/* Botão "Escolher" — primário azul */
.db-subdlg .ui-fileupload .ui-fileupload-choose.ui-button {
	background: #115FA8 !important;
	border: 1px solid #115FA8 !important;
	color: #fff !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 7px 14px !important;
	box-shadow: none !important;
	order: 1;
}
.db-subdlg .ui-fileupload .ui-fileupload-choose.ui-button:hover {
	background: #0A4C8C !important;
	border-color: #0A4C8C !important;
}

/* Botão "Enviar" — verde */
.db-subdlg .ui-fileupload .ui-fileupload-upload.ui-button {
	background: #1F8A4C !important;
	border: 1px solid #1F8A4C !important;
	color: #fff !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 7px 14px !important;
	box-shadow: none !important;
	order: 2;
}
.db-subdlg .ui-fileupload .ui-fileupload-upload.ui-button:hover {
	background: #166B3A !important;
	border-color: #166B3A !important;
}

/* Botão "Cancelar" — outline neutro */
.db-subdlg .ui-fileupload .ui-fileupload-cancel.ui-button {
	background: transparent !important;
	border: 1px solid #C3C8D2 !important;
	color: #565C6B !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	padding: 7px 14px !important;
	box-shadow: none !important;
	order: 3;
}
.db-subdlg .ui-fileupload .ui-fileupload-cancel.ui-button:hover {
	background: #F2F4F8 !important;
}

/* Área de drop / conteúdo */
.db-subdlg .ui-fileupload .ui-fileupload-content {
	background: #F8F9FC !important;
	border: 2px dashed #C3C8D2 !important;
	border-radius: 0 !important;
	padding: 28px 16px !important;
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
}

.db-subdlg .ui-fileupload .ui-fileupload-content:hover {
	border-color: #115FA8 !important;
	background: #F1F6FC !important;
}

/* Texto vazio da área de drop */
.db-subdlg .ui-fileupload .ui-fileupload-empty {
	color: #9AA1AE;
	font-size: 13px;
	margin: 0;
}

/* Ícone de upload acima do texto vazio */
.db-subdlg .ui-fileupload .ui-fileupload-empty::before {
	content: '\e944'; /* pi-cloud-upload */
	font-family: 'primeicons';
	font-size: 24px;
	color: #C3C8D2;
	display: block;
	margin-bottom: 6px;
}

/* Barra de progresso */
.db-subdlg .ui-fileupload .ui-progressbar {
	height: 4px !important;
	border-radius: 2px !important;
	background: #DFE2EA !important;
	border: none !important;
	margin: 0 !important;
}
.db-subdlg .ui-fileupload .ui-progressbar-value {
	background: #115FA8 !important;
	border-radius: 2px !important;
}

/* Arquivos selecionados */
.db-subdlg .ui-fileupload .ui-fileupload-files .ui-fileupload-row {
	border-bottom: 1px solid #EAEDF3;
	padding: 8px 16px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.db-subdlg .ui-fileupload .ui-fileupload-files .ui-fileupload-row td {
	padding: 4px 6px;
	font-size: 13px;
	color: #242833;
}

/* Remove o padding interno do db-form-body quando contém fileupload */
.db-form-body .ui-fileupload {
	margin: -20px -24px -8px;
}

/* ============================================================
   act-btn — sistema de botões global (disponível em todas as páginas)
   Usa display:inline-block + position:relative/absolute para ícones —
   abordagem padrão do PrimeFaces, sem bug do Chrome com inline-flex.
   ============================================================ */

.act-btn.ui-button,
.act-btn {
  display: inline-block !important;
  position: relative !important;
  vertical-align: middle !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  line-height: 1.4 !important;
  white-space: nowrap;
  height: auto !important;
  transition: background 100ms ease-out;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.act-btn .ui-button-text {
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}
/* botão com ícone à esquerda: recua o texto para dar espaço ao ícone */
.act-btn.ui-button-text-icon-left {
  padding-left: 28px !important;
}
/* ícone posicionado absolutamente, centrado verticalmente */
.act-btn .ui-button-icon-left {
  position: absolute !important;
  top: 50% !important;
  left: 8px !important;
  margin-top: -7px !important;
  margin-left: 0 !important;
  font-size: 14px !important;
  font-size-adjust: none !important;
  width: auto !important;
  line-height: 1 !important;
}
.act-btn .ui-button-icon-right {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  margin-top: -7px !important;
  font-size: 14px !important;
  font-size-adjust: none !important;
  width: auto !important;
  line-height: 1 !important;
}
.act-btn.ui-state-disabled,
.act-btn[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* cor de texto/ícone por variante */
.act-btn--primary .ui-button-text,
.act-btn--primary .ui-button-icon-left,
.act-btn--primary .ui-button-icon-right { color: #ffffff !important; }
.act-btn--success .ui-button-text,
.act-btn--success .ui-button-icon-left,
.act-btn--success .ui-button-icon-right { color: #ffffff !important; }
.act-btn--danger .ui-button-text,
.act-btn--danger .ui-button-icon-left,
.act-btn--danger .ui-button-icon-right { color: #ffffff !important; }
.act-btn--secondary .ui-button-text,
.act-btn--secondary .ui-button-icon-left,
.act-btn--secondary .ui-button-icon-right { color: var(--db-blue-700) !important; }
.act-btn--ghost .ui-button-text,
.act-btn--ghost .ui-button-icon-left,
.act-btn--ghost .ui-button-icon-right { color: var(--db-gray-600) !important; }

/* Primary (azul) */
.act-btn--primary.ui-button,
.act-btn--primary {
  background: var(--db-blue-600) !important;
  color: var(--db-white) !important;
  border-color: var(--db-blue-600) !important;
}
.act-btn--primary:not([disabled]):hover  { background: var(--db-blue-700) !important; border-color: var(--db-blue-700) !important; }
.act-btn--primary:not([disabled]):active { background: var(--db-blue-800) !important; }

/* Success (verde) */
.act-btn--success.ui-button,
.act-btn--success {
  background: #16a34a !important;
  color: #fff !important;
  border-color: #16a34a !important;
}
.act-btn--success:not([disabled]):hover { background: #15803d !important; border-color: #15803d !important; }

/* Danger (vermelho) */
.act-btn--danger.ui-button,
.act-btn--danger {
  background: var(--db-danger) !important;
  color: #fff !important;
  border-color: var(--db-danger) !important;
}
.act-btn--danger:not([disabled]):hover { background: var(--db-danger-strong) !important; border-color: var(--db-danger-strong) !important; }

/* Secondary (azul delineado) */
.act-btn--secondary.ui-button,
.act-btn--secondary {
  background: var(--db-white) !important;
  color: var(--db-blue-700) !important;
  border: 1px solid var(--db-blue-300) !important;
  box-shadow: 0 1px 2px rgba(17,95,168,0.08) !important;
}
.act-btn--secondary:not([disabled]):hover  { background: var(--db-blue-50) !important; border-color: var(--db-blue-400) !important; box-shadow: 0 1px 4px rgba(17,95,168,0.14) !important; }
.act-btn--secondary:not([disabled]):active { background: var(--db-blue-100) !important; box-shadow: none !important; }

/* Ghost (cinza sutil) */
.act-btn--ghost.ui-button,
.act-btn--ghost {
  background: var(--db-gray-100) !important;
  background-image: none !important;
  color: var(--db-gray-600) !important;
  border: 1px solid var(--db-gray-200) !important;
}
.act-btn--ghost:not([disabled]):hover { background: var(--db-gray-200) !important; border-color: var(--db-gray-300) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important; }

/* Icon-only: quadrado compacto, ícone centrado */
.act-btn.ui-button-icon-only {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}
.act-btn.ui-button-icon-only .ui-button-icon-left {
  left: 50% !important;
  margin-left: -7px !important;
  top: 50% !important;
  margin-top: -7px !important;
  font-size: 14px !important;
}
.act-btn.ui-button-icon-only .ui-button-text {
  display: none !important;
}

/* ----------------------------------------------------------------
   SVG icon buttons: substituem PrimeIcons nos act-btn, sem bug Chrome.
   inline-flex é seguro com SVG (não usa ::before).
   .icon-svg  = botão só com ícone (32x32)
   .text-icon-svg = botão com ícone + texto
   ---------------------------------------------------------------- */
.act-btn.icon-svg,
.act-btn.text-icon-svg {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
}
.act-btn.icon-svg {
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  gap: 0 !important;
}
.act-btn.icon-svg .ui-button-text { display: none !important; }

.act-btn.text-icon-svg {
  gap: 5px !important;
  padding: 6px 12px !important;
}
.act-btn.text-icon-svg .ui-button-text {
  order: 2 !important;
  padding: 0 !important;
}
/* SVG shared styles */
.act-btn.icon-svg svg,
.act-btn.text-icon-svg svg {
  order: 1 !important;
  display: block !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

/* ── fix Chrome font-size-adjust bug em ícones PrimeIcons ─────────────────
   font-size-adjust: 0.5 no body faz o Chrome 127+ recalcular o tamanho de
   icon fonts com base no aspect-ratio do glifo, reduzindo-os à metade.
   Firefox implementa de forma diferente e não é afetado.
   Solução: desabilitar font-size-adjust em todos os pontos onde PrimeIcons
   aparecem como ícone (botão, menu, toggler, datatable).                 */
.pi,
.ui-button-icon-left,
.ui-button-icon-right,
.ui-menuitem-icon,
.ui-icon {
  font-size-adjust: none !important;
}

/* ============================================================
   Camada mobile global — telas legadas (listas, dialogs, exporters)
   Complementa o drawer de navegação definido acima (breakpoint 800px)
   ============================================================ */
@media screen and (max-width: 800px) {

  /* dialogs nunca maiores que a viewport; conteúdo largo rola dentro */
  .ui-dialog {
    max-width: 95vw !important;
    width: auto !important;
  }
  .ui-dialog .ui-dialog-content {
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }

  /* overlays (painel de alertas do header etc.) limitados à viewport */
  .ui-overlaypanel { max-width: 92vw !important; }

  /* dialogs não podem impor largura mínima maior que a tela (ex.: minwidth
     de p:dialog vira min-width inline via JS) */
  .ui-dialog { min-width: 0 !important; }

  /* formulários dentro de dialogs: label acima do campo, campos na largura
     toda — vale para agendamento de atividade, tipos declarados (TDU) etc.
     O panelGrid vira flex-coluna com order: o PF renderiza <tfoot> ANTES do
     <tbody>, e sem o order o rodapé (botões) apareceria no topo. */
  .ui-dialog .ui-panelgrid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ui-dialog .ui-panelgrid > thead { order: 0; }
  .ui-dialog .ui-panelgrid > tbody { order: 1; }
  .ui-dialog .ui-panelgrid > tfoot { order: 2; }
  .ui-dialog .ui-panelgrid > thead,
  .ui-dialog .ui-panelgrid > tfoot,
  .ui-dialog .ui-panelgrid > thead > tr,
  .ui-dialog .ui-panelgrid > tfoot > tr,
  .ui-dialog .ui-panelgrid > thead > tr > td,
  .ui-dialog .ui-panelgrid > tfoot > tr > td,
  .ui-dialog .ui-panelgrid > tbody,
  .ui-dialog .ui-panelgrid > tbody > tr,
  .ui-dialog .ui-panelgrid > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  .ui-dialog input.ui-inputfield,
  .ui-dialog textarea.ui-inputfield,
  .ui-dialog .ui-selectonemenu {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ui-dialog .ui-fieldset { margin-top: 10px !important; }

  /* dialog cabe na altura da tela; o conteúdo rola por dentro (botões
     do rodapé sempre alcançáveis) */
  .ui-dialog {
    max-height: 90vh !important;
    top: 5vh !important;
  }
  .ui-dialog .ui-dialog-content {
    max-height: calc(90vh - 46px) !important;
    overflow-y: auto !important;
  }

  /* respiro vertical compacto nos formulários empilhados */
  .ui-dialog .ui-panelgrid > tbody > tr > td,
  .ui-dialog .ui-panelgrid .ui-panelgrid-cell {
    padding: 3px 2px !important;
  }
  .ui-dialog .ui-panelgrid { margin: 0 !important; }
  .ui-dialog .formLabel {
    display: inline-block !important;
    margin: 10px 0 2px !important;
  }

  /* p:calendar: input + botão do calendário na mesma linha */
  .ui-dialog .ui-calendar {
    display: inline-flex !important;
    width: 100% !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }
  .ui-dialog .ui-calendar input.ui-inputfield {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .ui-dialog .ui-calendar .ui-datepicker-trigger {
    flex: 0 0 auto !important;
    margin-left: 6px !important;
  }

  /* orderList em dialogs: lista na largura toda, controles em fileira */
  .ui-dialog .ui-orderlist,
  .ui-dialog .ui-orderlist > tbody,
  .ui-dialog .ui-orderlist > tbody > tr,
  .ui-dialog .ui-orderlist > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ui-dialog .ui-orderlist .ui-orderlist-list { width: 100% !important; }
  .ui-dialog .ui-orderlist .ui-orderlist-controls {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 6px 0 0 !important;
    width: 100% !important;
  }
  .ui-dialog .ui-orderlist .ui-orderlist-controls .ui-button {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* pickList em dialogs: origem, botões e destino empilhados */
  .ui-dialog .ui-picklist,
  .ui-dialog .ui-picklist > tbody,
  .ui-dialog .ui-picklist > tbody > tr,
  .ui-dialog .ui-picklist > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .ui-dialog .ui-picklist .ui-picklist-list { width: 100% !important; }
  .ui-dialog .ui-picklist .ui-picklist-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 6px 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  .ui-dialog .ui-picklist .ui-picklist-buttons .ui-button {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .ui-dialog .ui-picklist .ui-picklist-buttons-cell { text-align: center !important; }

  /* datepicker: cabe na tela; meses múltiplos empilham em vez de lado a lado */
  .ui-datepicker {
    max-width: 95vw !important;
    width: auto !important;
  }
  .ui-datepicker .ui-datepicker-group {
    float: none !important;
    width: 100% !important;
  }

  /* cabeçalho das listas legadas (<table> com filtro + toggler) empilha */
  .ui-datatable-header table,
  .ui-datatable-header table > tbody,
  .ui-datatable-header table > tbody > tr,
  .ui-datatable-header table td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  .ui-datatable-header input.ui-inputfield {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* tabela larga rola dentro do wrapper em vez de estourar a página */
  .ui-datatable-tablewrapper { overflow-x: auto !important; }

  /* paginador quebra linha em vez de vazar */
  .ui-paginator { white-space: normal !important; }

  /* painéis de exportação (Exportar Tudo / Página Atual) empilham */
  .ui-panelgrid:has(> tbody > tr > td > .ui-panel) > tbody > tr,
  .ui-panelgrid:has(> tbody > tr > td > .ui-panel) > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }
}

/* ============================================================
   Mobile: tabelas reflow empilhadas e grids de cards fluidos
   ============================================================ */
@media screen and (max-width: 800px) {

  /* dataTable reflow: célula vira bloco com o título da coluna acima do valor.
     Exclui tabelas com cabeçalho agrupado (p:columnGroup = thead com 2 linhas),
     que não geram ui-column-title — nelas vale o scroll interno do wrapper */
  .ui-datatable-reflow:not(:has(thead > tr + tr)) thead { display: none !important; }
  /* cada linha vira um card: separação inequívoca entre um item e o próximo */
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody > tr {
    display: block !important;
    margin: 10px 8px !important;
    border: 1px solid var(--db-gray-200) !important;
    border-radius: 8px !important;
    background: var(--db-white) !important;
    box-shadow: var(--db-shadow-sm) !important;
    overflow: hidden !important;
  }
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody > tr.ui-datatable-odd,
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody > tr.ui-datatable-even {
    background: var(--db-white) !important;
  }
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    border: 0 !important;
    padding: 6px 14px !important;  float: none !important;
    clear: none !important;
  }
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody td:first-child { padding-top: 12px !important; }
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody td:last-child { padding-bottom: 12px !important; }
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody td .ui-column-title {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--db-gray-400) !important;
    margin-bottom: 3px !important;
  }

  /* colunas de ação (botões): lado a lado, sem rótulo — evita linhas gigantes.
     Além das marcadas com mobile-action-col, qualquer célula cujo conteúdo
     seja um botão de ícone entra na fileira automaticamente */
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody td.mobile-action-col,
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody td:has(.act-btn.ui-button-icon-only) {
    display: inline-block !important;
    width: auto !important;
    padding: 6px 8px !important;
    vertical-align: middle !important;  float: none !important;
    clear: none !important;
  }
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody td.mobile-action-col .ui-column-title,
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody td:has(.act-btn.ui-button-icon-only) .ui-column-title {
    display: none !important;
  }

  /* colunas técnicas/longas marcadas para não aparecer no celular */
  .ui-datatable-reflow tbody td.mobile-hide-col { display: none !important; }

  /* conteúdo longo quebra dentro da célula empilhada em vez de vazar */
  .ui-datatable-reflow:not(:has(thead > tr + tr)) tbody td {
    overflow-wrap: anywhere;
  }

  /* dataGrid (cards de workflows/registros): grade fluida, 2 cards por linha.
     flex-basis dimensiona o item no eixo principal e torna inócuos os
     width fixos (12.5%/25%) herdados de workflowGrid.css */
  .ui-datagrid-content table,
  .ui-datagrid-content tbody {
    display: block !important;
    width: 100% !important;
  }
  .ui-datagrid .ui-datagrid-row {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .ui-datagrid .ui-datagrid-column {
    display: block !important;
    flex: 1 1 46% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 560px) {
  /* cards: 1 por linha em telas bem pequenas */
  .ui-datagrid .ui-datagrid-column { flex-basis: 100% !important; }
}

/* ============================================================
   Mobile: painel esquerdo (pe:layout west) como aba lateral
   ============================================================ */
@media screen and (max-width: 800px) {
  /* barra fechada: invisível e sem capturar toques (o plugin só reserva 6px
     no layout — qualquer largura a mais sobrepõe o conteúdo); só a alça-pílula
     centralizada é tocável */
  .ui-layout-resizer-west-closed {
    width: 20px !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 950 !important;
  }
  .ui-layout-toggler-west-closed {
    pointer-events: auto !important;
    width: 20px !important;
    height: 64px !important;
    background: var(--db-blue-600) !important;
    opacity: 0.85 !important;
    border-radius: 0 10px 10px 0 !important;
  }
  .ui-layout-toggler-west-closed:after {
    content: "\203A";
    display: block;
    color: #fff;
    font-size: 18px;
    line-height: 64px;
    text-align: center;
  }
  /* painel aberto: barra fina, só a alça fecha */
  .ui-layout-resizer-west-open {
    width: 12px !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 950 !important;
  }
  .ui-layout-toggler-west-open {
    pointer-events: auto !important;
    width: 12px !important;
    height: 64px !important;
    background: var(--db-gray-400) !important;
    border-radius: 0 8px 8px 0 !important;
  }
  /* painel aberto desliza sobre o conteúdo sem passar da viewport */
  .ui-layout-pane-west {
    max-width: 86vw !important;
    box-shadow: 6px 0 18px rgba(8, 56, 120, 0.18) !important;
  }
}

/* ============================================================
   p:editor (ex.: CONTENT do INFORMATION no editor de atributos):
   caber no container sem vazar e com área de edição maior
   ============================================================ */
.ui-editor,
.cleditorMain {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
}
.cleditorMain iframe,
.cleditorMain textarea {
  width: 100% !important;
  min-height: 240px !important;
  box-sizing: border-box !important;
}

/* ============================================================
   Dialogs — chrome Satya global (todos os p:dialog do sistema).
   Especificidade baixa de propósito: dialogs com estilo próprio
   (db-profile-dlg, db-subdlg, flux-dlg) prevalecem onde definirem.
   ============================================================ */
.ui-dialog {
  border: 1px solid var(--db-gray-200) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 40px rgba(8, 56, 120, 0.22) !important;
}
.ui-dialog-titlebar {
  background: var(--db-white) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--db-gray-200) !important;
  padding: 14px 20px !important;
}
.ui-dialog-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--db-gray-800) !important;
}
.ui-dialog-titlebar-icon {
  color: var(--db-gray-500) !important;
}
.ui-dialog-content {
  background: var(--db-white) !important;
}
/* contenção de altura em qualquer tela: com max-height, a centralização do
   PrimeFaces nunca calcula top negativo — a barra de título (alça de
   arrastar) permanece sempre visível; o conteúdo rola por dentro */
.ui-dialog {
  max-height: 92vh !important;
}
.ui-dialog .ui-dialog-content {
  max-height: calc(92vh - 52px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
/* textareas em dialogs nunca crescem além da viewport (autoResize) */
.ui-dialog textarea.ui-inputfield {
  max-height: 45vh !important;
  overflow-y: auto !important;
}
/* labels de formulário dentro de dialogs seguem a tipografia do sistema */
.ui-dialog .formLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--db-gray-700);
}

/* ============================================================
   flux-dlg — dialog de formulário reestruturado (Satya).
   Utilitários: flux-dlg-intro/hint/section/eyebrow/grid/field/actions
   ============================================================ */
.flux-dlg .ui-dialog-content {
  padding: 18px 20px 20px !important;
}
.flux-dlg-intro,
.flux-dlg-hint {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--db-gray-500);
}
.flux-dlg-hint { margin-bottom: 12px; font-size: 12px; }

.flux-dlg-section + .flux-dlg-section {
  border-top: 1px solid var(--db-gray-150);
  margin-top: 16px;
  padding-top: 14px;
}
.flux-dlg-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--db-blue-600);
  margin-bottom: 4px;
}

.flux-dlg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.flux-dlg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.flux-dlg-field--full { grid-column: 1 / -1; }
.flux-dlg-field > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--db-gray-700);
}
.flux-dlg-field input.ui-inputfield,
.flux-dlg-field textarea.ui-inputfield,
.flux-dlg-field .ui-selectcheckboxmenu,
.flux-dlg-field .ui-selectonemenu {
  width: 100% !important;
  box-sizing: border-box !important;
}
.flux-dlg-field .ui-calendar {
  display: inline-flex !important;
  width: 100% !important;
  align-items: stretch !important;
}
.flux-dlg-field .ui-calendar input.ui-inputfield {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
.flux-dlg-field .ui-calendar .ui-datepicker-trigger {
  flex: 0 0 auto !important;
  margin-left: 6px !important;
}
.flux-dlg-field .ui-spinner { width: 130px !important; }

.flux-dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--db-gray-150);
  margin-top: 18px;
  padding-top: 14px;
}

@media (max-width: 800px) {
  .flux-dlg-grid { grid-template-columns: 1fr; }
  .flux-dlg-actions { flex-direction: column-reverse; }
  .flux-dlg-actions .act-btn { width: 100%; text-align: center; }
}

/* flux-dlg: complementos — fileira de botões, listas e abas */
.flux-dlg-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
/* primário sempre na ponta direita, independente da ordem no markup */
.flux-dlg-actions .act-btn--primary { order: 2; }

.flux-dlg-field .ui-orderlist,
.flux-dlg-field .ui-picklist {
  max-width: 100%;
  width: auto !important;
  align-self: flex-start; /* não esticar: controles ficam colados na lista */
}
.flux-dlg-field .ui-orderlist .ui-orderlist-list { min-width: 240px; }
.flux-dlg-field .ui-orderlist .ui-orderlist-controls { padding-left: 8px !important; }
.flux-dlg-field .ui-picklist .ui-picklist-buttons { padding: 0 8px !important; }
/* em meia coluna, as listas do pickList encolhem para caber lado a lado */
.flux-dlg-field:not(.flux-dlg-field--full) .ui-picklist .ui-picklist-list {
  width: 140px !important;
  min-width: 0 !important;
}
.flux-dlg-field--full .ui-picklist .ui-picklist-list { min-width: 220px; }

.flux-dlg .ui-tabs.ui-tabs-top > .ui-tabs-nav {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--db-gray-200) !important;
  padding: 0 !important;
}
.flux-dlg .ui-tabs .ui-tabs-nav li {
  background: transparent !important;
  border: 0 !important;
  margin-bottom: -2px !important;
}
.flux-dlg .ui-tabs .ui-tabs-nav li a {
  color: var(--db-gray-500) !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
}
.flux-dlg .ui-tabs .ui-tabs-nav li.ui-state-active {
  border-bottom: 2px solid var(--db-blue-600) !important;
}
.flux-dlg .ui-tabs .ui-tabs-nav li.ui-state-active a {
  color: var(--db-blue-700) !important;
}
.flux-dlg .ui-tabs .ui-tabs-panels {
  border: 0 !important;
  padding: 14px 0 0 !important;
}

/* flux-dlg: passos de wizard (p:panel como etapa — busca avançada etc.) */
.flux-dlg .ui-panel {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.flux-dlg .ui-panel > .ui-panel-titlebar {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 10px !important;
}
.flux-dlg .ui-panel > .ui-panel-titlebar .ui-panel-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--db-gray-800) !important;
}
.flux-dlg .ui-panel > .ui-panel-content {
  background: transparent !important;
  padding: 0 !important;
}
.flux-dlg .ui-panel > .ui-panel-footer {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--db-gray-150) !important;
  margin-top: 14px !important;
  padding: 12px 0 0 !important;
}
.flux-dlg .ui-panel > .ui-panel-footer > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
/* Cancelar à esquerda, Anterior/Próximo(Concluir) à direita */
.flux-dlg .ui-panel > .ui-panel-footer .act-btn--danger { order: 0; margin-right: auto !important; }
.flux-dlg .ui-panel > .ui-panel-footer .act-btn--secondary { order: 1; }
.flux-dlg .ui-panel > .ui-panel-footer .act-btn--primary,
.flux-dlg .ui-panel > .ui-panel-footer .act-btn--success { order: 2; }

@media (max-width: 800px) {
  .flux-dlg .ui-panel > .ui-panel-footer .act-btn { flex: 1 1 auto; text-align: center; }
  .flux-dlg .ui-panel > .ui-panel-footer .act-btn--danger { margin-right: 0 !important; }
}