/*** --------------------------------------------------------------------------------
	custom styles for this application
-------------------------------------------------------------------------------- ***/

:root {
	--app-topbar-height: 52px;
	--app-sidebar-width: 220px;
	--app-sidebar-collapsed-width: 50px;
}

/*** _Layout ***/
body main {
	/* Set padding to keep content from hitting the edges */
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
}

body.env-dev .env-alert::before {
	content: 'DEV';
	font-size: 1rem;
	color: red !important;
}

body.env-test .env-alert::before {
	content: 'TEST';
	font-size: 1rem;
	color: yellow !important;
}

/*** left bar ***/
nav.sidebar {
	position: fixed;
	top: var(--app-topbar-height);
	bottom: 0;
}

	nav.sidebar .sidebar-heading {
		margin-top: 1rem !important;
		padding-left: 0 !important;
		padding-right: 1rem !important;
	}

	nav.sidebar .nav-link {
		padding: 0.35rem 1rem;
	}

/*** top bar ***/
nav.navbar {
	height: var(--app-topbar-height);
}

.navbar-brand {
	padding-left: 1rem;
}

	.navbar-brand img {
		max-height: 24px;
		margin-right: 0.75rem;
	}

.navbar-user {
	display: list-item;
}

	.navbar-user .nav-item {
		display: inline-block;
		margin-left: 1rem;
		white-space: nowrap !important;
	}

	.navbar-user .nav-link {
		cursor: pointer;
	}

	.navbar-user .dropdown-menu {
		position: absolute;
	}

.navbar-collapse {
	margin-left: -1rem;
	margin-right: -1rem;
	background-color: inherit;
}

	.navbar-collapse .navbar-nav {
		padding-left: 1rem;
		padding-right: 1rem;
	}

/* top bar merged into sidebar */
nav.navbar.sticky-left {
	flex-direction: column;
	position: fixed;
	z-index: 2000;
	bottom: 0;
	top: 0;
	height: auto;
	width: var(--app-sidebar-width);
	max-width: var(--app-sidebar-width);
}

	nav.navbar.sticky-left .navbar-brand {
		margin-top: 0.37rem;
		max-width: unset;
		text-align: center;
	}

	nav.navbar.sticky-left > ul.navbar-nav {
		margin: 0 0.5rem 0 0 !important;
		font-size: 0.85rem;
		z-index: 2002;
	}

		nav.navbar.sticky-left > ul.navbar-nav .navbar-nav.navbar-user {
			padding: 0 1rem;
			border-top: 1px solid #6c757d;

			/* */
			top: unset;
			bottom: 0;
			border-bottom: 0;
		}

			nav.navbar.sticky-left > ul.navbar-nav .navbar-nav.navbar-user li {
				display: block;
				margin-left: 0.25rem;
			}

				nav.navbar.sticky-left > ul.navbar-nav .navbar-nav.navbar-user li .nav-link {
					padding: 0.25rem 0;
				}

			nav.navbar.sticky-left > ul.navbar-nav .navbar-nav.navbar-user .dropdown-menu {
				top: -50px;
				left: calc(var(--app-sidebar-width) - 20px);
			}

	nav.navbar.sticky-left + div.container-fluid nav.sidebar {
		padding-top: 75px;

		/* */
		bottom: unset;
		padding-top: 0;
		z-index: 2001;
	}

/* trying to simplify sidebar + main */
nav.sidebar {
	left: 0;
	padding: 0 15px;
	width: var(--app-sidebar-width);
	max-width: var(--app-sidebar-width);
}

	nav.sidebar + main {
		margin-left: var(--app-sidebar-width);
		padding-right: 0;
		padding-left: 0;
	}

/* smooth sidebar transitions (for collapsing below) */
nav.navbar.smooth {
	transition: 0.25s;
	transition-property: width;
}

	nav.navbar.smooth + div.container-fluid nav.sidebar {
		transition: 0.25s;
		transition-property: width;
	}

		nav.navbar.smooth + div.container-fluid nav.sidebar + main {
			transition: 0.25s;
			transition-property: margin-left;
		}

/* collapsing sidebar */
nav.navbar.sticky-left.collapsed,
nav.navbar.collapsed + div.container-fluid nav.sidebar {
	width: var(--app-sidebar-collapsed-width);
	padding: 0 2px;
}

	nav.navbar.collapsed + div.container-fluid nav.sidebar .sidebar-heading {
		visibility: collapse;
	}

	nav.navbar.collapsed + div.container-fluid nav.sidebar .nav-item {
		width: 100%;
	}

	nav.navbar.collapsed + div.container-fluid nav.sidebar .nav-item span {
		display: none;
	}

	nav.navbar.collapsed + div.container-fluid nav.sidebar + main {
		margin-left: var(--app-sidebar-collapsed-width);
	}

