body
	position: absolute // allow columns/errors to fill the whole page
	top: 0
	left: 0
	right: 0
	bottom: 0
	background-color: $color-background-light

	&[data-context="task"]
		overflow: hidden // columns scroll independently
		nav.sidebar .navbar-item.tasks
			+sidebar-button-active

	&[data-context="shot"]
		overflow: hidden // columns scroll independently
		nav.sidebar .navbar-item.shots
			+sidebar-button-active

	&[data-context="asset"]
		overflow: hidden // columns scroll independently
		nav.sidebar .navbar-item.assets
			+sidebar-button-active

	&[data-context="dashboard"]
		nav.sidebar .navbar-item.attract
			+sidebar-button-active
		#col_main
			background-color: $color-background-light
			.col_header
				box-shadow: none

$splitter-width: 5px

#app-main
	display: flex
	align-items: stretch
	position: relative
	height: 100%

	+media-xs
		display: block
		height: auto

#col_sidebar
	width: $sidebar-width
	min-width: $sidebar-width

#col_left, #col_main, #col_right
	position: relative
	flex: 0 0 auto
	min-width: 150px
	height: 100%
	min-height: 100%
	position: relative

	+media-xs
		height: auto
		min-height: auto
		margin: 0 auto
		padding-left: $sidebar-width !important

#col_main
	background-color: $color-background
	width: 50% // gets overriden by JS, dragging the col-splitter
	+media-xs
		width: 100%

#col_right
	flex: 1 1 auto

.col_header
	position: relative
	z-index: 1
	display: flex
	align-items: center
	width: 100%
	min-height: 50px
	background-color: white
	padding: 10px 15px

	font-size: 1.2em
	border-bottom: thin solid $color-background
	box-shadow: 0 0 15px rgba(black, .2)

	&.scrolled
		box-shadow: 0 -2px 20px rgba(black, .2)

	.header_text::first-letter
		text-transform: capitalize

.col-list-item
	display: flex
	align-items: center
	width: 100%
	background-color: white
	border-bottom: thin solid $color-background

	&.empty
		padding: 15px
		justify-content: center
		span
			cursor: default
			text-align: center
			color: $color-text-dark-secondary
			i
				margin-right: 5px
				display: inline-block
				transform-origin: 50% 60%

		&:hover span i
			+animation-wiggle

.col-splitter
	flex: 0 0 auto
	width: $splitter-width
	background-color: $color-background
	border-left: thin solid $color-background-light
	border-right: 2px solid $color-background-dark
	min-height: 200px
	cursor: col-resize
	top: 0
	bottom: 0
	z-index: 1

	+media-xs
		display: none
		visibility: hidden

::-webkit-scrollbar
	width: 5px
	height: 5px

::-webkit-scrollbar-track
	background-color: $color-background

::-webkit-scrollbar-thumb
	background-color: $color-text-dark-hint

.flyout.notifications
	left: $sidebar-width + 5
	top: initial
	bottom: 40px
	box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)


/* Sidebar */
nav.sidebar
	position: fixed
	z-index: 1
	left: 0
	width: $sidebar-width
	height: 100%
	background-color: $color-background-nav-dark
	display: flex
	flex-direction: column

	.dropdown
		min-width: $sidebar-width
		.dropdown-menu
			top: initial
			bottom: 3px
			left: $sidebar-width
			box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)
			min-width: 200px

			li a
				justify-content: flex-start

	ul
		width: 100%
		margin: 0
		padding: 0

		&.bottom
			margin-top: auto

		li
			display: block

			a.navbar-item, button
				display: flex
				color: $color-text-light-hint
				font-size: 1.5em
				align-items: center
				justify-content: center
				padding: 10px 0
				background: transparent
				border: none
				width: 100%
				text-decoration: none

				&:hover
					color: $color-text-light-primary
				&:active
					outline: none

				&.cloud
					i
						position: relative
						left: -4px

			a.dropdown-toggle
				padding: 0
				margin: 0
				width: $sidebar-width
				max-width: $sidebar-width

			.special
				top: 8px
				left: 27px

			#notifications-toggle
				&.active .flyout-hat
					display: none
				#notifications-count
					right: 5px
					span
						top: 1px

.input-group-flex
	display: flex

.input-group
	width: 100%
	display: flex
	align-items: center

	label
		padding-right: 10px
		font-weight: normal
		color: $color-text-dark-primary
		min-width: 80px

	&.select_multiple
		margin-bottom: 10px

input, input.form-control
	background-color: transparent

