//variables 
$icon-color: #87C795

//$bg-content-color: #F8F9FB // bleu gris clair
//$bg-content-color: #F8FBF8 // vert gris clair
//$bg-content-color: #F8F8F8 // gris
$bg-content-color: #E0E0E0 // gris foncé

//$bg-head-color: white
//$bg-head-color: #F5792B // orange
//$bg-head-color: #81A98C //vert d'eau
//$bg-head-color: #0091B0 // bleu
//$bg-head-color: #00C3C1 //turquoise
//$bg-head-color: #9DC44B // vert pomme
//$bg-head-color: #97C885 // vert menthe
//$bg-head-color:  #4691D2 // bleu ciel
//$bg-head-color: #814C76 //violet
//$bg-head-color:  #FE635F //saumon
//$bg-head-color:  #F8235A //rose
//$bg-head-color: #F2B100 //moutarde
//$bg-head-color: #F7854E // abricot
//$bg-head-color: #665D5C // taupe clair
$bg-head-color: #60C276 //vert

//light
//$brand-primary: #98958C // sable
//$brand-primary: #92979B //gris
//$brand-primary: #A9B6C1 //bleu
//dark
//$brand-primary: #3D3D3D // gris
//$brand-primary: #515561 // gris bleu clair
//$brand-primary: #4D4645 //taupe
$brand-primary: #272822 // gris vert
//$brand-primary: #313A45 // gris
//$brand-primary: #4F2E4A // violet
//$brand-primary: #373E35 // vert camo
//$brand-primary: #262C3F // bleu nuit

$panel-color: $brand-primary
$bg-body-color: $brand-primary
$badge-panel-color: #DC315E

@import "compass"
@import "bootstrap/variables"
@import "bootstrap"
@import "font-awesome"
@import "toggle-switch"

html, body
	height: 100%
	min-height: 700px

body.fixed-top
	position: relative
	top: 35px
	margin-bottom: 50px
	background-color: $bg-body-color

#header_infos
	background-color: darken($brand-primary,10%)
	z-index: 9999
	#header_shopname
		font-size: 1.6em
		font-family: "ubuntu"
		font-weight: 300
	#notifs_icon_wrapper
		i
			font-size: 1.5em
		.badge
			background-color: $badge-panel-color

#main
	position: relative

.container-fluid, .row-fluid
	width: 100%