nav.navbar.collapsed .navbar-nav .nav-item i.bi.bi-arrow-bar-left::before {
	content: "\f114";
}

	nav.navbar.sticky-left.collapsed .navbar-brand {
		padding-left: 0;
	}

		nav.navbar.sticky-left.collapsed .navbar-brand img {
			margin: 0;
			max-width: 90%;
			display: block;
		}

	nav.navbar.sticky-left.collapsed .navbar-nav {
		padding: 0 !important;
	}

		nav.navbar.sticky-left.collapsed .navbar-nav .nav-item {
			width: 100%;
			margin: 0;
			padding: 0 !important;
			text-align: center;
		}

			nav.navbar.sticky-left.collapsed .navbar-nav .nav-item span {
				display: none;
			}

	nav.navbar.sticky-left.collapsed > ul.navbar-nav .navbar-nav.navbar-user .dropdown-menu {
		left: calc(10px + var(--app-sidebar-collapsed-width));
	}





@media (min-width: 992px) {
	nav.navbar.sticky-left div.navbar-collapse {
		width: 100%;
		flex-direction: column;
	}

		nav.navbar.sticky-left div.navbar-collapse .navbar-brand {
			width: 100%;
			margin-left: 2rem;
			margin-bottom: 1rem;
		}

			nav.navbar.sticky-left div.navbar-collapse .navbar-brand img {
				/* display brand image by itself in a single line (because of responsive sidebar) */
				display: block;
			}

	nav.navbar.sticky-left ul.navbar-nav {
		flex-direction: column;
		width: 100%;
		margin-left: 2rem;
		padding: 0;
	}

	nav.navbar.sticky-left ul.navbar-user {
		position: absolute;
		bottom: 3rem;
		width: 90%;
		margin-left: 0;
		text-overflow: ellipsis;
	}

		nav.navbar.sticky-left ul.navbar-user li {
			width: 100%;
		}

		nav.navbar.sticky-left ul.navbar-user a {
			width: 100%;
			text-overflow: ellipsis;
			overflow: hidden;
		}

	nav.navbar.sticky-left + main {
		margin-left: 18vw;
	}
}

/*** typography ***/
.page-header {
	margin: 1rem auto;
}

	.page-header img {
		float: left;
		margin-right: 1rem;
		max-width: 20vw;
	}

	.page-header h1 {
		margin-bottom: 0;
		overflow-wrap: break-word;
	}

	.page-header h3 {
		font-size: 40px;
		font-stretch: normal;
		font-style: normal;
		line-height: 1.17;
		letter-spacing: normal;
		color: rgba(0, 0, 0, 0.87);
	}

	.page-header p {
		font-size: 15px;
		font-weight: 500;
		font-stretch: normal;
		font-style: normal;
		line-height: normal;
		letter-spacing: 0.22px;
		text-indent: 0.25rem;
	}

	.page-header h3 + p.underscore {
		position: absolute;
	}

/*** tables ***/
.table-data {
	padding: 1rem 1.5rem 1.5rem 1.5rem;
	border-radius: 8px;
}

	.table-data table {
		/*TODO fixme for tablet/phone*/
		/*width: 100%;*/
	}

	.table-data .table th {
		border-top: 0;
		font-size: 13px;
		font-weight: 500;
		font-stretch: normal;
		font-style: normal;
		line-height: 1.54;
		letter-spacing: normal;
	}

	.table-data .table td {
		font-size: 14px;
		font-weight: normal;
		font-stretch: normal;
		font-style: normal;
		line-height: normal;
		letter-spacing: normal;
		vertical-align: middle;
	}

tr.total-row td {
	border-top-width: 3px !important;
	border-top-style: double !important;
	font-weight: bold !important;
}

/* better align table pagination controls */
.dataTables_wrapper .dataTables_paginate {
	float: unset;
	font-size: 14px;
}

	.dataTables_wrapper .dataTables_paginate .paginate_button {
		padding: 0;
		margin: 0;
	}

		.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
			background: none;
		}

	.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
		font-weight: bold;
	}

.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span {
	margin: 0;
}