.input-group
	input, textarea, select
		border-radius: 0

	input, textarea, select
		border: thin solid transparent
		border-bottom-color: $color-background-dark
		padding: 5px
		margin-top: 10px
		margin-bottom: 10px
		width: 100%

		transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out

		&:hover
			border-bottom-color: $color-text-dark-secondary

		&:focus
			outline: 0
			border-bottom-color: $color-primary
			box-shadow: 0 1px 0 0 $color-primary

	select
		border-top-left-radius: 3px
		border-top-right-radius: 3px
		background-color: $color-background-light

		option
			background-color: white

	button
		&#item-save
			+button($color-success, 3px)

	textarea
		resize: vertical

.input-group-separator
	margin: 10px 0
	border-top: thin solid $color-background

#status-bar
	color: $color-text-dark-secondary
	margin-left: auto
	text-align: right

.table
	display: table
	width: 100%
	position: relative
	margin-bottom: initial // overrides BS

	.table-row
		display: table-row
	.table-head
		display: table-header-group

		.table-cell
			font-size: .9em
			color: $color-text-dark-secondary

	.table-body
		display: table-row-group

	.table-cell
		display: table-cell
		border-bottom: thin solid $color-background-dark
		vertical-align: middle

		span.hint
			color: $color-text-dark-hint

	.table-cell-spacer
		background-color: $color-background-light
		width: 6px
		min-width: 4px
		height: 100%
		display: table-cell
		border: 2px solid $color-background
		border-top: none
		border-bottom: none
		cursor: e-resize

.table.table-hover
	.table-row:hover
		background-color: $color-background-light

/* Attract specific table tweaks */
.item-list
	overflow-x: scroll
	.table
		background-color: white
		.table-row:hover
			background-color: $color-background-light

		.table-cell
			&.item-status
				width: 5px
				height: 100%
				border-bottom: none
		.table-head
			.table-cell
				text-align: center

				&.highlight .collapser
					color: $color-primary-dark

				&.item-thumbnail
					width: $items-list-thumbnail-width

				&.task-type
					text-transform: capitalize

				span.collapser
					cursor: pointer
					width: 100%
					display: inline-block
					padding: 5px

				&:hover
					span.collapser
						color: $color-primary

		.table-body
			display: table-row-group

			.table-row
				position: relative

				&.active
					background-color: $color-background-active

					.table-cell
						border-bottom-color: darken($color-background-active, 15%)
					.table-cell:last-child
						box-shadow: inset -5px 0 0 $color-primary

				@include status-color-property(background-color, ' .item-status', '')

			.table-cell
				text-align: center
				border-left: thin solid transparent
				border-right: thin solid transparent

				&.active
					background-color: $color-background

				&.highlight
					background-color: rgba(white, .5)

					&.task-type a:before
						transform: translate(-50%, -50%) scale(1.2)

				&.item-name
					text-align: left
					position: relative
					height: 100%
					a
						display: flex
						padding: 5px 10px
						color: $color-text-dark-primary

						span
							margin: auto 0

				&.item-thumbnail
					border-left: none
					border-bottom: none
					img
						transition: opacity 150ms ease-in-out

				&.task-type
					position: relative
					height: 100%
					overflow: hidden
					white-space: nowrap

					a
						display: inline-block /* Each task next to each other */
						vertical-align: middle
						height: 100%
						min-height: 100%
						padding: 15px
						transition: all 150ms ease-in-out
						position: relative

						@include status-color-property(background-color, ':before', '')

						&:focus
							outline: none

							&:before
								transform: translate(-50%, -50%) scale(1.5)

						&:before
							display: block
							content: ''
							position: absolute
							width: 16px
							height: 16px
							border-radius: 50%
							border: 2px solid transparent
							+position-center-translate
							transition: background-color 150ms ease-in-out, border 150ms ease-in-out

						span
							display: block
							+position-center-translate
							z-index: 1
							font:
								weight: bold
								size: .8em
							text:
								align: center
								transform: capitalize
							color: white

						&.active
							opacity: 1

							&:before
								transform: translate(-50%, -50%) scale(1.3)
								border: 2px solid white
								box-shadow: 0 0 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2)
							&:hover
								border-color: $color-primary-light

						&.processing
							background-image: none
							&:before
								+stripes-animate
								+stripes(transparent, rgba($color-background-active, .6), -45deg, 15px)
								animation-duration: 4s

							&.active
								background-image: none

						&.task-add
							width: auto
							border-radius: initial
							opacity: 0
							vertical-align: middle
							padding: 5px
							display: flex
							justify-content: center

							&:hover, &:focus
								opacity: 1

						&:hover
							&:before
								opacity: .8
								transform: translate(-50%, -50%) scale(1.2)
							&.active:before
								transform: translate(-50%, -50%) scale(1.3)

