/**
 * main.scss - admin theme styles for ProcessWire
 *
 */

@import 'reset';
@import 'jquery-ui'; 
@import 'ui';
@import 'notifications';
@import 'form';
@import 'inputfields';
@import 'masthead';
@import 'wiretabs';
@import 'pagelist';
@import 'table';
@import 'pagination';


/***********************************************************************************************
 * GENERAL
 *
 */

*, *:before, *:after {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

body {
	background: $footer-bg; 
	font-size: 100%; 
	color: $text-color; 

	&.modal {
		background-color: $text-bg; 
	}
}
	body,
	.ui-dialog,
	.ui-button,
	button, 
	input,
	th, td, 
	select, 
	textarea {
		font-weight: $normal-weight; 
		font-family: $regular-font; 
	}

.pw-container, 
.container,
.ui-dialog {
	line-height: $base-line-height; 
	font-size: $base-font-size; 
}

.pw-container,
.container {
	position: relative; 
	width: 95%; 
	max-width: $container-max-width; 
	margin: 0 auto; 
}

a {
	color: $link-color; 

	&:hover {
		color: $link-hover-color; 
		background-color: $link-hover-bg; 
	}

	&.on {
		// on/active link color 
		background-color: $link-current-bg; 
		color: $link-current-color; 
	}

	&:active {
		color: $link-active-color;
		background-color: $link-active-bg; 
	}
}

strong {
	font-weight: bold; 
}

em {
	font-style: italic; 
}

code {
	font-family: Menlo, Monaco, 'Andale Mono', 'Lucida Console', 'Courier New', monospace;
	font-size: 14px; 
}

.pw-description, .description {
	color: $medium-text-color; 
	margin: 0.5em 0;
	@include word-wrap();
}

.pw-notes, .notes, 
.pw-detail, .detail {
	color: $medium-text-color; 
	font-size: 0.875em;
	line-height: 1.5em; 
}
.pw-notes, .notes {
	background: $notes-bg; 
	@include word-wrap();
}

.pw-description strong, .description strong,
.pw-notes strong .notes strong {
	color: $medium-text-color; 
	font-weight: $bold-weight; 
}

.pw-error, .error {
	background: $error-bg; 
	color: $error-color; 
	font-weight: $bold-weight; 
	font-size: 0.9166666em;	
}

.WireFatalError {
	background: $error-bg; 
	color: $reverse-text-color; 
	padding: 1em; 
	position: relative;
	z-index: 9999;
}

/***********************************************************************************************
 * CONTENT
 *
 */

#content {
	/* main content area */ 
	position: relative; 
	padding-bottom: 2em; 
	padding-top: 1px;
	z-index: 0; 
	background: $text-bg; 

	.pw-container, .container {
		min-height: 50px; 

		> form,
		> .ui-helper-clearfix > form {
			position: relative;
			top: -1px; 
		}
	}
}

.pw-content, .content {
	/* any content area that you want to inherit these general use styles */

	img {
		display: block;
	}

	.nav a.label {
		font-size: 1em; 
	}

	p,
	ul
	ol,
	table {
		margin: 1em 0;
	}


	h2 {
		margin: 1em 0;
		font-size: 1.4em; 
		line-height: 1.2em; 
		color: $medium-text-color; 

		a {
			text-decoration: underline;

			&:hover {
				color: $reverse-text-color; 
				background: $link-hover-color;
				text-decoration: none;
			}
		}
	}

	h3 {
		margin: 1em 0;
		font-size: 1.2em; 
	}

	h4 {
		margin: 1em 0 0.25em 0;
		font-weight: $bold-weight;
		font-size: 0.916666666666667em;
	}


	li {
		margin: 1em 0; 
		display: block;
		list-style: disc; 
	}

	ol li {
		display: list-item; 
		list-style-type: decimal;
		margin-left: 1em; 
	}


	/**
	 * Content navigation like when on the root page of "templates" or "access"
	 *
	 */
	dl {
		margin: 1em 0;
	}
		.pw-container > dl:first-child {
			margin-top: 0;
		}
		dt,
		dt {
			display: block;
			font-weight: $bold-weight; 
			padding-top: 0.75em; 
		}
		dt a {
			text-transform: none; 
			color: $alt-link-color; 
		}
		dt a:hover {
			color: $link-hover-color; 
		}
		dl dd {
			padding-bottom: 0.75em; 
			border-bottom: 1px solid $subtle-border; 
		}
}

/***********************************************************************************************
 * FOOTER
 *
 */

#footer {
	margin: 2em 0 2em 0; 
	font-size: $footer-font-size; 
	color: $footer-color;
	
	#userinfo {
		display: block;
		float: right;
	}
}

#footer, #debug {
	a {
		color: $footer-link-color;
	}
	a:hover {
		text-decoration: underline;
	}

	p {
		margin-top: 0;
	}

}