.dataTables_length {
	font-size: 14px;
}

	.dataTables_length label {
		margin-bottom: 0;
	}

div.dataTables_wrapper div.dataTables_info {
	padding: 0;
	font-size: 14px;
}

.table-data-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2rem;
	/*TODO fix on tablet/phone*/
}

/*** forms ***/
.btn {
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	letter-spacing: 0.5px;
	text-align: center;
	text-transform: uppercase;
}

	.btn:not(.btn-sm) {
		padding: 7px 16px;
		font-size: 14px;
		line-height: normal;
	}

.btn[data-toggle="collapse"]:not(.collapsed),
.btn.btn_selected {
	box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5);
}

.form-group p.small {
	margin-bottom: unset;
}

/* limitar resize apenas na vertical e garantir uma altura de 1 linha */
textarea.resizeable {
	min-height: 3.5rem;
	resize: vertical;
}

/* checkbox switches */
.switch_hidden {
	display: none !important;
}

fieldset.form-group {
	margin-top: 1rem;
}

fieldset .table-data {
	padding: 0 0.75rem;
	padding: 0.75rem;
	border: 1px solid #ddd;
}

.card {
	border: 0 !important;
	border-radius: 8px;
}

/* card links */
.card-footer a:not(.btn):not(.float-right):first-child::before {
	content: '';
	margin-right: 0;
}

.card-footer a:not(.btn):not(.float-right)::before {
	content: '|';
	margin-right: 0.55rem;
	font-size: 0.75rem;
	vertical-align: text-bottom;
}

pre.scroller {
	max-height: 70vh;
}

.listbox.list-group {
	margin-top: 1rem;
}

.listbox-add, .listbox-remove {
	margin: 0 1rem 0 0;
}

.listbox-remove {
	float: right;
}

	.listbox-remove i.bi {
		font-size: 1.5rem;
		cursor: pointer;
	}

/* navigation pills/tabs */
.nav-pills .nav-item {
	font-weight: bold;
	text-transform: uppercase;
}

	.nav-pills .nav-item + .nav-item {
		margin-left: 1rem;
	}

/* listbox */
.listbox.listbox-fit-half {
	max-height: 50vh;
	overflow-y: scroll;
}

.listbox-header,
.listbox-footer {
	font-weight: bold;
}

.listbox-header {
	align-items: flex-end !important;
	margin-top: 0.5rem;
}

/* page filters */
#page-filters .row,
#page-filters .form-row {
	margin-bottom: 1rem;
}

#page-filters .form-control.datepicker {
	text-align: center;
}

#page-filters .form-inline .form-control.datepicker {
	max-width: 110px;
}

.input-group + #page-filters-actions {
	margin-top: 0.4rem;
}

#page-filters-actions {
	text-align: right;
	margin-top: 2px;
	margin-bottom: 2px;
}

	#page-filters-actions div.dt-button-collection {
		width: 250px;
	}

#page-filters .row > div > .input-group,
#page-filters-actions {
	margin-top: 2rem;
}

#page-filters-actions {
	float: right;
	margin-top: 0;
	margin-left: 0.5rem;
}

/* export table */
.page-table-export-container {
	display: inline-block;
	float: right;
	margin-left: 0.5rem;
}

	.page-table-export-container .btn {
		padding: 0.25rem 0.5rem;
		font-size: 1rem;
		font-size: 0.875rem;
		border-radius: 0.25rem;
		line-height: 1.5;
	}

	.page-table-export-container div.dt-button-collection .dt-button {
		min-width: unset;
	}

/* export chart */
.page-chart-export-container {
	position: relative;
}

	.page-chart-export-container .amExportButton {
		left: unset;
		right: 0;
		margin-top: 1rem;
		opacity: 1;
	}

	.page-chart-export-container:hover ul {
		display: block;
	}

	.page-chart-export-container ul {
		display: none;
		margin-top: 2rem;
	}

		.page-chart-export-container ul li {
			text-align: left;
		}

/* page charts */
.page-chart-container {
	height: 400px;
	margin: 0 auto 1rem auto;
	padding: 1.5rem;
	border-radius: 8px;
}

/* leaflet */
/* remove political stuff */
.leaflet-attribution-flag {
	display: none !important;
}


























/*** --------------------------------------------------------------------------------
	custom colours for this application
-------------------------------------------------------------------------------- ***/

