/*
 * @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>
 * @author Oskar Kurz <oskar.kurz@gmail.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/>.
 *
 */

$color-warning-light: nc-lighten($color-warning, 15%);
$color-lightgrey: nc-darken($color-main-background, 4%);
$color-grey: nc-darken($color-main-background, 7%);
$color-darkgrey: nc-darken($color-main-background, 32%);

@import 'comp-appnav.scss';
@import 'icons.scss';

/**
 * 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%;
	border-radius: 0;
}

#app img {
	box-sizing: content-box;
}

#searchbox {
	display: flex !important;
}

.editable-inline {
	cursor: text;
}

/**
 * Navigation sidebar
 */

#app-navigation {
	/** menu */
	.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-menu-share i {
		height: 100%;
		width: 100%;
	}

	li {
		transition: height 250ms ease-in-out, opacity 250ms ease-in-out, z-index 250ms ease-in-out;
	}
	.editing {
		height: 82px;

		.icon-add {
			background-position: 14px 14px;
		}
	}
	.app-navigation-entry-edit {
		.colorselect {
			div, label {
				height: 32px;
				width: auto;
			}
		}
		form {
			display: flex;
		}
	}

}

/**
 * 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;
		}
	}

	.card {
		opacity: 1;

		&.file-drop {

		}
	}

	&.card-selected {

		.card {
			box-shadow: 0px 0px 7px 0px $color-grey;

			&.current {
				box-shadow: 0px 0px 7px 0px $color-darkgrey;
			}
		}
	}

}

// styles to provide a drop zone in empty stacks
.as-sortable-un-selectable {
	.card-list {
		min-height: 96px;
		flex-grow: 1;
	}

	// empty stack placeholders and last placeholders should fill the space
	.emptyStack .as-sortable-placeholder,
	li:last-child.as-sortable-placeholder {
		height: 100% !important;
	}
}

#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;
	position: inherit;
    padding-left: 44px;

	.crumb {
		order: 0;

		.bullet {
			opacity: 1;
		}

		a:nth-child(2),
		a:nth-child(3) {
			padding-left: 0;
			margin-left: -5px;
		}

		a .icon {
			margin-top: 2px;
		}

		.board-bullet {
			display: inline-block;
			width: 20px;
			height: 20px;
			border: none;
			border-radius: 50%;
		}
	}

	button {
		height: inherit;
	}

	input[type='text'] {
		padding: 6px;
		border: 0 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;
		}
	}
}

.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;
	height: 34px;

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

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

.stack {
	width: 100%;
	vertical-align: top;
	display: flex;
	flex-direction: column;

	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;
		min-height: 96px;

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


	> ul {
		display: flex;
		flex-direction: column;
	}

}


.card {
	background-color: $color-main-background;
	margin: 10px 10px 20px 10px;
	white-space: normal;
	position: relative;
	box-shadow: 0 0 3px $color-darkgrey;
	border-radius: 3px;

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

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

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

	.card-assigned-users {
		display: flex;
		justify-content: flex-end;
		flex-grow: 1;
		.assigned-user {
			z-index: 4;
			margin: 6px 0 6px 6px;
		}
	}

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

		.card-options {
			justify-content: flex-end;
		}

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

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

		.due {
			border-radius: 3px;
			margin: 6px 4px 6px 0px;
			padding: 0 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;
			}
		}

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

			.icon {
				background-size: contain;
				margin-right: 2px;
			}
		}

		button {
			padding: 22px;
			margin: 0;
		}
	}

	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;
			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;
		margin: 20px 10px 10px;
		border: 1px solid;
		border-radius: 3px;
		background-color: transparent;
		overflow: hidden;
		box-shadow: none;
		cursor: pointer;

		&.emptyStack {
			margin-top: 10px;
		}

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

		.icon-add {
			padding: 20px;
		}

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

			input {
				width: 100%;
				border: 0;
				font-size: 10pt;
				margin: 0;
				padding: 10px;
			}
		}
	}
}

/* ng-sortable: Fix mobile touch scrolling */
.as-sortable-item,
.as-sortable-item-handle {
	-ms-touch-action: auto !important;
	touch-action: auto !important;
	-webkit-touch-callout: inherit !important;
}
/* disable scrolling only when a card is dragged */
.as-sortable-un-selectable .as-sortable-item,
.as-sortable-un-selectable .as-sortable-item-handle {
	-ms-touch-action: none !important;
	touch-action: none !important;
	-webkit-touch-callout: inherit !important;
}


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

.popovermenu {
	z-index: 999;
	opacity: 1;
	display: block;

	&.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;
	}
}

