@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&display=swap');

:root {
    --gta-pink: #ff007f;
    --gta-blue: #00f0ff;
    --gta-purple: #9d00ff;
    --bg-dark: #0f0f1f;
    --text-main: #ffffff;
    --glass-bg: rgba(20, 20, 35, 0.85);
}

body {
    background-color: var(--bg-dark) !important;
    background-image: url('gta6_bg.png') !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--text-main) !important;
}

/* Header Tendance */
.ui.large.header.tendance font {
    color: var(--gta-pink) !important;
    text-shadow: 0 0 15px rgba(255, 0, 127, 0.6);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ui.large.header.tendance .icon {
    color: var(--gta-blue) !important;
}

/* Table Design */
.ui.table.servers {
    border: none !important;
    background: var(--glass-bg) !important;
    color: white !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Table Headers */
.ui.table thead th {
    background-color: rgba(30, 30, 50, 0.9) !important;
    color: var(--gta-blue) !important;
    border-bottom: 2px solid var(--gta-pink) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Rows */
.ui.table tbody tr {
    background: transparent !important;
    transition: all 0.3s ease;
}

.ui.table tbody tr:hover {
    background: rgba(255, 0, 127, 0.05) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Gold/Silver/Bronze Special */
.gold-tr td {
    border-top: 1px solid rgba(255, 215, 0, 0.3);
}

.gold-tr {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.05), transparent) !important;
}

.iron-tr td {
    border-top: 1px solid rgba(192, 192, 192, 0.3);
}

.iron-tr {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.05), transparent) !important;
}

.bronze-tr td {
    border-top: 1px solid rgba(205, 127, 50, 0.3);
}

.bronze-tr {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.05), transparent) !important;
}

/* Buttons */
.ui.button {
    font-family: 'Outfit', sans-serif !important;
    border-radius: 50px !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.ui.basic.blue.button {
    color: var(--gta-blue) !important;
    box-shadow: 0 0 0 2px var(--gta-blue) inset !important;
}

.ui.basic.blue.button:hover {
    background: var(--gta-blue) !important;
    color: #000 !important;
    box-shadow: 0 0 15px var(--gta-blue) !important;
}

/* Green Status */
.ui.basic.green.button {
    color: #00ff88 !important;
    box-shadow: 0 0 0 2px #00ff88 inset !important;
}

/* Server Name Links */
h3.server-name a {
    color: white !important;
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px black;
}

h3.server-name a:hover {
    color: var(--gta-pink) !important;
    text-shadow: 0 0 10px var(--gta-pink);
}

/* Tags/Labels */
.ui.label {
    background-color: rgba(0, 240, 255, 0.1) !important;
    color: var(--gta-blue) !important;
    border: 1px solid var(--gta-blue);
}

.ui.label.crack,
.ui.label[style*="rgb(0,141,201)"] {
    background-color: rgba(157, 0, 255, 0.1) !important;
    color: var(--gta-purple) !important;
    border: 1px solid var(--gta-purple) !important;
}

/* Search Bar */
.ui.action.input input {
    background: #2a2a40 !important;
    color: white !important;
    border: 1px solid #444 !important;
}

.ui.action.input .ui.button {
    background: var(--gta-pink) !important;
    color: white !important;
}

/* Footer / Pagination */
.ui.pagination.menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ui.pagination.menu .item {
    background: rgba(255, 255, 255, 0.05) !important;
    color: white !important;
}

.ui.pagination.menu .active.item {
    background: var(--gta-pink) !important;
    color: white !important;
}

/* Sidebar / Menu */
.ui.inverted.menu.sidebar {
    background: #111 !important;
}

.ui.inverted.menu .item {
    color: #ccc !important;
}

.ui.inverted.menu .active.item {
    color: var(--gta-pink) !important;
    border-color: var(--gta-pink) !important;
}