/*
==============================================================
ROOT (PALETTE HSL)
==============================================================
*/
:root {
	--main: hsl(222, 25%, 41%);
	--main-dark: hsl(222, 25%, 20%);
	--main-darker: hsl(222, 25%, 12%);
	--main-light: hsl(222, 20%, 85%);
	--main-lighter: hsl(222, 20%, 95%);
	--main-bg: hsl(222, 15%, 92%);

	--text: hsl(222, 10%, 25%);
	--text-light: hsl(222, 10%, 45%);
	--white: #fff;

	--border: hsl(222, 20%, 80%);

	--icon-bg: hsl(222, 20%, 80%);
	--icon-color: hsl(222, 25%, 20%);
	--icon-unread: hsl(222, 60%, 50%);
	--icon-unread-glow: hsla(222, 70%, 50%, 0.6);

	--pulse: hsla(222, 70%, 50%, 0.6);
	--pulse-strong: hsla(222, 70%, 50%, 0.9);
}

/*
==============================================================
GLOBAL
==============================================================
*/
html, body {
	background: var(--main-bg);
	color: var(--text);
}

a { color: var(--main); }
a:hover { color: var(--main-dark); }

/*
==============================================================
CONTAINER
==============================================================
*/
.wrap {
	background: var(--main-lighter);
	border: 2px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 0 6px var(--border);
}

/*
==============================================================
HEADER
==============================================================
*/
.headerbar {
	background: linear-gradient(
		to bottom,
		var(--main-darker),
		var(--main)
	);
	border-top: 3px solid var(--main-darker);
	border-bottom: 3px solid var(--main-dark);
}

/*
==============================================================
FORUM BLOCKS (IMPORTANT)
==============================================================
*/
.forabg, .forumbg {
	background: linear-gradient(
		135deg,
		hsl(222, 25%, 14%),
		hsl(222, 25%, 22%),
		hsl(222, 25%, 30%),
		hsl(222, 25%, 38%)
	);
	border: 1px solid var(--main-dark);
	border-radius: 6px;
	box-shadow: inset 0 1px 0 hsla(222, 30%, 60%, 0.2);
}

li.header dt, li.header dd {
	color: var(--main-light);
}

/*
==============================================================
NAVBAR
==============================================================
*/
.navbar { background: var(--main-light) }

/*
==============================================================
ROWS / LISTES
==============================================================
*/
.bg1, .bg2 {
	background: var(--main-lighter);
	border: 1px solid var(--border);
}

.bg3, .bg4 { background: var(--main-light) }

li.row {
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--white);
	transition: background 0.2s ease;
}

li.row:hover { background: hsl(222, 25%, 85%) }

/*
==============================================================
PANELS
==============================================================
*/
.panel {
	background: var(--main-lighter);
	border: 1px solid var(--border);
}

/*
==============================================================
TEXT / CONTENT
==============================================================
*/
.postbody, .content { color: var(--text) }

/*
==============================================================
BUTTONS
==============================================================
*/
.button {
	background: linear-gradient(
		to bottom,
		var(--white),
		var(--main-light)
	);
	border: 1px solid var(--border);
	color: var(--text);
}

.button:hover {
	background: linear-gradient(
		to bottom,
		var(--main-light),
		var(--white)
	);
	color: var(--main-dark);
}

/*
==============================================================
FORM ELEMENTS (ION SLATE INTEGRATION)
==============================================================
*/

/* Submit / Reset buttons */
.panel input.button1,
.panel input.button2 {
	background: linear-gradient(
		var(--white),
		var(--main-light)
	);
	border: 1px solid var(--border);
	border-radius: 5px;
	font-size: 11px;
	color: var(--text);
	cursor: pointer;
	transition: background .2s, box-shadow .2s, border-color .2s;
}

.panel input.button1:hover,
.panel input.button2:hover {
	background: linear-gradient(
		var(--white),
		hsl(222, 20%, 80%)
	);
	border-color: var(--main);
	box-shadow: 0 2px 6px hsla(222, 20%, 20%, 0.25);
}

.panel input.button1:active,
.panel input.button2:active {
	background: var(--main-light);
	border-color: var(--main-dark);
	box-shadow: inset 0 2px 3px hsla(222, 20%, 10%, 0.3);
}

/* Select dropdowns */
.panel select {
	font-size: 11px;
	line-height: 0.95;
	padding: 2px 4px;
	border-radius: 4px;
	border: 1px solid var(--border);

	background-image: linear-gradient(
		to bottom,
		var(--white),
		var(--main-light)
	);

	color: var(--text);
}

.panel select:hover {
	background-image: none;
	background-color: var(--white);
	border-color: var(--main);
}

/*
==============================================================
INPUTS
==============================================================
*/
.inputbox {
	background: var(--main-lighter);
	border: 1px solid var(--border);
	color: var(--text);
}

.inputbox:focus { border-color: var(--main) }

/*
==============================================================
PAGINATION
==============================================================
*/
.pagination li.active span {
	background: var(--main);
	color: var(--white);
}

.pagination li a:hover {
	background: var(--main);
	color: var(--white);
}

/*
==============================================================
DROPDOWN
==============================================================
*/
.dropdown .dropdown-contents { background: var(--main-lighter) }

.dropdown-extended ul li:hover { background: var(--main-light) }

/*
==============================================================
ICONS (FORUM / TOPIC)
==============================================================
*/
dl.row-item { background-image: none }
dl.row-item dt[style*="background-image"] { position: relative }

.lastpost a { position: relative }