/**
 * 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;
	}
}

.drop-indicator {
	display: none;
}
.card .nv-file-over,
.drop-indicator.nv-file-over {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 100;
	opacity: 0.9;
	text-align: center;

	p {
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		position: absolute;
		padding: 20px;
		border: 1px dashed #AAA;
		margin: 10px;
		border-radius: 5px;
	}
}


#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;
			}
		}
	}

	.section-header {
		border-bottom: 1px solid $color-lightgrey;
		display: flex;
		flex-shrink: 0;
		margin-bottom: 5px;
		margin-top: 10px;
		h4 {
			padding-top: 5px;
			padding-bottom: 5px;
			flex: 1;
		}
	}
	.section-header-tabbed {
		margin-top: 10px;
		margin-bottom: 5px;
		flex-shrink: 0;
		display: flex;
		.tabHeaders {
			margin: 0;
			flex-grow: 1;
		}
		.tabDetails {
			display: flex;
		}
	}

	.save-indicator {
		border-radius: 3px;
		margin: 5px;
		padding: 0 10px;
		font-size: 8pt;
		display: none;
		align-self: flex-end;
		text-align: center;
		&.saved {
			background-color: $color-success;
			color: $color-primary-text;
		}
		&.unsaved {
			background-color: $color-lightgrey;
			color: $color-darkgrey;
		}
	}

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

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

	.card-details-assign-users {

		.select2 .ui-select-choices-row-inner {
			display: flex;
			padding: 5px !important;
		}

		.card-details-assign-users-list {
			display: flex;
			.assigned-user {
				position: relative;

				.avatardiv-container {
					margin-right: 5px;
				}
			}
			.tooltip {
				z-index: 998;
				position: fixed;
			}
		}
	}

	.icon-upload.icon-loading-small {
		background-image: none;
	}
	.attachment-list-wrapper {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba($color-darkgrey, 0.5);
		left: 0;
		top: 0;
	}
	.attachment-list {
		&.selector {
			padding: 10px;
			position: absolute;
			width: 30%;
			max-width: 500px;
			min-width: 200px;
			max-height: 50%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: $color-main-background;
			z-index: 2;
			border-radius: 3px;
			box-shadow: 0 0 3px $color-darkgrey;
			overflow: scroll;
		}
		h3.attachment-selector {
			margin: 0 0 10px;
			padding: 0;
			.icon-close {
				display: inline-block;
				float: right;
			}
		}

		li.attachment {
			display: flex;
			padding: 3px;

			&.deleted {
				opacity: .5;
			}

			.fileicon {
				display: inline-block;
				min-width: 32px;
				width: 32px;
				height: 32px;
				background-size: contain;
			}
			.details {
				flex-grow: 1;
				flex-shrink: 1;
				min-width: 0;
				flex-basis: 50%;
				line-height: 110%;
				padding: 2px;
			}
			.filename {
				width: 70%;
				display: flex;
				.basename {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding-bottom: 2px;
				}
				.extension {
					opacity: 0.7;
				}
			}
			.filesize, .filedate {
				font-size: 90%;
				color: $color-darkgrey;
			}
			.app-popover-menu-utils {
				position: relative;
				right: -10px;
				button {
					height: 32px;
					width: 42px;
				}
			}
			button.icon-history {
				width: 44px;
			}
			progress {
				margin-top: 3px;
			}
		}
	}

	.card-description {
		&.section-header {
			.save-indicator {
				margin-bottom: 5px;
				margin-top: 5px;
			}
		}
		&.section-content {
			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 {
	.error {
		padding-left: 38px;
		margin-bottom: 5px;
		background-position: 10px;
	}
}

#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;
		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;
	}

	label.color {
		flex-grow: 1;
	}

	.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');
		}
	}

	.colorselect-label, .colorselect-label-white {
		background-image: url('../img/color_picker-dark.svg');
		background-position: center center;
		background-repeat: no-repeat;
		opacity: 1;
		input {
			position: absolute;
			visibility: hidden;
			height: 32px;
			width: 40px;
		}
	}
	.colorselect-label-white {
		background-image: url('../img/color_picker.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,
			label {
				min-width: 32px;
			}
		}

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

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

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

			button {
				opacity: 0.5;
				padding: 22px;
			}

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

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

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

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

	input {
		margin: 0px;
	}

	#assigned-users {
		display: flex;

		.avatardiv-container {
			margin: 6px;
		}
	}
}

/**
 * Board details
 */

#tabBoardShare .select2 .ui-select-choices-row-inner {
	display: flex;
	padding: 5px !important;
}

#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;
	}

	&.has-contactsmenu img {
		cursor: pointer;
	}
}

.avatardiv-container {
	position: relative;
}

#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 {
	width: 100%;
	margin: 0;

	.select2-choices {
		padding: 0 !important;

		.select2-search-choice {
			padding: 3px 0 !important;
			border: 0 !important;
			overflow: hidden;
		}
		.select2-search-field {
			margin-right: -10px;
		}
	}

	.select2-choice {
		height: auto;
	}
}

.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;
	display: flex;
	span {
		flex-grow: 1;
		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;
		}
	}

	img {
		max-width: 100%;
		max-height: 50vh;
		margin: auto;
		display: block;
	}

	input[type=checkbox] {
		margin: 0px 10px 0px 0px;
		line-height: 10px;
		font-size: 10px;
		display: inline-block;
		min-height: 12px;
	}
	li input[type=checkbox] {
		margin: 0px 10px 0px -20px;
	}
}

/**
 * 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;
	}

	.stack {
		width: 320px;
		min-width: 320px;
		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;
		}
	}
}


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