.item-list-header
	a
		color: $color-text-dark
		+text-overflow-ellipsis
	a.item-project
		color: $color-text-dark-secondary
		margin-left: 10px

/* Generic Statuses */
.processing
	+stripes(rgba(black, .1), rgba(white, .1), -45deg, 25px)
	+stripes-animate
	animation-duration: 2s

.flash-on
	background-color: lighten($color-success, 40%) !important
	border-color: lighten($color-success, 40%) !important
	color: darken($color-success, 10%) !important
	text-shadow: 1px 1px 0 white
	transition: all .1s ease-in
	img
		transition: all .1s ease-in
		opacity: .8

	&:before
		background-color: lighten($color-success, 40%) !important

.flash-off
	transition: all 1s ease-out
	img
		transition: all 1s ease-out

.btn:active
	box-shadow: none

.bg-status
	@include status-color-property(background-color, '', 'dark')

.fg-status
	@include status-color-property(color, '', 'dark')


/* Modal Bootstrap overrides */
.modal-dialog
	margin-top: 0
.modal-content
	border: none
	box-shadow: 0 0 25px rgba(black, .25)
	background-color: $color-background-light

	.modal-header
		background-color: white
		padding: 10px 10px 10px 15px

		.title
			font-size: 1.2em

		.close
			float: right
			background: transparent
			border: none
			color: $color-text-dark-hint

			&:hover
				color: $color-primary

.modal-backdrop
	background-color: transparent

.modal-help-panel
	overflow: hidden
	border-radius: 3px
	width: 30%
	background-color: white
	box-shadow: 1px 2px 10px rgba(black, .1)

	.title
		display: block
		padding: 10px
		color: $color-text-dark-primary


/* Debug styles, such as status color legend on help */
.debug-info
	padding-top: 10px
	display: flex
	flex-direction: column

	.debug-info-toggle
		width: 100%
		color: $color-text-dark-hint
		font-size: .9em
		text-align: right

.status-debug-item
	width: 100%

.status-debug-item-statuses
	display: flex
	align-items: center
	justify-content: center
	color: $color-text
	text-shadow: 1px 1px 0 rgba(white, .3)

	.light, .regular, .dark
		flex: 1
		min-height: 25px
		display: flex
		align-items: center
		justify-content: center

	.light
		@include status-color-property(background-color, '', 'light')
	.regular
		flex: 3
		@include status-color-property(background-color, '', '')
	.dark
		@include status-color-property(background-color, '', 'dark')

.collapsing
	transition: all 150ms ease-in-out
	opacity: 0

.collapse
	transition: all 250ms ease-in-out
	&.in
		opacity: 1

/* General style for activities in all places */
.d-activity
	font-size: .9em

	$activity-highlight-color: #00cc9f
	ul
		cursor: default
		padding: 5px
		color: $color-text-dark-primary
		list-style: none

		li
			padding: 0 10px 7px 10px
			position: relative

			span.date
				color: darken($activity-highlight-color, 5%)

			/* Left Dot */
			&:after
				content: ''
				display: block
				position: absolute
				top: 6px
				left: -3px
				width: 5px
				height: 5px
				border-radius: 50%
				background-color: $color-background-light
				border: thin solid $activity-highlight-color
				transition: all 250ms ease-in-out

			/* Left Line */
			&:before
				content: ''
				display: block
				position: absolute
				top: 10px
				left: -1px
				width: 1px
				height: 100%
				background-color: $activity-highlight-color
				transition: all 250ms ease-in-out

			&:last-child
				&:before
					background-color: transparent

		span.actor
			padding: 0 5px
			color: $color-text-dark

		img.actor-avatar
			width: 16px
			height: 16px
			border-radius: 50%
			margin-right: 5px
			position: relative
			top: -2px


.attract-box
	.item-id
		padding: 8px
		margin-left: 10px
		width: 40px
		border: thin solid transparent
		background-color: white
		color: $color-text-dark-secondary
		box-shadow: none
		border-color: $color-text-dark-hint

		&:hover
			color: $color-text-dark-primary
			border-color: $color-text-dark-primary



#item-details
	overflow-x: hidden

	.item-details-empty
		display: flex
		align-items: center
		justify-content: center
		width: 100%
		height: 100%
		color: rgba($color-text-dark-hint, .5)
		cursor: default
		padding: 15px 10px
		font:
			size: 2em
			weight: 100

#item-view-feed
	padding: 10px
	color: $color-text-dark-primary
	pre
		margin: 15px auto

	#comments-container
		margin-top: 0