/**
 * Admin CSS
 *
 * @package		Pongho CMS
 * @author		Daniele De Nobili, Daniele Termini
 * @copyright	© 2014, Daniele De Nobili
 * @since		Pongho 2.0
 * @version		3.0
 */

@import 'scss/variables';
@import 'scss/mixin';
@import 'scss/icons';

/* Reset */
* { margin: 0; padding: 0; }
a, input[type=checkbox] { cursor: pointer; outline: none; }
fieldset, img { border: 0 none; }
input[type=hidden] { display: none!important; }


/* Framework */
a { color: $linkColor; text-decoration: none; } a:hover { color: #666; text-decoration: underline; }
.l { text-align: left; } .r { text-align: right; } .c { text-align: center; }
.bckl { display: block; float: left; } .bckr { display: block; float: right; } .clr { clear: both; }
.hide { display: none; }
.delete { color: #F00000; }
.help { cursor: help; }
.cf { @include cf(); }
.loading		{ background: #fff url(images/loading.gif?v=2) no-repeat center center; height: 100%; min-height: 100px; }


.box	{ list-style: none; margin: 8px; padding: 7px; }
.info	{ background-color: #ccf2be; border: 1px solid #127e0b; }
.alert	{ background-color: #fefeb5; border: 1px solid #ffc01b; }
.error	{ background-color: #ffe0e4; border: 1px solid #f80f0f; }

.icn { background: url('images/icons.png') no-repeat top left; height: 16px; width: 16px; }

/* Typography */
body	{ color: #444; font: normal unquote($fontSizeBody) $fontFace; min-width: 1200px; }
h1		{ font: normal unquote($fontSizeTitle1) $fontFace; margin: 8px 0; }
h2		{ font: normal unquote($fontSizeTitle2) $fontFace; }
h3		{ font: normal unquote($fontSizeTitle3) $fontFace; text-transform: uppercase; }
p		{ font-size: 1em; line-height: 16px; margin-bottom: 8px; }
input, textarea, select { font: normal unquote($fontSizeFields) $fontFace; }


/* Layout */
body { margin-top: 10px; }
#page		{ min-width: 960px; width: 100%; }
#header		{ height: 48px; margin: 0 16px 16px 16px; padding: 0 16px; }
#footer		{ clear: both; }

#content {
	display: flex;
	flex-direction: row-reverse;
	margin: 0 10px;
}

#sidebar {
	flex-shrink: 0;
	width: 160px;
}

#main {
	margin-left: 10px;
	width: 100%;
}


/* Header */
#header {
	color: #fff; background-color: #444;

	h1 { float: left; text-transform: uppercase; }
	ul { float: right; list-style: none; margin: 0; padding: 0; }
	li {
		float: left;
		&:hover { background-color: #555; }
		a { text-decoration: none; }
	}
	a, span { color: #fff; cursor: pointer; display: block; height: 16px; padding: 16px; }
}
#top-link-home a { background: url('images/home.png') no-repeat center center; text-indent: -999em; width: 16px; }


/* Browser non supportato */
#browser-not-supported {
	display: none; font-weight: bold; margin-left: 16px; margin-right: 16px; text-align: center;
	a { text-decoration: underline; }
}


/* multi sito */
#top-link-sites {
	position: relative;

	&:hover span { background-color: #FFF; color: #444; }
	ul { background-color: #FFF; border: 1px solid #CCC; display: none; position: absolute; }
	ul.level-1 { border-top: 0 none; padding-top: 4px; right: 0; top: 48px; width: 150px; }
	&:hover ul.level-1 { display: block; }
	ul.level-2 { right: 150px; top: 0; }
	ul.level-1 li:hover ul.level-2 { display: block; }
	li { background-color: #FFF; display: block; padding: 0; }
	li:hover { background-color: #FFF; } /* sovrascrive la regola per #header li:hover */
	ul.level-1 li { position: relative; width: 150px; }
	ul.level-2 li { width: auto; }
	li#sites-settings {
		border-top: 1px solid #EEE; margin-top: 2px;
		a { margin-top: 2px; }
	}
	a { color: #333; padding: 8px; text-align: right; }
	ul.level-1 a { float: right; width: 134px; }
	ul.level-1 li:hover a { background-color: #EEE; width: 135px; }
	li#sites-settings:hover a { width: 134px; }
	ul.level-1 li:hover ul.level-2 a { background-color: #FFF; }
	ul.level-1 li:hover ul.level-2 li:hover a { background-color: #EEE; }
	ul.level-2 a { width: 134px; }
}

/* Sidebar */
#sidebar {
	ul		{ list-style: none; }
	li, a	{ display: block; }
}

#sidebar-main {
	ul {
		margin-bottom: 0; border-top: 0 none; display: none;
		li {
			a {
				color: #3f7d9f; padding: $defaultPadding / 2 $defaultPadding; width: 142px;
				&:hover { background-color: #eee; color: #222; }
			}

			&.active {
				a {
					background-color: #ddd; color: #000; font-weight: bold;
					&:hover {}
				}
			}
		}
	}

	& > li {
		@include roundCorners();
		border: 1px solid #CCC; margin-bottom: $defaultMargin;

		& > a, /* voci senza sotto-menu */
		& > span /* voci con sotto-menu */
		{
			background: #ccc url(images/icns-sidebar.png) no-repeat 8px 0; color: #444; cursor: pointer; display: block; font: unquote($fontSizeMenu) $fontFace; padding: 7px 16px 7px 32px; text-decoration: none; text-transform: uppercase;
		}
		&:hover {
			border-color: #bbb;

			& > a, & > span { background-color: #bbb; color: #000; }
		}
		&.active {
			border-color: #666;

			& > a, & > span {
				background-color: #666; color: #fff;
			}
			ul { display: block; }
		}
	}

	/* icone */
	& > li.dashboard > a		{ background-position: 4px -60px; }
	& > li.settings > span		{ background-position: 4px -90px; }
	& > li.menus > span			{ background-position: 4px -90px; }
	& > li.users > span			{ background-position: 4px -120px; }
	& > li.customers > span		{ background-position: 4px -120px; }
	& > li.media > span			{ background-position: 4px -150px; }
	& > li.node > span			{ background-position: 4px -180px; }
	& > li.blog > span			{ background-position: 4px -210px; }
	& > li.gallery > span		{ background-position: 4px -240px; }
	& > li.shop > span			{ background-position: 4px -270px; }
	& > li.showcase > span		{ background-position: 4px -300px; }
	& > li.newsletter > span	{ background-position: 4px -330px; }
	& > li.slides > span		{ background-position: 4px -360px; }
	& > li.books > span			{ background-position: 4px -390px; }
	& > li.questions > span		{ background-position: 4px -420px; }
}

/* Filtri per lo stato */
div.filter-status {
	float: left; line-height: 25px;
	ul {}
	li { display: inline; list-style: none; }
	a { padding: $defaultPadding / 2 $defaultPadding; }
	span { color: #888; }
	a:hover { color: #444; text-decoration: none; }
	li.active a { color: #444; font-weight: bold; }
}
.filter-customer { float: left; margin-bottom: 0; line-height: 25px; }

.breadcrumb {
	margin-bottom: 8px;
	ul {
		list-style: none;
	}
	li {
		display: inline-block;
	}
	a {
		font-weight: bold;
	}
}

/* Tabelle */
table.pongho-table {
	background: #fff; border: 1px solid #bcbcbc; border-collapse: collapse; clear: both; margin-bottom: $defaultMargin; width: 100%;

	tbody td { height: 32px; }
	th { background: #f2f2f2; color: #222; padding: 0 3px; font: bold unquote($fontSizeTableHeaders) $fontFace; text-align: left; }
	thead th, tfoot th { border-bottom: 1px solid #bcbcbc; border-top: 1px solid #bcbcbc; }
	td { font-size: unquote($fontSizeTableRows); padding: 3px; vertical-align: top; }
	thead td { background: #fafafa; border-bottom: 1px solid #EEE; vertical-align: middle; }
	td strong { font-size: 1.09em; }
	tr.home td { background-color: #f7fbc9; }
	tr.unapproved td { background-color: #f7fbc9; }
	tr.last-view { border-left: 2px solid black; }
	th, td {
		width: 120px;
		&.small { width: 90px; }
		&.smallest { width: 50px; }
		&.large { width: 200px; }
		&.largest { width: 400px; }
		&.main { min-width: 150px; width: auto; }
		&.ckb { text-align: center; width: 20px; }
		&.id { text-align: right; width: 20px; }
		&.flag { width: 20px; }
	}

	td.btn { text-align: right; vertical-align: middle; }
	td.empty {
		font-size: 1.2em;
		height: auto;
		padding: 30px;
		text-align: center;
	}
	td .actions {
		height: 16px;
		span { display: none; }
	}

	th a.orderable { display: block; padding-left: 16px; position: relative; }
	th a.orderable span { margin-top: -9px; top: 50%; left: 0; position: absolute; }
	tr:nth-child(even) td { background-color: rgba(108, 141, 195, 0.1); }
	tr:hover {
		td {
			.actions {
				span { display: inline; }
			}
		}
	}
}


/* Flags */
img.flag, img.flag32 { display: block; float: left; margin-right: 6px; }
img.flag { height: 16px; width: 16px; }
img.flag32 { height: 32px; width: 32px; }
.translations img.flag { float: none; margin: 3px 0 0; }

.panel	{ @include cf(); background-color: #ffffff; border-bottom: 1px solid #cccccc; padding: $defaultPadding $defaultPadding 0 $defaultPadding; }
.panel a { color: #3F7D9F; }

.header-actions, .filters-actions, .footer-actions, .tabs { @include cf(); @include borderBox(); }

.header-actions {
	padding-bottom: $defaultPadding;
}

.footer-actions {
	border-top: 1px solid #CCC; padding: $defaultPadding; width: 100%;
}

/* Form dei filtri */
#filters {
	display: none;

	&.open {
		display: block;
	}

	.filters-actions {
		border-bottom: 1px solid #CCC; padding: $defaultPadding; width: 100%;
	}

	.filters-description { background-color: #ffffff; }

	.repeater-main { height: auto; }
	.repeater-fields { height: auto; line-height: 24px; padding: 4px 0; }
	.repeater-fields select, #filters .repeater-fields input { margin-left: $defaultMargin; vertical-align: top; }
	.filter-operator { width: 120px; }
	.filter-value, .chosen-container { margin-left: $defaultMargin; }
    .filter-value-text,
    .filter-value-date, .filter-value-date-between,
    .filter-value-datetime, .filter-value-datetime-between,
    .filter-value-time, .filter-value-time-between { width: 200px; }
	.filter-value-select, .filter-value-multiple { width: 408px; }
}
#filter-toggle {
	margin-left: $defaultMargin;
	&.open { background-color: $btnPrimaryFg; border: 1px solid $btnPrimaryBg; color: $btnPrimaryBg; padding-left: 9px; padding-right: 9px; }
}

/* correggo un problema con i fieldset contenenti i button */
#filters fieldset.btn { float: none; }
#filter-actions { float: left; }
#filter-save { float: right; }

/* Paginazione */
.pagination { float: right; font: unquote($fontSizeBody) $fontFace; }
.pagination ul { list-style: none; }
.pagination li { float: left; margin-left: 5px; }
.pagination li.current, .pagination a { @include roundCorners(); display: block; padding: 0 6px; line-height: 24px; }
.pagination li.current { background-color: #EEE; cursor: default; }
.pagination a { background-color: #BBB; color: #FFF; text-decoration: none; }
.pagination a:hover { background-color: #777; }

/* Repeater / Sortable */
.repeater { clear: both; list-style: none; margin-bottom: $defaultMargin; padding: 0; width: 100%; }
.repeater .repeater-row { @include roundCorners(); background-color: #FFF; border: 1px solid #DDD; line-height: 30px; margin-bottom: 5px; padding: 0; }
.repeater .sortable-placeholder { background-color: yellow; }
.repeater .repeater-row.repeater-blank-row { display: none; }
.repeater .repeater-main { background-color: #FAFAFA; height: 32px; padding: 0; position: relative; }
.repeater .repeater-main .repeater-fields { @include borderBox(); height: 32px; line-height: 32px; margin-left: 10px; }
.repeater.sortable .repeater-main .repeater-fields { margin-left: 40px; }
.repeater .sortable-handle { background-color: #DDD; cursor: move; display: block; float: left; height: 32px; margin-right: 5px; position: relative; width: 32px; z-index: 2; }
.repeater .repeater-actions { line-height: 32px; position: absolute; right: 10px; top: 0; }
.repeater .repeater-actions-open, .repeater .repeater-actions-close { color: #999; cursor: pointer; font-family: $fontFace; font-size: 12px; }
.repeater .repeater-actions-open:hover, .repeater .repeater-actions-close:hover { color: #444; }
.repeater .repeater-actions-close { display: none; }
.repeater .repeater-row.active > .repeater-main .repeater-actions-open { display: none; }
.repeater .repeater-row.active > .repeater-main .repeater-actions-close { display: inline; }
.repeater .repeater-row > .repeater-content { display: none; }
.repeater .repeater-row.active > .repeater-content { display: block; }
.repeater .repeater-content > .repeater-fields { background-color: #FFF; border-top: 1px solid #DDD; padding: 5px 10px; }
.repeater .repeater-content > .repeater-options { border-top: 1px solid #EEE; margin-top: $defaultMargin; }
.repeater .repeater-delete-row { color: red; margin-left: 10px; }
.repeater-row ol { border-top: 1px solid #EEE; clear: both; list-style: none; padding: 0 $defaultPadding 0 32px; }
.repeater-row ol li:first-child { margin-top: 5px; }
.repeater-row.alert { background-color: #FEFEB5; border: 1px solid #FFC01B; }
.repeater-row.error { background-color: #ffe0e4; border: 1px solid #f80f0f; }
.repeater-row { @include cf(); }
.repeater-container .actions { padding-bottom: $defaultPadding; }

/* LinkType */
.link-type-wrapper {
	div {
		display: inline-block;
	}
	.link-type {
		display: none;
		&.visible { display: inline-block; }
	}
}

.repeater {
	.link-type-wrapper {
		display: inline-block;
	}
	.repeater-main {
		.link-type-wrapper {
			.input_text, select { margin-left: $defaultMargin / 2; width: 200px; }
		}
	}

	/* Chosen all'interno dei pannelli richiudibili del repeater, lo forzo alla stessa larghezza delle select */
	.repeater-row.active {
		.chosen-container { width: 300px!important; }
	}
}

/* Tabs */
.tabs {
	background-color: #FFFFFF; border-bottom: 1px solid #bcbcbc; list-style: none; padding: $defaultPadding 10px 0 10px;
	li {
		float: left; margin-right: 1px; position: relative; top: 1px;

		a { border: 1px solid #bcbcbc; color: #000; display: block; height: 23px; line-height: 23px; opacity: 0.5; padding: 0 $defaultPadding; }
		&.active a { background-color: #fff; border-bottom: 1px solid #fff; opacity: 1; }
		a:hover	{ opacity: 1; }
		a span { display: none; }
	}

	.tabsPanel { display: none; }
	.tabsPanel.active { display: block; }
}

.section {
	@include cf(); background-color: #fafafa; border: 1px solid #666666; margin-bottom: $defaultMargin * 2;
	@include roundCorners();
}

.explain { padding: $defaultPadding $defaultPadding 0 $defaultPadding; overflow: hidden; }

.pongho-button, a.pongho-button {
	@include roundCorners();
	@include borderBox();
	background-color: $btnBg;
	border: 0 none;
	color: $btnFg;
	cursor: pointer;
	display: inline-block;
	font: normal normal unquote($fontSizeBody) $fontFace;
	height: 26px;
	margin: 0 5px 0 0;
	padding: 5px 10px 4px;
	text-decoration: none;
	&, &:active, &:focus {
		outline: none;
	}
	&.primary {
		background-color: $btnPrimaryBg; font-weight: bold;
	}
	&:hover, &.primary:hover { background-color: $btnHoverBg; color: $btnHoverFg; }
	&.busy {
		background: #D9534F url(images/loading-busy.gif?v=1) no-repeat 10px 50% !important; cursor: progress; padding-left: 30px !important;
	}
	&.delete { color: #F00000; }
	&.reset {
		background: none;
		color: #888;
		&:hover {
			color: #444;
		}
	}
}
a.pongho-button {
	line-height: 17px;
}

h2 { background-color: #666; color: #fff; margin: 0; padding: $defaultPadding $defaultPadding 7px $defaultPadding; }
h3 { color: #222; margin: 0 0 16px 0; }

/* Forms */
.pongho-form {
	/* Struttura */
	$sidebarWidth: 280px;

	legend { display: none; }

	tr.repeater-row:before, tr.repeater-row:after { content: none; }

	/* Con sidebar */
	.panels-wrapper {
		float: right; width: 100%;
		.panel { border-right: 1px solid #cccccc; }
	}
	.panels-wrapper > .panels-container { margin-right: $sidebarWidth; }
	.tabsPanel {
		@include cf();
		background-color: #fff;

		.panel { margin: 0; }
	}

	/* A form multiple */

	/* Nuovo codice dei campi */
	.main { margin-right: $sidebarWidth; }
	.sidebar { border-left: 1px solid #CCCCCC; }
	.inner { padding: 16px 10px; }

	.sidebar {
		float: right; margin-right: -100%; width: $sidebarWidth;
		.sidebar-actions { padding-bottom: $defaultPadding; }
	}

	/* Elementi html */
	p {
		padding: 0;
		&.empty {
			font-size: 1.2em;
			padding: 20px;
			text-align: center;
		}
	}
	.panel p.after-h3 { color: #666; margin-bottom: 16px; margin-top: -$defaultMargin; }


	/* Campi */
	.control-group {
		@include cf();
		margin-bottom: 10px;
		position: relative;

		.control-label { display: inline; float: left; width: 16%; }
		.controls {
			@include borderBox();
			margin-left: 18%;
			label { margin-right: $defaultMargin; }
			select,
			textarea,
			.input_text,
			.input_date {
				margin-right: 5px;
			}

			.btn {
				padding: 0 $defaultPadding;
			}
		}

		&.readonly {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 4px;

			ul {
				list-style: none;
			}

			li {
				background-color: #eeeeee;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				display: inline-block;
				margin-right: 3px;
				padding: 1px 3px;
			}
		}

		&.multiple { /* controlli multipli, checklist, ad esempio tassonomie e lingue */
			.controls { @include roundCorners(); background-color: #FFFFFF; border: 1px solid #ccc; height: 100px; overflow-y: auto; padding: 3px; }
			.controls label { display: block; }
		}
	}

	textarea,
	select,
	.input_text,
	.input_date,
	.input_time,
	.input_datetime {
		@include roundCorners();
		@include borderBox();
		@include controlsSizes();
		@include controls();
	}

	textarea.large {
		height: 8em;
	}

	/**
	 * @link https://stackoverflow.com/a/31374482/5883477
	 */
	select:not([multiple]) {
		-webkit-appearance: none;
		-moz-appearance: none;
		background: {
			image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
			position: right 50%;
			repeat: no-repeat;
		}
		padding-left: 0.5rem;
	}

	select[multiple],
	textarea {
		height: auto;
	}

	.sidebar {
		textarea,
		select,
		.input_text,
		.input_date,
		.input_time,
		.input_datetime {
			width: $sidebarWidth - 20;
		}

		.control-group {
			.control-label { display: block; float: none; width: auto; }
			.controls { margin-left: 0; width: $sidebarWidth - 20; }
		}

		.input-list {
			label { display: block; float: none; width: auto; }
		}
	}

	/* Campo mappa */
	.geo-localization-map { @include borderBox(); border: 1px solid #ccc; height: 300px; width: 100%; }

	/* Checklist per i permessi */
	fieldset.permits-checklist {
		border: 1px solid #ccc; margin: 10px; padding: 10px;

		h4 { border-bottom: 1px solid #E6E6E6; margin-bottom: 10px; padding-bottom: 2px; }
		label { display: block; line-height: 20px; }
		fieldset.permits-checklist { margin: 10px 0 0 0; }
	}
}

.pongho-form-basic {
	.control-group {
		.control-label {
			display: block;
			float: none;
			width: auto;
			border-bottom: 1px solid #ccc;
			padding-bottom: 2px;
			margin-bottom: 5px;
			font-weight: bold;
		}
		.controls {
			min-height: 24px; // (border-box, devo calcolare line-height + padding + border)
			line-height: 16px;
			margin-left: 0;
			padding: 0 0 $defaultPadding 0;
		}

		&.readonly {
			border-bottom: 0 none;
		}
	}

	textarea {
		width: 100%!important;
	}
}

@import 'scss/vendor/jquery-colorbox/colorbox';
@import 'scss/vendor/jquery-chosen/chosen.min';
@import 'scss/vendor/jquery-ui-lightness/jquery-ui.min';
@import 'scss/vendor/jquery-ui-timepicker/jquery-ui-timepicker-addon';
@import 'scss/vendor/jquery-ui-spectrum/spectrum';

/* Fix larghezza del TinyMCE */
.mce-tinymce.mce-container { @include borderBox(); }
.mce-fullscreen #pongho-admin-bar {
	display: none;
}

@import "scss/components/search-form";
