/*
 * @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
 *
 * @author Julius Härtl <jus@bitgrid.net>
 * @author Artem Anufrij <artem.anufrij@live.de>
 * @author Marin Treselj <marin@pixelipo.com>
 *
 * @license GNU AGPL version 3 or any later version
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU Affero General Public License as
 *  published by the Free Software Foundation, either version 3 of the
 *  License, or (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

/**
 * Variables
 */
$color-main-background: #fff;
$color-primary-text: #fff;
$color-error: #e9322d;
$color-warning: #fbd850;
$color-warning-light: nc-lighten($color-warning, 15%);
$color-success: #46ba61;
$color-lightgrey: nc-darken($color-main-background, 4%);
$color-grey: nc-darken($color-main-background, 7%);
$color-darkgrey: nc-darken($color-main-background, 32%);

/**
 * General styles
 */
button,
.button,
.app-deck .icon {
	display: flex;
	&.button-inline {
		border: 0;
		background-color: transparent;
	}
    &.button-inline:hover {
		border: 0;
		background-color: transparent;
    }
}

input.input-inline {
	font-size: inherit !important;
	font-weight: inherit;
	background-color: transparent;
	padding: 0;
	border: none;
	width: 100%;
	-webkit-border-radius: 0;
}



#searchbox {
	display: flex !important;
}

.editable-inline {
	cursor: text;
}

/**
 * Navigation sidebar
 */
.app-navigation-entry-menu {
	ul {
		flex-direction: row;
	}
}

#app-navigation {
	.app-navigation-entry-edit {
		height: auto;

		.colorselect div{
			height: 32px;
		}
		form {
			display: flex;
		}
	}

	.board-bullet {
		position: absolute;
		margin-left: 17px;
		margin-top: 16px;
		width: 12px;
		height: 12px;
		border: none;
		border-radius: 50%;
		cursor: pointer;
	}

	.app-navigation-entry-utils {
		.app-navigation-entry-utils-menu-button {
			display: block !important; // TODO: is this needed?
		}

		.app-navigation-entry-utils-menu-share {
			display: flex !important;
			padding: 14px;
			opacity: 0.5;
		}
	}
	.app-navigation-entry-menu ul {
		flex-direction: row;
	}
}

/**
 * Board view
 */
#board-status {
	position: absolute;
	z-index: 999;
	width: 100%;
	height: 100%;
	background-color: $color-main-background;
}

#board {
	position: absolute;
	white-space: nowrap;
	overflow: auto;
	z-index: 100;
	width: 100%;
	bottom: 0px;
	top: 44px;

	&.as-sortable-un-selectable {
		.card-list {
			min-height: 96px;
		}
	}
}

#innerBoard {
	padding: 10px;

	> .as-sortable-placeholder {
		display: inline-block !important;
		margin-top: 0;
		margin-left: 0;
	}
}

#controls {
	width: inherit;
	z-index: 120;
	display: flex;
	align-items: center;
	font-size: 14pt;
	position: inherit;
	width: 100% !important;
    padding-left: 44px;

	.crumb,
	#controls a {
		top: 12px;
	}

	> h2 {
		white-space: nowrap;
		padding: 8px 7px 5px;
		margin: 0;
	}

	button {
		height: inherit;
	}

	input[type='text'] {
		padding: 6px;
		border: 0px none transparent;
		min-height: initial;
		background-color: transparent;
		height: inherit;
	}

	.icon-home { // TODO: deprecate this
		background-position: 8px center;
		padding: 10px 24px 10px 14px;
	}
}

#app-navigation-toggle {
	width: 44px;
	height: 44px;
	cursor: pointer;
	opacity: 1;
	display: inline-block !important;
	position: fixed;
}

.board-header-controls {
	margin-left: auto;
	align-items: center;

	&.app-popover-menu-utils {
		display: flex;

		#popover-controls {
			display: flex;
			align-items: center;
		}

		.popovermenu {
			margin-top: 35px;
			margin-right: 6px;
		}
	}

	> button {
		padding: 16px 20px;
	}
}

.filter-select {
	position: absolute;
	right: auto;
	top: 42px;
	left: -21%;

	li {
		padding: 3px;
		overflow: hidden;
		width: auto;

		span {
			display: block;
			float: left;
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}
	}
}

#stack-add {
	background-color: $color-lightgrey;
	border-radius: 3px;
	margin: 3px;
	display: flex;
	align-content: center;

	> form {
		display: flex;
		align-content: center;
	}

	input {
		&:invalid,
		&:-moz-submit-invalid,
		&:-moz-ui-invalid {
			box-shadow: none;
		}
	}
}