:root {
	--app-primary-color: #005437; /* original: #72c7d7; */
	--app-secondary-color: #429270; /* original: #60707f; #004070; */
	--app-tertiary-color: #f0f5f3; /* original: #003f87;*/
	--app-flair-color: #007ee5; /* purple #8833e9; */
	--app-faint-color: #00000020;
	--app-grey-color: #6c757d;
	--app-white-color: #fff;
	--app-black-color: #000;
}

body {
	background-color: var(--app-tertiary-color);
}

.nav-link {
	color: var(--app-tertiary-color);
}

a {
	color: var(--app-secondary-color);
}

	a:visited {
		color: var(--app-secondary-color);
	}

	a:hover {
		color: var(--app-primary-color);
	}

.pace .pace-progress {
	background: var(--app-tertiary-color);
}

.bg-flair {
	background-color: var(--app-flair-color);
}

.page-header p {
	color: var(--app-primary-color);
}

nav.sidebar .sidebar-heading {
	color: var(--app-grey-color) !important;
}

.table-data {
	background-color: var(--app-white-color);
}

.table-data .table th {
	color: var(--app-secondary-color);
}

.table-data .table td {
	color: var(--app-black-color);
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
	background-color: var(--app-primary-color);
	border-color: var(--app-primary-color);
	color: var(--app-white-color);
}

.btn {
	background-color: var(--app-primary-color);
	border-color: var(--app-primary-color);
	color: var(--app-white-color);
}

a.btn {
	color: var(--app-white-color);
}

.btn.btn-primary:hover {
	background-color: var(--app-secondary-color);
	border-color: var(--app-tertiary-color);
}

.btn.btn-secondary {
	background-color: var(--app-secondary-color);
	border-color: var(--app-secondary-color);
}

.dropdown-item.active, .dropdown-item:active {
	background-color: var(--app-primary-color);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
	border-color: var(--app-tertiary-color);
	background-color: var(--app-primary-color);
}

.custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--app-secondary-color);
	background-color: var(--app-secondary-color);
}

.progress-bar {
	background-color: var(--app-primary-color);
}

.nav-tabs .nav-link:not(.disabled) {
	color: var(--app-secondary-color);
}

.nav-pills .nav-item {
	color: var(--app-white-color);
}

.nav-pills .nav-link:not(.disabled) {
	background-color: var(--app-secondary-color);
	color: var(--app-white-color);
}

.nav-pills .active .nav-link:not(.disabled) {
	background-color: var(--app-flair-color);
}

.page-chart-export-container ul li {
	background-color: var(--app-white-color) !important;
}

.page-chart-container {
	background-color: var(--app-white-color);
}

.card-footer a:not(.btn)::before {
	color: var(--app-faint-color);
}

.listbox .listbox-new-item {
	background-color: var(--app-primary-color);
}






























/*** --------------------------------------------------------------------------------
	page specific styles
-------------------------------------------------------------------------------- ***/

/*** login page ***/
/* override _Layout styles */
.container-fluid:has(main > .login-fullscreen) {
	padding: 0;
}

	nav.navbar:has(+ .container-fluid main > .login-fullscreen),
	.container-fluid:has(main > .login-fullscreen) nav.sidebar {
		display: none;
	}

main:has(.login-fullscreen) {
	margin-left: unset !important;
	padding: 0 !important;
}

.login-fullscreen {
	overflow: hidden;
}

	.login-fullscreen .login-card {
		background: var(--app-white-color);
		padding: 32px;
		min-width: 20vw;
		max-width: 450px;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.login-fullscreen .login-wrapper {
		/* call 25.11.27 Francisco Castro: vão enviar imagem para substituir esta // enviado a 12 Dezembro 2025 */
		/*background: url('../../Appresources/app/images/wallpaper.jpg') no-repeat center center;*/
		background: url('images/worklink.bg.png') no-repeat center center;
		background-size: cover;
		height: 100vh;
		display: flex;
		justify-content: flex-end;
		max-width: 100vw;
		overflow: hidden;
	}

	.login-fullscreen .logo-img {
		max-height: 70px;
		display: block;
		width: auto;
		margin-bottom: 16%;
		padding: 0.5rem; /* call 25.11.27 Francisco Castro: logótipo na página inicial colocar um bocadinho mais pequeno para respirar */
	}

	.login-fullscreen #loginForm label {
		font-size: 14px;
		font-weight: bold;
	}

	.login-fullscreen #dev_logins {
		max-height: 65vh;
		overflow-y: auto;
		padding: 0 0.5rem 0.5rem 0.5rem;
	}

		.login-fullscreen #dev_logins > div {
			padding: 0.4rem 0;
			border-radius: 0.25rem;
			transition: all ease-out 0.15s;
		}

			.login-fullscreen #dev_logins > div:hover {
				transform: scale(1.02, 1.05);
				z-index: 10;
			}