.forums .row-item:before,
.topics .row-item:before,
.pmlist .row-item:before {
	font-family: FontAwesome;
	position: absolute;
	left: 5px;
	top: 50%;
	margin-top: -15px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: 50%;
	color: var(--icon-color);
	background: var(--icon-bg);
	transition: 0.2s;
}

.row-item:hover:before { background: var(--main-light) }

/*
==============================================================
ICON TYPES
==============================================================
*/

.contact-icon						{ background-image: url("./images/icons_contact.png"); }

/* Profile & navigation icons */
/* Set the icons */							/* Megaphone */
.global_read:before							{content: "\f0a1";}
.global_read_mine:before					{content: "\f0a1";}
.global_read_locked:before					{content: "\f0a1";}
.global_read_locked_mine:before				{content: "\f0a1";}
.global_unread:before						{content: "\f0a1";}
.global_unread_mine:before					{content: "\f0a1";}
.global_unread_locked:before				{content: "\f0a1";}
.global_unread_locked_mine:before			{content: "\f0a1";}
											/* Megaphone */
.announce_read:before						{content: "\f0a1";}
.announce_read_mine:before					{content: "\f0a1";}
.announce_read_locked:before				{content: "\f0a1";}
.announce_read_locked_mine:before			{content: "\f0a1";}
.announce_unread:before						{content: "\f0a1";}
.announce_unread_mine:before				{content: "\f0a1";}
.announce_unread_locked:before				{content: "\f0a1";}
.announce_unread_locked_mine:before			{content: "\f0a1";}
											/* External link */
.forum_link:before							{content: "\f08e";}
											/* Speech Bubble */
.forum_read:before							{content: "\f03a";}
.forum_read_subforum:before					{content: "\f03a";}
.forum_unread:before						{content: "\f03a";}
.forum_unread_subforum:before				{content: "\f03a";}
											/* Pin */
.sticky_read:before							{content: "\f08d";}
.sticky_read_mine:before					{content: "\f08d";}
.sticky_read_locked:before					{content: "\f08d";}
.sticky_read_locked_mine:before				{content: "\f08d";}
.sticky_unread:before						{content: "\f08d";}
.sticky_unread_mine:before					{content: "\f08d";}
.sticky_unread_locked:before				{content: "\f08d";}
.sticky_unread_locked_mine:before			{content: "\f08d";}
											/* Right arrow */
.topic_moved:before							{content: "\f061";}
											/* Envelope */
.pm_read:before 							{content: "\f0e0";}
.pm_unread:before 							{content: "\f0e0";}
											/* Speech Bubble */
.topic_read:before							{content: "\f075";}
.topic_read_mine:before						{content: "\f075";}
.topic_read_hot:before						{content: "\f075";}
.topic_read_hot_mine:before					{content: "\f075";}
.topic_unread:before						{content: "\f075";}
.topic_unread_mine:before					{content: "\f075";}
.topic_unread_hot:before					{content: "\f075";}
.topic_unread_hot_mine:before				{content: "\f075";}
											/* Padlock */
.forum_read_locked:before					{content: "\f023";}
.forum_unread_locked:before					{content: "\f023";}
.topic_read_locked:before					{content: "\f023";}
.topic_read_locked_mine:before				{content: "\f023";}
.topic_unread_locked:before					{content: "\f023";}
.topic_unread_locked_mine:before			{content: "\f023";}

/*
==============================================================
UNREAD (PULSE BLEU)
==============================================================
*/
/* Unread States (ION SLATE) */
.global_unread:before,
.global_unread_mine:before,
.global_unread_locked:before,
.global_unread_locked_mine:before,
.announce_unread:before,
.announce_unread_mine:before,
.announce_unread_locked:before,
.announce_unread_locked_mine:before,
.forum_unread:before,
.forum_unread_locked:before,
.forum_unread_subforum:before,
.sticky_unread:before,
.sticky_unread_mine:before,
.sticky_unread_locked:before,
.sticky_unread_locked_mine:before,
.pm_unread:before,
.topic_unread:before,
.topic_unread_mine:before,
.topic_unread_hot:before,
.topic_unread_hot_mine:before,
.topic_unread_locked:before,
.topic_unread_locked_mine:before {
	animation: UnreadPulse 1.4s infinite;
	color: var(--white);
	background: var(--icon-unread);
}

/* Pulse bleu cohérent */
@keyframes UnreadPulse {
	0% {
		box-shadow: 0 0 0 0 var(--pulse-strong);
	}
	70% {
		box-shadow: 0 0 0 8px transparent;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

/*
==============================================================
ONLINE STATUS
==============================================================
*/
.online { position: relative }

.online:after {
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	width: 10px;
	height: 10px;
	background: hsl(140, 60%, 45%);
	border: 2px solid var(--main-lighter);
	border-radius: 50%;
	box-shadow: 0 0 4px hsla(140, 60%, 45%, 0.6);
}

.online:after { animation: onlinePulse 2s infinite }

@keyframes onlinePulse {
	0% { box-shadow: 0 0 0 0 hsla(140, 60%, 45%, 0.6); }
	70% { box-shadow: 0 0 0 5px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/*
==============================================================
BLOCKQUOTE / CODE
==============================================================
*/
blockquote {
	background: var(--main-lighter);
	border: 1px solid var(--border);
}

.codebox {
	background: var(--white);
	border: 1px solid var(--border);
}

/*
==============================================================
FOOTER
==============================================================
*/
.copyright { color: var(--text-light) }

/*
==============================================================
ERROR / ALERT
==============================================================
*/
.error {
	background: var(--main-dark);
	color: var(--white);
}