.stack {
	width: 100%;
	vertical-align: top;

	h3 {
		padding: 10px 10px 8px;
		margin: 0;
		font-size: 12pt;
		font-weight: normal;
		overflow: hidden;
		display: flex;
		min-height: 40px;

		&:hover button {
			display: flex;
		}

		input {
			padding: 0;
			width: 100%;
			margin: 0;
			font-size: 12pt;
			font-weight: 700;
			border: 0;
			background-color: $color-main-background;
			min-height: initial;
		}

		span {
			white-space: normal;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		button {
			margin-left: auto;
			display: flex;
			opacity: 0.3;
			padding-right: 0;
		}
	}

	form {
		width: 100%;
	}

	.as-sortable-placeholder {
		margin: 10px 10px 20px 10px;
		border: 1px dashed $color-darkgrey;

		&:last-child {
			margin: 10px;
		}
	}

}


.card {
	background-color: $color-main-background;
	margin: 10px 10px 20px 10px;
	white-space: normal;
	position: relative;
	opacity: 1.0;
	-webkit-box-shadow: 0 0 5px $color-darkgrey;

	&:last-child {
		margin: 10px;
	}

	&.archived .card-upper {
		opacity: 0.5;
	}

	.card-upper {
		overflow: hidden;
		position: relative;
		padding: 5px;
	}

	.card-controls {
		padding: 10px;
		background: $color-lightgrey;
		display: flex;
		position: relative;

		.card-options {
			opacity: 0.3;
			position: absolute;
			right: 10px;
			top: 8px;
		}

		&:hover .card-options {
			opacity: 1;
		}

		.icon-filetype-text {
			margin-right: 10px;
		}

		button {
			padding: 0px;
			margin-right: 0px;
		}
	}

	a {
		display: block;
	}

	h4 {
		font-weight: normal;
		font-size: 10pt;
		padding: 0;
		margin: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&.has-labels h4 {
		margin-top: 15px;
	}

	.labels {
		position: absolute;
		top: -5px;
		left: 10px;

		li {
			padding: 0;
			width: 15px;
			height: 20px;
			-webkit-border-radius: 3px;
			font-size: 80%;
			border: none transparent;
			float: left;

			span {
				display: none;
			}

			&:hover span {
				position: absolute;
				padding: 3px;
				background-color: inherit;
			}
		}
	}

	&.create {
		text-align: center;
		padding: 10px;
		margin: 10px;
		border: none;
		overflow: hidden;
		-webkit-box-shadow: none;

		&:hover {
			text-align: center;
			opacity: 1;
		}

		h4 {
			width: 100%;
			padding: 0;
			margin: 0 0 1px;

			input {
				width: 100%;
				border: 0;
				font-weight: bold;
				font-size: 10pt;
				margin: 0;
				padding: 0;
				border-bottom: 1px solid $color-primary-text;
				border-radius: 0;
				color: $color-primary-text;
				background-color: transparent !important;
				min-height: initial;
			}
		}
	}
}

.app-popover-menu-utils {
	margin-left: auto;
	min-height: 16px;
}

.popovermenu {
	z-index: 999;
	opacity: 1;
	display: block;
	margin-top: 25px;
	margin-right: 0px;

	&.hidden {
		display: none;
	}

	ul {
		display: flex !important;
		flex-direction: column;
	}
}

.info {
	padding-left: 5px;
	padding-right: 5px;
	display: inline-block;
	opacity: 0.5;

	i {
		margin-left: 2px;
	}

	span {
		margin-right: 2px;
	}
}

.due {
	border-radius: 3px;
	margin: -4px 4px -4px -4px;
	padding: 0px 4px;
	font-size: 90%;
	opacity: 0.5;
	display: flex;
	align-items: center;

	.icon {
		background-size: contain;
	}

	&.overdue {
		background-color: $color-error;
		color: $color-primary-text;

		.icon-badge {
			background-image: url('../img/calendar-white.svg');
		}
	}
	&.now {
		background-color: $color-warning;
	}
	&.next {
		background-color: $color-warning-light;
	}

	span {
		margin-left: 3px;
	}
}

/**
 * App sidebar
 */
#app-sidebar {
 	right: -500px;
 	max-width: 100%;
 	width: 500px;
 	display:flex;
 	flex-direction: column;

	&.details-visible {
	 	right: 0;
	}
}

#sidebar-header {
	h3 {
		font-size: 14pt;
		padding: 9px 10px;
		margin: 0;
		overflow: hidden;
		background-color: $color-lightgrey;

		input {
			min-height: 0px;
			margin: 0px;
		}
	}

	.icon-close {
		position: absolute;
		top: 0px;
		right: 0px;
		padding: 14px;
		height: 44px;
		width: 44px;
	}
}

