/*
    Theme Name:  Vestia
    Author:      Kristan Kenney (@kristankenney)
    Website:     www.hellohost.io
*/

@import url("../media_queries");

:root {
	--animate-duration: 0s;
	--font-family: "Arial", system-ui;

	/* Colors */
	--color-text-link: #444;
	--color-text-link-hover: #ff791f;

	/* Alerts */
	--alert-box-shadow: none;
	--alert-text-shadow: none;

	/* Top Bar */
	--top-bar-background: #5d5d5d;
	--top-bar-box-shadow: none;
}

h1 {
	font-weight: 600;
}

/* Top bar
   ========================================================================== */

.top-bar-notifications-panel {
	@media (--viewport-small) {
		box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
		border-color: #ccc;
		border-bottom-left-radius: 2px;
		border-bottom-right-radius: 2px;
	}
}

.top-bar-notification-item {
	&.unseen .top-bar-notification-title {
		color: #111;
	}
}

.top-bar-notification-delete {
	& .fas {
		color: #ff6701;
	}
}

.top-bar-menu-panel {
	background-color: #5d5d5d;
}

.top-bar-menu-link {
	&:hover,
	&:active {
		color: #fff;
		background: #f79b44;
		box-shadow: none;
		text-shadow: none;
		transition: none;
	}

	&.active {
		color: #ff6701;
		background: #fff;
	}
}

/* Main menu
   ========================================================================== */

.main-menu-item-link {
	&:hover {
		& .main-menu-item-label {
			color: #ff791f;
		}
	}

	&.active {
		& .main-menu-item-label {
			color: #ff791f;
		}
	}

	& .fas {
		display: none;
	}

	@media (--viewport-medium) {
		text-align: left;

		&:hover {
			border-bottom-color: #ff791f;
		}

		&.active {
			border-bottom-color: #ff791f;
		}
	}
}

.main-menu-item-label {
	font-size: 0.9rem;
}

/* Toolbar
   ========================================================================== */

.toolbar {
	& .form-control {
		&:hover {
			border-right-color: #e95e00;
		}

		&:focus {
			border-right-color: #e95e00;
		}
	}
}

.toolbar-sorting-menu {
	box-shadow: none;
	border-color: #ccc;
	background-color: #fff;

	& span {
		&:hover {
			color: #ff6701;
			background: none;
		}

		&.active {
			background: none;
			font-weight: bold;
			color: #ff6701;
		}
	}
}

.toolbar-input-submit {
	background-color: #cacaca;
	border-radius: 0;
	color: #fff;
	text-shadow: 0 1px 2px rgb(0 0 0 / 35%);

	&:hover {
		color: #777;
		background-color: #cacaca;
		text-shadow: 0 1px 2px rgb(255 255 255 / 45%);
	}

	&:active {
		text-shadow: none;
		color: #a9cc06;
	}
}

.toolbar-buttons {
	& .button {
		border-color: transparent;
		color: #fff;
		text-transform: uppercase;
		text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
		background: #a0c105;

		&:hover {
			border-color: transparent;
			color: #fff;
			background: #a9cc06;
			text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
		}
	}

	& .button-danger:hover {
		color: #f4301a;
		text-shadow: none;
	}

	& .button-back {
		color: #326b9b;
		background: none;
		text-shadow: none;
		text-transform: none;
		font-size: 0.9rem;
		border: none;

		&:hover {
			color: #367ac1;
			background: none;
			text-shadow: none;
			text-transform: none;
		}

		&:active {
			color: #ff6701;
			background: none;
			text-shadow: none;
			text-transform: none;
		}
	}
}

/* Units table
   ========================================================================== */

.units-table-row {
	@media (--viewport-large) {
		&:hover {
			box-shadow: none;
		}
	}
}

.units-table-cell {
	& a:hover {
		color: #ff6701;
	}
}

.units-table-badge {
	@media (--viewport-large) {
		border-color: #eaeaea;
		box-shadow: none;
		border-radius: 4px;
	}
}

/* Statistics
   ========================================================================== */

.stats-item {
	@media (--viewport-large) {
		&:hover {
			box-shadow: none;
		}
	}
}

/* Buttons
   ========================================================================== */

.button {
	border-color: transparent;
	color: #fff;
	text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
	text-transform: uppercase;
	font-weight: 600;
	padding-top: 6px;
	padding-bottom: 6px;
	background: #a0c105;
	border-radius: 2px;
	box-shadow: none;

	&:hover {
		border-color: transparent;
		color: #fff;
		background: #a9cc06;
		text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
		transition: none;
		box-shadow: none;
	}

	&:active {
		border-color: transparent;
		color: #fff;
		background: #809c00;
		text-shadow: 0 0 2px rgb(0 0 0 / 20%);
		box-shadow: none;
	}

	& .fas {
		display: none;
	}
}

.button-secondary {
	color: var(--color-text-link);
	text-shadow: none;
	text-transform: none;
	border-color: #bbb;
	background: #fff;

	&:hover {
		color: #326b9b;
		text-shadow: none;
		border-color: #bbb;
		background: #f5f5f5;
	}

	&:active {
		color: #326b9b;
		text-shadow: none;
		border-color: #aaa;
		background: #f5f5f5;
	}
}

.button-danger:hover {
	color: #f4301a;
	text-shadow: none;
}

.button-floating {
	& .fas {
		display: block;
	}
}

/* Modals
   ========================================================================== */

.modal {
	box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
}

.modal-title {
	color: #111;
}

.modal-message {
	color: #333;
}

/* Forms
   ========================================================================== */

.form-control,
.form-select {
	box-shadow: none;
	border-radius: 0;

	&:hover {
		border-color: #e95e00;
	}
}

.form-control:focus {
	border-color: #ff6701;
	background-color: #fff4ed;
	color: #333;
}

.form-select:focus {
	border-color: #ff6701;
	color: #333;
}

.password-meter {
	margin-left: 0;
	margin-right: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Shortcuts panel
   ========================================================================== */

.shortcuts {
	border-color: #111;
	border-radius: 2px;
	box-shadow: 0 3px 12px rgb(0 0 0 / 80%);
}

.shortcuts-title,
.shortcuts .key {
	color: #b5da0b;
}

/* Panel component
   ========================================================================== */

.panel {
	box-shadow: none;
	border-radius: 0;
}

/* Box collapse component
   ========================================================================== */

.box-collapse-header {
	background: #fafafa;
	box-shadow: none;
	color: #444;

	&:hover {
		color: #ff791f;
	}

	& .fas {
		display: none;
	}
}

/* Tabs component
   ========================================================================== */

.tabs {
	border-radius: 0;
	box-shadow: none;
}

.tabs-item {
	color: #777;

	&:hover,
	&[aria-selected="true"] {
		color: #ff6701;
	}

	&:active {
		color: #e95e00;
	}
}

/* Login
   ========================================================================== */

.page-login,
.page-reset {
	background: #ededed;
}

.login {
	& .form-label {
		color: #4b4b4b;
	}

	@media (--viewport-small) {
		background-color: rgb(255 255 255 / 100%);
		box-shadow:
			0 2px 5px rgb(0 0 0 / 30%),
			inset 0 0 2px rgb(255 255 255);
		border-radius: 0;
	}
}

.login-title {
	color: #4b4b4b;
}

.login-form-link {
	color: #326b9b;
}