/*-
 * ╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲
 * MetricsHub Agent
 * ჻჻჻჻჻჻
 * Copyright 2023 - 2025 MetricsHub
 * ჻჻჻჻჻჻
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 * ╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱╲╱
 */

/* Poppins font */
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-ExtraBold.woff2') format('woff2'),
		url('../fonts/Poppins-ExtraBold.woff') format('woff'),
		url('../fonts/Poppins-ExtraBold.ttf') format('truetype'),
		local('Helvetica');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
		url('../fonts/Poppins-Bold.woff') format('woff'),
		url('../fonts/Poppins-Bold.ttf') format('truetype'),
		local('Helvetica');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
		url('../fonts/Poppins-Regular.woff') format('woff'),
		url('../fonts/Poppins-Regular.ttf') format('truetype'),
		local('Helvetica');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* MetricsHub fonts */
:root {
	--title-font: "Poppins", sans-serif;
	--heading-font: "Poppins", sans-serif;
	--content-font: "Poppins", sans-serif;

	--content-font-size: medium;
	--banner-font-size: 40px;
	--banner-font-weight: 800;

}

 /* MetricsHub colors */
body {
	--main-fgcolor: #212529;
	--banner-bgcolor: #266fd0;
	--link-color: #266fd0;
	--alternate-bgcolor: #266fd0;
	--alternate-fgcolor: #fff;
}

body.dark {
	--link-color: #7cb6ff;
	--main-bgcolor: #262626;
	--main-fgcolor: #e9ecef;
}

body.metricshub.dark .platform-tile {
    background: #333;
    color: #ffffff;
    box-shadow: none;
}

body.metricshub.dark .platform-tile:hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

body.metricshub.dark .platform-tile .platform-title {
    color: #fff;
}

/* Special PrismJS colors for <code> element containing JSON */
body.metricshub code[class*=language-js] {
	color: #606060;
}
body.metricshub.dark code[class*=language-js] {
	color: #d9d9d9;
}

body.metricshub code[class*=language-js] .token.punctuation {
	color: #0046a4;
}
body.metricshub.dark code[class*=language-js] .token.punctuation {
	color: #1bdbf3
}

.metricshub code[class*=language-js] .token.operator {
	color: #00660b;
}
.metricshub.dark code[class*=language-js] .token.operator {
	color: #5ffc6f;
}
.metricshub code[class*=language-js] .token.string {
	color: #a40627;
}
.metricshub.dark code[class*=language-js] .token.string {
	color: #ff9e9e;
}

.metricshub code[class*=language-js]::selection,
.metricshub code[class*=language-js] ::selection
{
	text-shadow: none;
	background: var(--banner-bgcolor);
	color: var(--banner-fgcolor);
}

.metricshub .metricshub-tag a {
	color: white;
	text-decoration: none;
	font-size: small;
}

.metricshub .platform-tile-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 10px;
    width: 100%;
}

.metricshub .platform-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: rgb(230 230 230);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.metricshub .platform-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.metricshub .platform-tile .platform-title {
    font-size: 18px;
    color: #333;
    text-align: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metricshub .platform-tile .platform-title .connectors-badge {
    margin-top: 0px;
    padding-left: 10px;
    padding-bottom: 5px;
}

.metricshub .platform-tile .platform-icon {
    width: 140px;
    height: 140px;
    background-size: cover;
    background-position: center;
    margin-bottom: 15px;
}

.metricshub .platform-tile .platform-labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

.metricshub .platform-tile .badge,
.metricshub .platform-tile .label {
    font-size: 10px;
    padding: 5px 10px;
    text-align: center;
    white-space: nowrap;
}

.metricshub .platform-tile div:last-child {
    margin-top: auto;
}

@media (max-width: 1200px) and (min-width: 993px) {
    .metricshub .platform-tile-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) and (min-width: 769px) {
    .metricshub .platform-tile-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .metricshub .platform-tile-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .metricshub .platform-tile {
        padding: 40px;
    }
}