#card-meta { // TODO: use .card-block instead?
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 15px;

	.duedate {
		display: flex;
		align-content: center;
		min-height: 38px;

		.timepicker-input {
			width: 50px;
			border-left: 0;
			border-radius: 0px 3px 3px 0px;
		}

		.datepicker-input {
			width: 85px;
			margin: 3px 0px;
			border-radius: 3px 0px 0px 3px;
		}

		.icon {
			opacity: 0.5;
			&:hover {
				opacity: 1;
			}
		}
	}

	.select2-container {
		margin: 0px;
	}

	h4 {
		border-bottom: 1px solid $color-lightgrey;
		padding: 15px 0px 5px 0px;
		margin: 0 0 10px 0;
		font-size: 15px;

		> div {
			display: inline-flex;
			align-content: center;
			justify-content: space-between;
		}
	}

	.save-indicator {
		background-color: $color-success;
		color: $color-primary-text;
		border-radius: 3px;
		float: right;
		padding: 0px 10px;
		font-size: 8pt !important;
		display: none;
		align-self: flex-end;
	}

	.icon-help {
		opacity: 0.5;
		padding: 5px 15px;
		display: inline;
	}

	#card-dates {
		font-size: 80%;
		opacity: 0.5;
		text-align: right;
	}

	#card-tag-label {
		padding-top: 0px !important;
		margin-top: 0px;
	}

	#card-description {
		height: 100%;
		display: flex;
		flex-direction: column;

		> div {
			height: 100%;
		}

		textarea {
			width: 100%;
			height: 200px;
			border: none;
			margin: 0;
			padding: 0;
		}

		.container {
			background-color: $color-main-background;
		}
	}
}

#card-attachments {
	ul {
		margin: 5px;
	}

	.details {
		font-size: 8pt;
		padding-left: 15px;
	}
}

#app-content {
	overflow: hidden;
	display: flex;
	flex-direction: column;

	&.details-visible {
		margin-right: 500px;
	}
}

.labels {
	display: block;
	overflow: hidden;

	li {
		padding: 0px 0px 5px 0px;
		-webkit-border-radius: 3px;
		margin: 1px;
		color: $color-primary-text;
		min-width: 20px;
		display: flex;
	}
}

/**
 * Color selection
 */
.colorselect {
	overflow: hidden;
	border-radius:3px;
	flex-direction: row;
	display: flex;

	.color {
		opacity: 0.7;
		height: 100%;
		flex-grow: 1;
		border: none;
	}

	.selected {
		background-image: url('../../../core/img/actions/checkmark.svg');
		background-position: center center;
		background-repeat: no-repeat;
		opacity: 1;
		&.selected {
			background-image: url('../../../core/img/actions/checkmark-white.svg');
		}
	}
}

.labels {
	.colorselect {
		padding: 0;
		clear: none;
		overflow: visible;

		.color {
			width: 26px;
			height: 26px;
		}
	}

	.label-edit {
		display: flex;
		width: 100%;

		.colorselect {
			margin: 0px 0px 0px 3px;
		}

		input {
			border-bottom: 1px solid $color-lightgrey;
			padding: 5px 5px 4px 5px !important;
		}
	}
}


/**
 * Board list main screen area
 */
#boardlist {
	position: absolute;
	overflow: auto;
	width: 100%;
	bottom: 0px;
	top: 44px;

	thead td {
		opacity: .5;
		padding: 15px;
	}

	td {
		padding: 0 10px;
		border-bottom: 1px solid $color-grey;

		.board-bullet {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			cursor: pointer;
			margin: 6px;
		}

		form {
			display: flex;
			width: 100%;
		}

		.colorselect {
			flex-grow: 1;

			div {
				min-width: 32px;
			}
		}

		input[type=text] {
			flex-grow: 2;
		}

		input[type=submit] {
			width: 32px;
		}

		.app-popover-menu-utils {
			position: relative;

			button {
				opacity: 0.5;
			}

			&:hover button {
				opacity: 1;
			}
		}
	}

	.icon {
		padding: 25px;
		margin: 0 0 0 auto;
	}

	tr.deleted td *,
	tbody .board-create td {
		opacity: 0.5;
	}

	.popovermenu {
		margin-top: 5px;
	}

	.board-edit-controls {
		display: flex;
	}

	input {
		margin: 0px;
	}

	#assigned-users {
		display: flex;

		.avatardiv {
			margin: 6px;
		}
	}
}

/**
 * Board details
 */
