/*
Copyright (C) 2016 Nauta Tecnològica, SCP - All Rights Reserved.
Unauthorized copying, publishing, commercial usage and/or distribution of this file,
via any medium, is strictly prohibited without the express permission of the owner.
*/
/*
    Created on : 04/12/2016, 05:17:46
    Author     : Jordi Santacana <jordistc@nautalogica.com>
*/

$bodytext: #67757c; 

/* Shadows */
$default-shadow:0 2px 2px 0 rgba(169,169,169,.14), 0 3px 1px -2px rgba(169,169,169,.2), 0 1px 5px 0 rgba(169,169,169,.12);
$default-shadow-hover:0 14px 26px -12px rgba(169,169,169,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(169,169,169,.2);

$info-shadow: 0 2px 2px 0 rgba(66,165,245,.14), 0 3px 1px -2px rgba(66,165,245,.2), 0 1px 5px 0 rgba(66,165,245,.12);
$info-shadow-hover:0 14px 26px -12px rgba(23,105,255,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(23,105,255,.2);

$warning-shadow:0 2px 2px 0 rgba(248,194,0,.14), 0 3px 1px -2px rgba(248,194,0,.2), 0 1px 5px 0 rgba(248,194,0,.12);
$warning-shadow-hover:0 14px 26px -12px rgba(248,194,0,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(248,194,0,.2);

$danger-shadow:0 2px 2px 0 rgba(239,83,80,.14), 0 3px 1px -2px rgba(239,83,80,.2), 0 1px 5px 0 rgba(239,83,80,.12);
$danger-shadow-hover:0 14px 26px -12px rgba(239,83,80,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(239,83,80,.2);

$success-shadow:0 2px 2px 0 rgba(40,190,189,.14), 0 3px 1px -2px rgba(40,190,189,.2), 0 1px 5px 0 rgba(40,190,189,.12);
$success-shadow-hover:0 14px 26px -12px rgba(40,190,189,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(40,190,189,.2);


$datatable-border-color: #bbb !default;
/*$datatable-action-bg: #fff !default;*/

// -------------------------
@mixin datatable-row-variant($state, $background, $text: "") {
	.datatable-table table > .rowset-head > dl,
	.datatable-table table > .rowset-body > dl,
	.datatable-table table > tfoot > dl {
		> dd.#{$state},
		> dt.#{$state},
		&.#{$state} > dd,
		&.#{$state} > dt {
			background: $background;
			@if $text != "" {
				color: $text;
			}
		}
	}

	.datatable-table table.table-hover > .rowset-body > dl {
		> dd.#{$state}:hover,
			> dt.#{$state}:hover,
			&.#{$state}:hover > dd,
			&.#{$state}:hover > dt {
			background: darken($background, 5%);
		}
	}
}

.btn-action {
	/*color: $bodytext;*/
	
	/*background-color: $white;*/

	/*border: 1px solid $border;*/
	box-shadow: $default-shadow;
    transition: 0.2s ease-in;

	margin: 0 1px;
	padding: 2px 4px;
	text-align: center;

	@include no-border-radius();

	&:hover,
		&:focus,
		&.focus {
        box-shadow: $default-shadow-hover;
    }
    &.active, &:focus{
        box-shadow: $default-shadow-hover;
    }

	> .fa {
		// Tret de fa-fw
		width: (18em / 14);
		text-align: center;
	}
}


dt.actions,
dd.actions,
.btn-actions {
	.btn {
		@extend .btn-action;
	}
}

.btn-actions {
	white-space: nowrap;
	padding: 0 5px;

	> .btn {
		&:first-child {
			margin-left: 0;
		}

		&:last-child {
			margin-right: 0;
		}
	}
}

.dataview {
	.form-header {
		border-bottom: 1px dashed #cecece;
		@include clearfix();
	}
}

.dataview-header {
	margin-top: 0;
	margin-bottom: 8px;
	padding: 3px 0 0;
	overflow: hidden;
	@include clearfix();

	.separador-v { padding: 0 5px; }

	.button {
		padding-top: 3px;
		padding-bottom: 3px;
		margin-left: 5px;
		margin-bottom: 0;
		vertical-align: top;
	}

	select {
		background-color: #FFFFFF;
		background-image: none;
		border: 1px solid #e5e6e7;
		border-radius: 1px;
		padding: 0 2px;
		transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;

		&:focus,
			&::-moz-focus-inner {
			outline: 0;

			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
		}

		option {
			outline: 0 none;
			&:focus,
				&::-moz-focus-inner {
				outline: 0 none;
			}
		}
	}

	ul.pagination {
		float: right;
		margin: 0;
	}
}

.dataview-footer {
	padding: 0 0 5px;
	margin: 5px 0;
	border-bottom: 1px dashed #cecece;
	@include clearfix();

	ul.pagination {
		margin: 0;
	}
}

.dataview-rowset {
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;

	> .rowset-container {

	}
}
.rowset-container {

	> .rowset-head > dl {
		border-bottom: 1px solid $datatable-border-color;
		
		&:before,
			&:after {
			content: " ";
			display: table;
		}

		&:after {
			clear: both;
		}
	}

	> .rowset-head > dl > dt {
		vertical-align: top;
		padding: 2px 5px;

		/*float: left;*/
		display: inline-block;

		a {
			span {
				color: $text-color;
			}

			&:hover {
				text-decoration: none;

				span {
					text-decoration: none;
					color: $brand-primary;
					border-color: $brand-primary;
				}
			}
		}

		.th {
			font-size: 0.9em;
			display: block;
			width: 100%;
			overflow: hidden;
			min-height: 1%;
		}

		.th-icon {
			float: right;
			font-size: 0.9em;
		}

		.th-toolbar {
			display: block;
			z-index: 10;
			overflow: hidden;
			margin-left: 5px;
			float: right;
			font-size: 0.9em;
		}

		> .order-toolbar {
			display: block;
			z-index: 10;
			overflow: hidden;

			text-align: right;
			padding-left: 0;
			padding-right: 0;

			float: right;

			font-family: sans-serif;
			font-size: 0.9em;
			letter-spacing: -1px;

			white-space: nowrap;
			vertical-align: text-top;

			> a {
				margin: 0;
				outline: 0 none;

				&:hover,
					&:focus,
					&:active {
					text-decoration: none;
					outline: 0 none;
				}

				&:first-child {
					margin-left: 0;
				}

				&:last-child {
					margin-right: 0;
				}
			}
		}

		&.numeric { text-align: left; }
		&.centrat { text-align: left; }
	}



	> .rowset-body {

		> dl {
			width: 100%;
			overflow: hidden;
			margin: 5px 0 0;
			padding: 0 0 9px;
			border-bottom: 1px solid $datatable-border-color;
		}

		> dl > dt {
			text-align: left;
			display: inline-block;
			min-width: 100px;
			margin-right: 5px;
		}

		> dl > dd {
			display: inline;
			margin: 0;

			&:after {
				display: block;
				content: '';
			}
		}
	}
}

.dataview-rowset-OFF {

	width: 100%;
	overflow-x: auto;
	overflow-y: visible;

	> .rowset-container {
		> .rowset-head > dl > dt {
			vertical-align: top;
			padding: 2px 5px;

			border-top: 1px solid $datatable-border-color;

			a {
				span {
					color: $text-color;
				}

				&:hover {
					text-decoration: none;

					span {
						text-decoration: none;
						color: $brand-primary;
						border-color: $brand-primary;
					}
				}
			}

			.th {
				font-size: 0.9em;
				display: block;
				width: 100%;
				overflow: hidden;
				min-height: 1%;
			}

			.th-icon {
				float: right;
				font-size: 0.9em;
			}

			.th-toolbar {
				display: block;
				z-index: 10;
				overflow: hidden;
				margin-left: 5px;
				float: right;
				font-size: 0.9em;
			}

			> .order-toolbar {
				display: block;
				z-index: 10;
				overflow: hidden;

				text-align: right;
				padding-left: 0;
				padding-right: 0;

				float: right;

				font-family: sans-serif;
				font-size: 0.9em;
				letter-spacing: -1px;

				white-space: nowrap;
				vertical-align: text-top;

				> a {
					margin: 0;
					outline: 0 none;

					&:hover,
						&:focus,
						&:active {
						text-decoration: none;
						outline: 0 none;
					}

					&:first-child {
						margin-left: 0;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}

			&.numeric { text-align: left; }
			&.centrat { text-align: left; }
		}




		> .rowset-body > dl > dd {

			padding: 4px 10px;
			vertical-align: middle;

			/*border-top: 1px solid $datatable-border-color;*/

			&.left { text-align: left; }
			&.right, &.numeric { text-align: right; }
			&.centrat { text-align: center; }
			&.dd-truncate {
				padding: 0 !important;
				> span,
				> div {
					padding: 4px 10px;
					display: inline-block;
					vertical-align: middle;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.fastedit-field {
				cursor: pointer;
			}

			&:hover {
				cursor: default;
			}
		}

		> .rowset-head > dl,
		> .rowset-body > dl {
			> dt.actions,
			> dd.actions {
				text-align: center;
				width: 1em;
				padding-left: 5px;
				padding-right: 5px;
			}

			> dt.rowcheck,
			> dd.rowcheck {
				white-space: nowrap;
				margin: 0 !important;
				padding: 0 2px 1px !important;
				text-align: center;
				width: 1em !important;
				/*background-color: $datatable-action-bg;*/
			}

			> dt.rowcheck {
				vertical-align: bottom;
			}

			> dd.rowcheck {
				vertical-align: middle;
			}

			/*			&.checked {
							> dd,
							> dt {
								background-color: #FCF8E3;
								border-color: #FBEED5;
							}
							&:hover {
								> dd,
								> dt {
									background-color: #FFFFCC !important;
								}
							}
						}

						&.danger {
							background-color:  #ffcccc;
						}*/
		}

		&.table-condensed {
			> .rowset-body > dl {
				> dd {
					padding: 2px 5px;
					font-size: $font-size-small;
				}

				> dt.check,
				> dd.check {
					> input[type="checkbox"] {
						margin: 1px 0 0;
					}
				}
			}
		}


	}

	.rowset-container {

		// Taules dintre un modal
		.modal-dialog & {
			width: 100% !important;
		}

		&.full-width {
			width: 100% !important;
		}

		> .rowset-head > dl > dt,
		> .rowset-body > dl > dt,
		> tfoot > dl > dt,
		> .rowset-body > dl > dd,
		> tfoot > dl > dd {
			white-space: nowrap;
		}

		> .rowset-head > dl > dt:first-child,
			> .rowset-body > dl > dt:first-child,
			> tfoot > dl > dt:first-child,
			> .rowset-head > dl > dd:first-child,
			> .rowset-body > dl > dd:first-child,
			> tfoot > dl > dd:first-child {
			border-left: 1px solid $datatable-border-color;
		}

		> .rowset-head > dl > dt:last-child,
			> .rowset-body > dl > dt:last-child,
			> tfoot > dl > dt:last-child,
			> .rowset-head > dl > dd:last-child,
			> .rowset-body > dl > dd:last-child,
			> tfoot > dl > dd:last-child {
			border-right: 1px solid $datatable-border-color;
		}

		> .rowset-head > dl:last-child > dt,
			> .rowset-body > dl:last-child > dt,
			> tfoot > dl:last-child > dt,
			> .rowset-head > dl:last-child > dd,
			> .rowset-body > dl:last-child > dd,
			> tfoot > dl:last-child > dd {
			border-bottom: 1px solid $datatable-border-color;
		}
	}
}

@include datatable-row-variant('checked', #FCF8E3);
@include datatable-row-variant('active', #dddddd, darken($text-color, 75%));
@include datatable-row-variant('success', #dff0d8, #333333);
@include datatable-row-variant('info', #d9edf7, $state-info-text);
@include datatable-row-variant('warning', $state-warning-bg, $state-warning-text);
@include datatable-row-variant('danger', #f2dede, $state-danger-text);

.rowcheck > span {
	position: relative;
	display: inline-block;
	margin: 3px;
	cursor: pointer;

	/*vertical-align: middle;*/
	padding-left: 16px;
	font-weight: normal;

	input[type="checkbox"],
	input[type="radio"] {
		position: absolute;
		z-index: 1;
		width: 14px;
		height: 14px;
		margin-left: -14px;
		margin-top: 0;
		cursor: pointer;
		opacity: 0;

		&:checked + i:before {
			background-color: inherit;
		}

		&[type="radio"] + i {
			border-radius: 50%;

			&:before {
				border-radius: 50%;
			}
		}

		&[type="checkbox"]:checked + i:after {
			position: absolute;
			top: 3px;
			left: 3px;
			display: table;
			width: 6px;
			height: 6px;
			background: rgba(102, 102, 102, 0.8);
			content: ' ';
		}

		&[type="radio"]:checked + i:after {
			position: absolute;
			top: 6px;
			left: 6px;
			display: table;
			width: 6px;
			height: 6px;
			background: rgba(0, 0, 0, 0.75);
			border-radius: 50%;
			content: ' ';
		}

		&[disabled] + i:before {
			border-color: rgba(0, 0, 0, 0.26);
		}
	}

	> i {
		position: relative;
		display: inline-block;
		width: 0;
		height: 12px;
		margin-top: -2px;
		margin-right: 14px;
		margin-left: -14px;
		line-height: 1;
		vertical-align: middle;

		&:before {
			position: absolute;
			width: 12px;
			height: 100%;
			border: 2px solid rgba(0, 0, 0, 0.55);
			border-radius: 2px;
			content: "";
			-webkit-transition: none;
			-moz-transition: none;
			-o-transition: none;
			transition: none;
		}
	}
}

.dataview-topbar,
.dataview-addonpanels {
	/*@include clearfix;*/
}

.dataview-toolbars {

	float: right;
	margin-left: 10px;
	margin-right: 2px;
	margin-top: -4px;

	.dropdown,
	.toolbar {
		display: inline-block;
		white-space: nowrap;
		margin-right: 10px;

		&:first-child {
			margin-left: 0;
		}

		&:last-child {
			margin-right: 0;
		}
	}

	.toolbar {
		> .btn {
			margin-right: 10px;

			&:first-child {
				margin-left: 0;
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}
}

.dataview-headerbar,
.dataview-headerpanel {
	padding-left: 3px;
	padding-right: 3px;
	padding-bottom: 9px;
	border-bottom: 1px dashed #cecece;
	margin-bottom: 10px;
	@include clearfix;
}

.dataview-addonpanels {

	form {
		margin: 0;
	}

	label {
		font-weight: 600;
		margin-left: 10px;
		margin-right: 5px;
		vertical-align: baseline;
		&:first-child {
			margin-left: 0;
		}
	}

	input,
	select,
	.form-control {
		/*		@include form-control;
				@include form-control-extra;*/
	}



	.input-group-btn {
		.btn {
			border-radius: $input-border-radius !important;
		}

		/*		&.input-group-sm {
					.form-control {
						height: 30px;
					}
				}*/
	}

	.input-group-lg > .form-control,
	.input-group-lg > .input-group-addon,
	.input-group-lg > .input-group-btn > .btn {
		height: $input-height-large;
	}
	.input-group-sm > .form-control,
	.input-group-sm > .input-group-addon,
	.input-group-sm > .input-group-btn > .btn {
		height: $input-height-small;
	}



	/*	input,
		select {
			height: $input-height-small;
			background-color: $input-bg;
			background-image: none;
			border: 1px solid $input-border;
			border-radius: 0;
			padding: 2px 4px;
			@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			vertical-align: middle;
	
			&:focus,
				&::-moz-focus-inner {
				outline: 0;
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
			}
		}
	
		input {
			padding-left: 6px;
			padding-right: 6px;
		}
	
		option {
			outline: 0 none;
			&:focus,
				&::-moz-focus-inner {
				outline: 0 none;
			}
		}*/
}