#content
	min-height: 700px
	padding: 90px 20px 20px
	margin-left: 240px
	@include transition-property(margin)
	@include transition-duration(0.4s)
	@include transition-timing-function(ease-out)
	background-color: $bg-content-color
	background-image: url('../img/patterns/bedge_grunge.png') 
	fieldset, .panel
		padding: 20px
		margin-bottom: 20px
		border: solid 1px darken($bg-content-color,10%)
		background-color: lighten($bg-content-color,20%)
		@include border-radius(5px)
		@include box-shadow(rgba(black,0.10) 0 2px 0, white 0 0 0 3px inset)
	.panel-heading
		@extend h3
	h3, .panel-heading
		height: 30px
		padding: 0 5px
		margin: -16px -16px 15px -16px
		clear: both
		line-height: 30px
		color: white	
		font-size: 1.2em
		font-weight: 300
		text-transform: uppercase
		background-color: $panel-color
		i, a
			color: $bg-head-color!important
		.badge
			background-color: lighten($panel-color,20%)
			border-radius: 0
			height: 29px
			line-height: 25px
			font-size: 1.3em
			margin-right: 7px
			font-weight: 300
			float: left
			margin-left: -5px
	.panel-danger .panel-heading
		background-color: $badge-panel-color!important
	.panel-heading-big
		font-size: 2em
		text-align: center
	form .alert
		clear: both
		color: darken(#D6D2CF,40%)
		border: solid 1px darken(#D6D2CF,5%)
		background-color: lighten(#D6D2CF,5%)
		&.alert-info
			background-color: white
			color: darken(#DAEAF8,30%)
			border: none
			border-bottom: solid 1px darken($bg-content-color,10%)
			@include box-shadow(white 0 0 0 1px inset)
	.page-head
		width: 100%
		height: 69px
		padding: 5px 10px 0 0
		margin: 0
		border-bottom: 4px solid darken($bg-head-color,20%)
		position: fixed
		top: 37px
		left: 0px
		z-index: 9000
		background-color: $bg-head-color
		@include box-shadow(rgba(black,0.15) 0 7px 0, rgba(white,0.15) 0 -1px 0 inset)
		h2.page-title
			@extend .pull-left
			padding: 0 0 0 260px
			font-size: 20px
			line-height: 25px
			color: white
			text-transform: uppercase
		.btn-toolbar
			margin: 0
			.nav-tabs
				margin: 0
			.nav-tabs > li > a
				color: #333
				> .active > a, > .active > a:hover
					color: #3399ff
					background: #f5f5f5

#sidebar
	z-index: 9001
	float: left
	position: absolute
	width: 240px
	background-color: $brand-primary
	border-bottom: 1px solid lighten($brand-primary,5%)
	border-right: 1px solid black
	> ul > li > ul.sub-menu
		display: none
		list-style: none
		clear: both
		margin: 8px 0px 8px 0px
	> ul
		margin: 0
		padding: 0
		li
			background-color: lighten($brand-primary,0)
			list-style: none
		li:not(.active) ul
			display: none
		li.expanded
			ul
				display: block
				background-color: white
		> li
			&:hover > a, &.active > a
				color: white
				background-color: darken($brand-primary,5%)
				@include box-shadow($bg-head-color -4px 0 0 inset)
				i
					color: $bg-head-color!important
			> a
				display: block
				padding: 5px 0 5px 5px
				border-top: 1px solid lighten($brand-primary,5%)
				border-bottom: 1px solid darken($brand-primary,15%)
				color: lighten($brand-primary,45%)
				text-transform: uppercase
				text-decoration: none
				@include transition-property(background-color, border, box-shadow)
				@include transition-duration(0.4s)
				@include transition-timing-function(ease-out)
				@include box-shadow(darken($brand-primary,15%) -4px 0 0 inset)
				i
					color: lighten($brand-primary,25%)!important
					@include transition-property(color)
					@include transition-duration(0.4s)
					@include transition-timing-function(ease-out)
			img
				margin-right: 10px
			ul
				margin: 0
				padding: 0
				border-bottom: 1px solid #CECECE
				background-color: white
				li 
					a
						display: block
						padding: 3px 10px 3px 10px
						font-size: 12px
						border: none
						border-bottom: 1px solid lighten($bg-head-color,25%)
						background-color: white
						i
							margin-top: 3px
							color: $bg-head-color
						&:hover
							background-color: lighten($bg-head-color,35%)
							text-decoration: none
							i
								color: $brand-primary
					&.active
						a
							color: #1A1A1A
							background-color: $bg-head-color
							i
								color: $brand-primary

.page-sidebar-closed
	#sidebar
		width: 50px
		white-space: nowrap
		@include transition-property(width)
		@include transition-duration(0.4s)
		@include transition-timing-function(ease-out)
		span.title
			display: none
		ul.submenu
			display: none!important
	#content
		margin-left: 50px
		.page-head h2.page-title
			padding: 0 0 0 70px


.menu-collapse
	height: 70px
	width: 100%
	font-size: 2em
	text-align: center
	line-height: 68px
	display: block
	background-color: black
	i
		color: white!important


#menu .maintab > a [class^="icon-"], #menu .maintab > a [class*=" icon-"]
	font-size: 22px
	border-radius: 40px
	height: 35px
	width: 35px
	color: white
	display: inline-block
	text-align: center
	line-height: 35px

// Tool bar
.toolbar_btn
	border: solid 1px lighten($bg-head-color,15%)
	position: relative
	padding: 2px 5px !important
	margin-right: 3px
	font-size: 12px
	font-weight: 600
	color: white
	text-align: center
	text-shadow: none
	&:hover
		color: darken($bg-head-color,20%)
		border-color: white
		background-color: white

.icon-AdminDashboard
	@extend .icon-dashboard
	background-color: adjust-hue($icon-color, 0)
.icon-AdminCatalog
	@extend .icon-book
	background-color: adjust-hue($icon-color, 30)
.icon-AdminParentOrders
	@extend .icon-credit-card
	background-color: adjust-hue($icon-color, 60)
.icon-AdminParentCustomer
	@extend .icon-group
	background-color: adjust-hue($icon-color, 90)
.icon-AdminPriceRule
	@extend .icon-tags
	background-color: adjust-hue($icon-color, 120)
.icon-AdminParentShipping
	@extend .icon-truck
	background-color: adjust-hue($icon-color, 150)
.icon-AdminParentLocalization
	@extend .icon-globe
	background-color: adjust-hue($icon-color, 180)
.icon-AdminParentModules
	@extend .icon-puzzle-piece
	background-color: adjust-hue($icon-color, 210)
.icon-AdminParentPreferences
	@extend .icon-wrench
	background-color: adjust-hue($icon-color, 240)
.icon-AdminTools
	@extend .icon-cogs
	background-color: adjust-hue($icon-color, 270)
.icon-AdminAdmin
	@extend .icon-cog
	background-color: adjust-hue($icon-color, 300)
.icon-AdminParentStats
	@extend .icon-bar-chart
	background-color: adjust-hue($icon-color, 330)
.icon-AdminStock
	@extend .icon-archive
	background-color: adjust-hue($icon-color, 360)

[class^="icon-Admin"]
	background-color: darken($brand-primary,10%)
	margin-right: 6px
	color: lighten($brand-primary,10%)!important

[class^="process-icon-"], [class*=" process-icon-"]
	height: 32px
	min-width: 32px
	background-position: center
	background-repeat: no-repeat
	display: block
	font-family: FontAwesome
	font-weight: normal
	font-style: normal
	font-size: 25px
	line-height: 32px
	text-decoration: inherit
	-webkit-font-smoothing: antialiased
	*margin-right: .3em

.process-icon-new
	@extend .icon-plus-sign-alt
.process-icon-save
	@extend .icon-save
.process-icon-back
	@extend .icon-arrow-left
.process-icon-save-and-stay
	@extend .icon-save
.process-icon-help
	@extend .icon-question-sign
.process-icon-export
	@extend .icon-cloud-download
.process-icon-import
	@extend .icon-cloud-upload
.process-icon-help-new
	@extend .icon-question-sign
.process-icon-edit
	@extend .icon-edit
.process-icon-newAttributes
	@extend .icon-plus-sign-alt
.process-icon-modules-list
	@extend .icon-puzzle-piece
.process-icon-save-date
	@extend .icon-download
.process-icon-save-status
	@extend .icon-download
.process-icon-new-module
	@extend .icon-plus
.process-icon-delete
	@extend .icon-trash
.process-icon-update
	@extend icon-refresh
.process-icon-preview
	@extend .icon-eye-open
.process-icon-previewURL
	@extend .icon-eye-open
.process-icon-stats
	@extend .icon-bar-chart
.process-icon-duplicate
	@extend .icon-copy
.process-icon-newCombination.toolbar-new
	@extend .icon-plus-sign
.process-icon-newCombination.toolbar-cancel
	@extend .icon-minus-sign
.process-icon-partial_refund
	@extend .icon-exchange
.process-icon-cancel
	@extend .icon-remove

.navbar-inner
	box-shadow: none!important
	.input-append
		margin-bottom: 0

//form
label.control-label
	font-size: 13px
	font-weight: normal
	color: #666

label.control-label span.label-tooltip
	text-decoration: none
	font-size: 13px
	background-color: darken($bg-content-color,5%)
	border: none
	border-bottom: solid 1px darken($bg-content-color,10%)
	padding: 0 5px
	@include border-radius(3px)

.tooltip
	font-size: 12px

label.required:before
	content: '*'
	color: red
	font-size: 14px
	position: relative
	line-height: 12px

select.input-tiny,
input[type="text"].input-tiny,
input[type="password"].input-tiny
	width: 80px
	float: left

//some helpers to get fixed width
.fixed-width-XS
	width: 40px
.fixed-width-S
	width: 80px
.fixed-width-M
	width: 120px
.fixed-width-L
	width: 160px
.fixed-width-XL
	width: 200px


.btn
	text-transform: uppercase

.btn-default
	border-color: darken($bg-content-color,20%)
	color: lighten($brand-primary,15%)
	//@include background(linear-gradient(top,$bg-content-color, darken($bg-content-color,10%)))
	background-color: white
	@include box-shadow(rgba(black,0.10) 0 -2px 0 inset)
	&:hover, &:focus
		border-color: darken($bg-content-color,30%)
		color: lighten($brand-primary,15%)
		@include background(linear-gradient(top, darken($bg-content-color,0%), darken($bg-content-color,5%)))

.btn-primary
	border-color: $bg-head-color
	color: lighten($brand-primary,15%)
	background-color: lighten($bg-head-color,40%)
	//@include background(linear-gradient(top,lighten($bg-head-color,10%),lighten($bg-head-color,0%)))
	@include box-shadow(lighten($bg-head-color,20%) 0 -2px 0  inset)
	&:hover, &:focus
		border-color: $bg-head-color
		color: lighten($bg-head-color,70%)
		@include background(linear-gradient(top,darken($bg-head-color,0%),darken($bg-head-color,10%)))

.btn-default[disabled]
	border-color: lighten($brand-primary,35%)
	color: lighten($brand-primary,15%)
	background-color: lighten($brand-primary,65%)
	@include box-shadow(lighten($brand-primary,55%) 0 -2px 0  inset)
	&:hover, &:focus
		border-color: $bg-head-color
		color: lighten($bg-head-color,70%)
		@include background(linear-gradient(top,darken($bg-head-color,0%),darken($bg-head-color,10%)))

.btn-group-action
	display: inline-block
	white-space: nowrap
	a
		text-decoration: none
.btn .caret
	border-top-color: lighten($brand-primary,15%)!important


hr
	border-color: darken($bg-content-color,10%)
	border-bottom: 1px solid white

//table 
.table
	@extend .table-striped
	@extend .table-hover
	border-collapse: separate
	border-spacing: 0 2px
	margin-bottom: 5px
	thead th
		background-color: darken($bg-content-color,10%)
	thead > tr > th
		font-weight: normal
		vertical-align: top
		span.title_box
			display: block
			word-wrap: nowrap
			white-space: nowrap
			&.active
				font-weight: bold
			a
				text-decoration: none
			a.active
				color: black
	input, select
		margin: 0
	tbody > tr > td
		border-top: none
		background-color: white
	tbody > tr > td
		padding: 3px 7px 3px 7px
		vertical-align: middle
		word-wrap: nowrap
		font-size: 12px
		@include box-shadow(rgba(black,0.15) 0 1px 0)

	td.center, th.center
		text-align: center
	tr td:first-child,
	tr th:first-child 
		border-top-left-radius: 3px
		border-bottom-left-radius: 3px
	tr td:last-child,
	tr th:last-child 
		border-top-right-radius: 3px
		border-bottom-right-radius: 3px
	.btn-group
		float: right
		.btn
			float: left
	.btn
		float: right

//filter table
tr.filter
	background-color: rgba(#A39F95,0.5)
	input[type="text"].filter, input[type="password"].filter, select.filter
		font-size: 12px
		border-color: #A39F95

.breadcrumb
	background-color: lighten($bg-content-color,7%)

.badge
	background-color: $bg-head-color

.badge-success
	@extend .badge
	background-color: $brand-success

.badge-error
	@extend .badge
	background-color: $brand-danger

.icon-big
	font-size: 4em
	color: darken($bg-content-color,20%)



#module-list
	h3
		position: relative
		top: 0
		left: 0
		margin: 0
		padding: 0
		background-color: transparent
		color: $brand-primary
		font-weight: 500

#footer
	width: 100%
	float: left
	padding: 5px 0
	background-color: black
	color: #888
	a
		color: #ccc
	a.link-social
		&:hover
			text-decoration: none
		i
			font-size: 2em
			width: 30px
			height: 30px
			display: inline-block
			line-height: 30px
			text-align: center
			@include border-radius(30px)
	.link-twitter i
		color: white
		background-color: #7CCEEF
	.link-facebook i
		color: white
		background-color: #557DBB
	.link-github i
		color: black
		background-color: white
	.link-google i
		color: white
		background-color: #E6644E
	#go-top
		position: fixed
		bottom: 10px
		height: 30px
		width: 30px
		text-align: center
		line-height: 30px
		right: 10px
		z-index: 9003
		display: block
		padding: 0px 6px 0px 6px
		margin: -2px 0px 0px
		text-decoration: none
		color: #fff
		cursor: pointer
		font-size: 16px
		background-color: rgba(0,0,0,0.8)

		
	.go-top i
		color: #666
		font-size: 22px
		margin-bottom: 5px