#shareWithList {
	list-style-type: none;
	padding: 0 0 16px;

	li {
		padding-top: 5px;
		padding-bottom: 5px;
		font-weight: bold;
		white-space: normal;
		display: flex;
		align-items: center;
	}

	.username {
		padding-right: 8px;
		padding-left: 8px;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		overflow: hidden;
		vertical-align: middle;
	}

	.icon-delete {
		display: inline-block;
		background-size: 16px 16px;
		width: 16px;
		height: 16px;
		padding: 0;
		margin-top: 10px;
	}

	.sharingOptionsGroup {
		margin-right:10px;
	}
	.shareOption {
		margin-top: 5px;
	}

	.avatardiv {
		background-color: $color-lightgrey;
		border-radius: 16px;
		width: 32px;
		height: 32px;

		.icon-group {
			padding: 16px;
			opacity: 0.5;
		}
	}
}

#board-detail-labels {
	ul li {
		input {
			margin: 0px;
			padding: 5px;
			min-height: 0px;
		}

		.label-title {
			width: 100%;
			padding: 4px;
			border: none;
			border-radius: 0px 0px 5px 5px;
		}

		a.icon {
			padding: 5px;
			opacity: 0.5;
			&:hover {
				opacity: 1;
			}
		}
	}

	.color {
		width: 28px;
		height: 100%;
	}
}

.label-create {
	width: 100%;
	padding: 0px 56px 0px 0px !important;

	a {
		margin: 0px;
	}

	.icon {
		margin-right: 10px;
	}
}

.tabHeaders {
	clear: both;
	overflow: hidden;
	margin-bottom: 0;
}

.tabsContainer {
	margin-top: 15px;
}

.ui-select-offscreen {
	display: none;
}

.ui-select-match-item {
	padding: 0;
	float: left !important;
	display: block;
	border-radius: 0px 0px 5px 5px !important;

	.select-label {
		color: $color-primary-text;
		padding: 6px 23px 6px 6px;
		margin-right: -23px !important;
	}

	.select2-search-choice-close {
		z-index: 100;
		position: relative;
		display: inline-flex !important;
		margin-right: 7px;
		vertical-align: top;
	}
}

.select2-container-multi .select2-choices .select2-search-choice {
	padding: 3px 0 !important;
	border: 0 !important;
	overflow: hidden;
}

.ui-select-container[disabled] .ui-select-match-item {
	margin-right: 0 !important;

	.select-label {
		padding: 4px;
		min-width: 26px !important;
		height: 100%;
		display: inline-block;
	}
}

.select2-search input {
	width: 100% !important;
}

.select2-result-label {
	padding: 0px !important;

	span {
		display: flex;
		padding: 6px;
	}
}

/**
 * Markdown rendering
 */
#markdown {
	width: 100% !important;

	p {
		margin-bottom: 15px;
	}

	* {
		white-space: normal;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	a {
		opacity: 0.5;
		text-decoration: underline;
	}

	ol,
	ul {
		margin-left: 20px;
		margin-bottom: 10px;
	}

	ul {
		list-style-type: disc;
	}

	h1 {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 5px;
	}

	h2 {
		font-size: 16px;
		font-weight: 600;
	}

	h3 {
		font-size: 14px;
		font-weight: 600;
	}

	h4 {
		font-size: 13px;
		font-weight: 600;
	}

	h6 {
		font-size: 12px;
		font-weight: 600;
	}

	pre {
		background-color: $color-lightgrey;
		padding: 3px;
		overflow: auto;

		code {
			white-space: pre;
		}
	}
}

/**
 * Mobile optimizations
 */
@media (min-width: 481px) {
	/* hide board actions on mobile */
	.board-header-controls {
		display: flex;

		&.app-popover-menu-utils {
			display: none;
		}
	}

	#innerBoard {
		display: flex;
		align-items: flex-start;
	}

	.stack {
		width: 320px;
		min-width: 320px;
		display: inline-block;
		border-right: 1px solid $color-lightgrey;
		margin-right: 10px;
		padding-right: 10px;

		&:last-child {
			border-right: 1px solid transparent;
		}

		h3 button {
			display: none;
		}
		h2:hover button {
			display: inline-flex;
		}
	}
}

/**
 * Custom icons
 */
.icon-deck {
	background-image: url('../img/deck-dark.svg');
}

.icon-group {
	background-image: url('../../../settings/img/users.svg');
}

.icon-help {
	background-image: url('../../../settings/img/help.svg');
}

.icon-add-white {
	background-image: url('../img/add-white.svg');
}

.icon-archive {
	background-image: url('../img/archive.svg');
}

.icon-archive-white {
	background-image: url('../img/archive-white.svg');
}

.icon-details {
	background-image: url('../img/details.svg');
}

.icon-details-white {
	background-image: url('../img/details-white.svg');
}

.icon-home {
	background-image: url('../../../core/img/places/home.svg');
}

.icon-badge {
	background-image: url('../../../core/img/places/calendar-dark.svg');
}

/**
 * Hotfix for https://github.com/angular-ui/ui-select/issues/1652
 */
.ui-select-dropdown.select2-drop-active {
	opacity: 1 !important;
}