#debug {
	// margin-top: 2em; 

	.pw-container {
		width: 100%; 
	}

	p {
		margin: 1em 0; 
	}

	ol {
		margin: 1em 0; 
	}

	h3, h4 {
		font-weight: $bold-weight; 
	}

	table {
		width: 100%; 

		th {
			font-weight: $bold-weight;
		}

		td, th {
			vertical-align: top; 
			padding: 3px 5px; 	
			border-bottom: 1px dotted $light-text-color; 
			border-left: 1px dotted $light-text-color; 
			font-size: 12px; 
		}

	}

}

.pw-panel-content #debug {
	padding: 0.25em 0.75em 0.25em 0.25em; 
}

.pw-init #debug {
	display: none;
}

/***********************************************************************************************
 * MODAL
 *
 */

body.modal {

	.pw-container, .container {
		margin: 0; 
		width: 100%; 
		min-width: 300px; 
		max-width: 100%; 
		padding-left: 1em;
		padding-right: 1em; 
	}

	&:not(.hasWireTabs) { 
		#notices {
			margin: 1px 0 0.75em 0;
			a.notice-remove {
				display: none; 
			}
		}
	}

	.pw-content h2 {
		margin: 1em 0 0.5em 0;
		font-size: 1.3em; 
	}

	#footer,
	#masthead,
	#breadcrumbs, 
	#headline {
		display: none; 
	}

	&.hasWireTabs #breadcrumbs {
		display: block;
		padding: 0.5em 0 0 0;
		li {
			display: none; 

			&.title {
				/* display only title in modal mode */ 
				// display: block;
			}
		}
	}

	#submit_save_top {
		display: none; 
	}

}

body.modal-inline {
	#content {
		padding-bottom: 0;
	}
	.pw-container, .container {
		padding-left: 0;
		padding-right: 0;
	}
}


/***********************************************************************************************
 * MISC
 *
 */

body.id-3:not(.hasUrlSegments) #breadcrumbs ul li:not(:first-child):not(:last-child),
body.id-23 #breadcrumbs ul li:not(:first-child):not(:last-child),
body.id-8:not(.hasUrlSegments) #breadcrumbs ul li:not(:first-child):not(:last-child) {
	/* hide extraneous breadcrumbs when in admin root */
	display: none; 
}

body.id-23 #content form {
	margin-top: 1em; 
}

#content .pw-container > form,
#content .pw-container > .ui-helper-clearfix > form {
	/* for wiretabs and/or forms to line up with headline area */
	top: $form-top-margin-adjustment; 
}

body:not(.hasWireTabs) #headline .pw-container {
	min-height: 40px; 
}

.pw-content > .pw-container > #PageListContainer {
	margin-top: 0; 
}

.hasWireTabs .pw-content #fieldgroupContext {
	/* context selection in field editor */
	top: -2.25em;
	right: 0; 
	z-index: 102; 
}

#ModuleEditForm .AdminDataTable tr td:first-child {
	color: lighten($text-color, 50%);
}

#addLinksMenu {
	min-width: 150px; 
}

.InputfieldPageNameURL strong {
	// prevents a fuzzy bold from appearing
	font-weight: normal;
}

#tools-toggle {
	width: 43px; 
}

/* font-awesome default icon sizes */
.fa { font-size: 14px !important; }
.fa-lg { font-size: 22px !important; }
.fa-2x { font-size: 28px !important; }
.fa-3x { font-size: 42px !important; }
.fa-4x { font-size: 56px !important; }
.fa-5x { font-size: 70px !important; }

/***********************************************************************************************
 * MEDIA QUERIES
 *
 */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	#masthead {
		padding-top: 0;
	}

	#masthead #topnav {
		float: left; 
	}

	body #masthead #topnav a,
	body #content .WireTabs li a {
		padding-left: 0.75em;
		padding-right: 0.75em; 
	}

	#logo {
		display: none; 
	}

	#masthead,
	#headline, 
	#breadcrumbs, 
	#notices p, 
	body:not(.modal) #content,
	#footer {
		padding-right: 10px;
		padding-left: 10px; 
	}

	#fieldgroupContext {
		display: none; 
	}

	/**
	 * Disregard column width when at mobile size
	 *
	 */
	.Inputfield:not(.InputfieldSubmit):not(.InputfieldButton) {
		clear: both !important;
		width: 100% !important;
		margin-left: 0 !important;
		.InputfieldHeader,
		.InputfieldContent {
			margin-left: 0 !important;
		}
	}

	// no need to adjust column height when Inputfields are collapsed
	.Inputfield .maxColHeightSpacer {
		display: none;
	}
	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	#logo {
		display: block;
	}

	.pw-container, .container {
		width: 100%; 
	}
	#footer #userinfo {
		float: none;
	}
	#footer {
		text-align: center; 
	}	

	.AjaxUploadDropHere {
		display: none !important; 
	}
		

}