/*** home page ***/
.home-tileset #page-title {
	display: none;
}

.home-tileset .tiles {
	display: flex;
	/*height: calc(100vh - 15px);*/ /* topbar AND body main => bottom padding */
	height: calc(100vh - var(--app-topbar-height) - 15px); /* topbar AND body main => bottom padding */
	align-items: center;
	align-content: center;
}

	.home-tileset .tiles > div {
		padding: 15px;
	}

		.home-tileset .tiles > div.w-100 {
			padding: 0;
		}

	.home-tileset .tiles .tile {
		min-height: 8rem;
		font-size: 2rem;
		background-color: var(--app-secondary-color);
		color: var(--app-white-color);
		border-radius: 5px;
		transition-duration: 0.25s;
	}

		.home-tileset .tiles .tile:hover {
			background-color: var(--app-primary-color);
			box-shadow: 2px 2px 4px var(--app-tertiary-color);
			transform: scale(1.01);
		}

		.home-tileset .tiles .tile > a,
		.home-tileset .tiles .tile > p {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: 0;
			padding: 2rem;
			display: block;
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--app-white-color);
		}

		.home-tileset .tiles .tile i.bi {
			margin-right: 1rem;
		}



/*** calendar page ***/
.calendar-page #year_switcher {
	display: flex;
}

	.calendar-page #year_switcher .btn-block {
		margin-top: unset;
		line-height: 1.5;
	}

	.calendar-page #year_switcher span {
		box-shadow: rgba(76, 91, 106, 0.5) 0px 0px 0px 0.2rem;
	}

/* calendário */
.calendar-page #calendar {
	max-height: calc(100vh - 100px);
}

	.calendar-page #calendar.fc-theme-standard a:not([href]) {
		text-decoration: none;
		cursor: default;
	}

	.calendar-page #calendar .fc-icon {
		height: 0.75em;
		vertical-align: top;
	}

	.calendar-page #calendar.fc-theme-standard .fc-button-primary {
		background-color: var(--app-primary-color); /*#3b5998 !important;*/
		border-color: var(--app-primary-color); /*#3b5998 !important;*/
		color: var(--app-white-color) !important;
	}

	/* hover cell confunde */
	/*.calendar-page #calendar.fc-theme-standard td.fc-daygrid-day:not(.fc-day-other):hover {
		border: 2px solid #337ab7;
	}*/

	.calendar-page #calendar.fc-theme-standard .fc-event:hover {
		box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
		outline: 5px auto -webkit-focus-ring-color;
		outline-offset: -2px;
		cursor: pointer;
	}

/* details panel */
.calendar-page #calendar_details.panel {
	margin-top: 1.5rem;
	border-radius: 5px;
	border: 1px solid var(--app-grey-color);
}

	.calendar-page #calendar_details.panel .panel-heading,
	.calendar-page #calendar_details.panel .panel-body,
	.calendar-page #calendar_details.panel .panel-footer {
		padding: 0.5rem;
	}

.calendar-page #calendar_details .panel-heading a {
	float: right;
}

.calendar-page #calendar_details .panel-body {
	white-space: pre-line;
	max-height: 48vh;
	overflow-y: auto;
}

/* pendente */
.calendar-page #calendar_details.evento.event_state_id_1 {
	border-color: #3b5998;
}

	.calendar-page #calendar_details.evento.event_state_id_1 > .panel-heading {
		color: #fff;
		background-color: #3b5998;
		border-color: #3b5998;
	}

/* aceite */
.calendar-page #calendar_details.evento.event_state_id_2 {
	/* //UNUSED */
}

/* finalizado */
.calendar-page #calendar_details.evento.event_state_id_3 {
	border-color: #d6e9c6;
}

	.calendar-page #calendar_details.evento.event_state_id_3 > .panel-heading {
		color: #3c763d;
		background-color: #dff0d8;
		border-color: #d6e9c6;
	}

/* rejeitado */
.calendar-page #calendar_details.evento.event_state_id_4 {
	border-color: #ebccd1;
}

	.calendar-page #calendar_details.evento.event_state_id_4 > .panel-heading {
		color: #a94442;
		background-color: #f2dede;
		border-color: #ebccd1;
	}