/*
 * Hypelands Theme - Extra Overrides
 * Theme by Hamzq (hamzq.dev)
 * LICENSE: MIT
 * 
 * This file contains MINIMAL overrides for Fomantic UI
 * to match the Hypelands dark theme.
 * Based on the mockup in Hypelands Website Mockup/
 */

/* ==================== GLOBAL BASE STYLES ==================== */
body {
    color: #c0d6e9;
}

/* ==================== SEGMENTS - Dark backgrounds ==================== */
.ui.segment {
    background: #141414 !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.1) !important;
}

/* Widget segments */
.ui.segment.widget,
.widget {
    background: #141414 !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.1) !important;
}

/* ==================== CARDS ==================== */
.ui.card {
    background: #141414 !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.ui.card > .content {
    background: transparent !important;
    border-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.card > .content > .header {
    color: #ffffff !important;
}

.ui.card > .content > .description {
    color: #c0d6e9 !important;
}

.ui.card > .content > .meta {
    color: #8a9fb3 !important;
}

/* ==================== MENUS ==================== */
.ui.menu:not(.hypelands-navbar) {
    background: #0a0a0a !important;
    border-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.menu .item:not(.hypelands-nav-link) {
    color: #c0d6e9 !important;
}

.ui.menu .item:hover:not(.hypelands-nav-link) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.ui.menu .active.item:not(.hypelands-nav-link) {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Tabular menu */
.ui.tabular.menu {
    border-bottom-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.tabular.menu .item {
    background: transparent !important;
    border-color: transparent !important;
    color: #8a9fb3 !important;
}

.ui.tabular.menu .active.item {
    background: #141414 !important;
    border-color: rgba(192, 214, 233, 0.1) !important;
    border-bottom-color: #141414 !important;
    color: #ffffff !important;
}

/* ==================== TABLES ==================== */
.ui.table {
    background: #141414 !important;
    color: #c0d6e9 !important;
    border-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.table thead th {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.table tbody td {
    border-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.table tbody tr:hover {
    background: rgba(1, 187, 255, 0.05) !important;
}

/* ==================== FORMS ==================== */
.ui.form .field > label {
    color: #c0d6e9 !important;
}

.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="url"],
.ui.form input[type="number"],
.ui.form input[type="date"],
.ui.form input[type="tel"],
.ui.form textarea,
.ui.form select,
.ui.input input,
textarea,
select {
    background: #0f0f0f !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.2) !important;
    border-radius: 6px !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.input input:focus,
textarea:focus {
    background: #0f0f0f !important;
    border-color: #01bbff !important;
    color: #c0d6e9 !important;
    box-shadow: 0 0 0 2px rgba(1, 187, 255, 0.2) !important;
}

.ui.form input::placeholder,
.ui.form textarea::placeholder,
textarea::placeholder {
    color: #6b7c8a !important;
}

/* ==================== DROPDOWN ==================== */
.ui.dropdown .menu {
    background: #141414 !important;
    border-color: rgba(192, 214, 233, 0.2) !important;
}

.ui.dropdown .menu > .item {
    color: #c0d6e9 !important;
    border-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.dropdown .menu > .item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.ui.selection.dropdown {
    background: #141414 !important;
    color: #c0d6e9 !important;
    border-color: rgba(192, 214, 233, 0.2) !important;
}

/* ==================== BUTTONS - SMALLER SIZE ==================== */
/* Default button - dark gradient like mockup */
.ui.button {
    background: linear-gradient(345deg, #090915, #14213a 99%) !important;
    color: #c0d6e9 !important;
    border: none !important;
    font-family: 'Penumbra Serif', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 8px 16px !important;
}

.ui.button:hover {
    background: linear-gradient(345deg, #10102a, #1f3055 99%) !important;
    color: #ffffff !important;
    filter: brightness(1.15);
}

/* Primary button - cyan gradient - NO full aqua on hover */
.ui.primary.button {
    background: linear-gradient(135deg, #01bbff, #0091ff) !important;
    color: #ffffff !important;
}

.ui.primary.button:hover {
    background: linear-gradient(135deg, #01bbff, #0091ff) !important;
    filter: brightness(1.15);
}

/* Teal button - for profile settings - same as primary */
.ui.teal.button {
    background: linear-gradient(135deg, #01bbff, #0091ff) !important;
    color: #ffffff !important;
}

.ui.teal.button:hover {
    background: linear-gradient(135deg, #01bbff, #0091ff) !important;
    filter: brightness(1.15);
}

/* Positive/Green button */
.ui.positive.button,
.ui.green.button {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: #ffffff !important;
}

.ui.positive.button:hover,
.ui.green.button:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    filter: brightness(1.15);
}

/* Negative/Red button */
.ui.negative.button,
.ui.red.button {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #ffffff !important;
}

/* Basic button */
.ui.basic.button {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.2) !important;
    box-shadow: none !important;
}

/* Tiny buttons */
.ui.tiny.button,
.ui.mini.button {
    padding: 6px 12px !important;
    font-size: 10px !important;
}

/* Icon buttons - consistent small size */
.ui.icon.button {
    padding: 8px !important;
}

.ui.tiny.icon.button {
    padding: 6px !important;
}

/* ==================== LABELS - Keep original colors ==================== */
/* Only style labels WITHOUT inline styles */
.ui.label:not([style*="background"]) {
    background: linear-gradient(345deg, #090915, #14213a 99%) !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.1) !important;
}

/* Labels WITH inline background colors - preserve their color, just ensure white text */
.ui.label[style*="background"] {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Semantic colored labels */
.ui.red.label { background: #db2828 !important; color: #ffffff !important; }
.ui.orange.label { background: #f2711c !important; color: #ffffff !important; }
.ui.yellow.label { background: #fbbd08 !important; color: #000000 !important; }
.ui.green.label { background: #21ba45 !important; color: #ffffff !important; }
.ui.teal.label { background: #00b5ad !important; color: #ffffff !important; }
.ui.blue.label { background: #2185d0 !important; color: #ffffff !important; }
.ui.purple.label { background: #a333c8 !important; color: #ffffff !important; }
.ui.pink.label { background: #e03997 !important; color: #ffffff !important; }

/* ==================== MESSAGES ==================== */
.ui.message {
    background: rgba(192, 214, 233, 0.1) !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.2) !important;
    box-shadow: none !important;
}

.ui.info.message {
    background: rgba(1, 187, 255, 0.1) !important;
    color: #01bbff !important;
    border: 1px solid rgba(1, 187, 255, 0.3) !important;
}

.ui.success.message,
.ui.positive.message {
    background: rgba(5, 150, 105, 0.15) !important;
    color: #10b981 !important;
    border: 1px solid rgba(5, 150, 105, 0.3) !important;
}

.ui.warning.message {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.ui.error.message,
.ui.negative.message {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
}

/* ==================== MODALS ==================== */
.ui.modal {
    background: #141414 !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.15) !important;
}

.ui.modal > .header {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(192, 214, 233, 0.1) !important;
}

.ui.modal > .content {
    background: #141414 !important;
    color: #c0d6e9 !important;
}

.ui.modal > .actions {
    background: #0f0f0f !important;
    border-top: 1px solid rgba(192, 214, 233, 0.1) !important;
}

.ui.dimmer {
    background: rgba(0, 0, 0, 0.85) !important;
}

/* ==================== POPUPS ==================== */
.ui.popup {
    background: #1a1a2e !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.15) !important;
}

.ui.popup::before {
    background: #1a1a2e !important;
    border-color: rgba(192, 214, 233, 0.15) !important;
}

/* User popup/popover darkmode */
#user-popup,
.user-popover {
    background: #141414 !important;
    color: #c0d6e9 !important;
    border: none !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5) !important;
}

#user-popup .header,
.user-popover .header {
    background: transparent !important;
}

#user-popup .description,
.user-popover .description,
#user-popup .meta,
.user-popover .meta {
    color: #8a9fb3 !important;
}

#user-popup .ui.header,
.user-popover .ui.header {
    color: #ffffff !important;
}

/* Fix user popup outline/border */
.ui.popup#user-popup,
.ui.popup.user-popover {
    border: none !important;
    outline: none !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6) !important;
}

.ui.popup#user-popup::before,
.ui.popup.user-popover::before {
    background: #141414 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==================== LISTS ==================== */
.ui.list .item .content {
    color: #c0d6e9 !important;
}

.ui.list .item .header {
    color: #ffffff !important;
}

.ui.list .item .description {
    color: #8a9fb3 !important;
}

.ui.divided.list > .item {
    border-color: rgba(192, 214, 233, 0.1) !important;
}

/* ==================== BREADCRUMB ==================== */
.ui.breadcrumb {
    color: #8a9fb3 !important;
}

.ui.breadcrumb a {
    color: #01bbff !important;
}

.ui.breadcrumb .divider {
    color: #8a9fb3 !important;
}

/* ==================== COMMENTS ==================== */
.ui.comments .comment .content .text {
    color: #c0d6e9 !important;
}

.ui.comments .comment .metadata {
    color: #6b7c8a !important;
}

.ui.comments .comment .actions a {
    color: #8a9fb3 !important;
}

.ui.comments .comment .actions a:hover {
    color: #01bbff !important;
}

/* ==================== HEADERS ==================== */
.ui.header {
    color: #ffffff !important;
}

.ui.header .sub.header {
    color: #8a9fb3 !important;
}

/* ==================== PROFILE PAGE ==================== */
/* Profile header - allow banner image to show through */
#profile-header {
    background-color: transparent !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    min-height: 200px !important;
}

/* Dark overlay on profile banner for text readability */
#profile-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    pointer-events: none !important;
}

/* Ensure content is above overlay */
#profile-header > * {
    position: relative !important;
    z-index: 1 !important;
}

#profile-header .ui.header {
    color: #ffffff !important;
}

#profile-header .ui.header .sub.header {
    color: #c0d6e9 !important;
}

/* Profile action buttons - MUST be on right side */
#profile-header .actions {
    position: absolute !important;
    right: 1rem !important;
    left: auto !important;
    top: 1rem !important;
    display: flex;
    gap: 6px;
    z-index: 10 !important;
}

/* Profile labels - keep their colors */
#profile-header .ui.label[style*="background"] {
    color: #ffffff !important;
}

/* Profile feed segment */
#profile .ui.segment,
#profile-feed {
    background: #141414 !important;
}

/* ==================== FORUM STYLES ==================== */
.forum-category .header {
    color: #01bbff !important;
}

/* ==================== EDITOR (TinyMCE) ==================== */
.tox,
.tox-tinymce,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-edit-area,
.tox .tox-statusbar {
    background: #141414 !important;
    border-color: rgba(192, 214, 233, 0.1) !important;
}

.tox .tox-tbtn {
    color: #c0d6e9 !important;
}

.tox .tox-tbtn:hover {
    background: rgba(1, 187, 255, 0.1) !important;
}

/* ==================== FOOTER LINKS - MUST BE GRAY ==================== */
/* Footer links: GRAY by default, CYAN only on hover */
/* This matches the mockup exactly */
.hypelands-footer-links a,
.footer-links a,
#footer a:not(.footer-store-btn):not(.footer-social):not(.hypelands-footer-social),
.footer-section a:not(.footer-store-btn):not(.footer-social) {
    color: #8a9fb3 !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.hypelands-footer-links a:hover,
.footer-links a:hover,
#footer a:not(.footer-store-btn):not(.footer-social):not(.hypelands-footer-social):hover,
.footer-section a:not(.footer-store-btn):not(.footer-social):hover {
    color: #01bbff !important;
    padding-left: 5px;
}

/* Footer about text - gray */
.footer-about,
.hypelands-footer-about,
.footer-section p,
#footer p {
    color: #8a9fb3 !important;
}

/* ==================== SOCIAL ICONS ==================== */
/* Social icons have gradient background, light icon color */
.footer-social,
.hypelands-footer-social {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    color: #c0d6e9 !important;
    background: linear-gradient(345deg, #090915, #14213a 99%) !important;
    border-radius: 50% !important;
    transition: color 0.2s ease, filter 0.2s ease, transform 0.2s ease !important;
}

.footer-social:hover,
.hypelands-footer-social:hover {
    color: #ffffff !important;
    filter: brightness(1.2) !important;
    transform: translateY(-3px) !important;
}

.footer-social svg,
.hypelands-footer-social svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

/* ==================== DISCORD CTA SECTION ==================== */
/* Member counts - Discord purple, NOT cyan */
.member-count,
.hypelands-member-count,
.discord-member-count {
    color: #5865F2 !important;
    font-weight: 600 !important;
}

/* Discord button - PURPLE background, WHITE text (from mockup) */
.discord-btn,
.hypelands-discord-btn {
    background: #5865F2 !important;
    color: #ffffff !important;
    padding: 14px 40px !important;
    border-radius: 6px !important;
    font-family: 'Penumbra Serif', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.discord-btn:hover,
.hypelands-discord-btn:hover {
    background: #4752C4 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(88, 101, 242, 0.4) !important;
}

/* ==================== ACCOUNT DROPDOWN ==================== */
/* Dropdown items - gray/light text, NO CYAN anywhere */
.hypelands-dropdown-content a,
.dropdown-content a {
    color: #c0d6e9 !important;
    border-left: none !important;
}

.hypelands-dropdown-content a:hover,
.dropdown-content a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-left: none !important;
}

.hypelands-dropdown-content a i,
.dropdown-content a i {
    color: #c0d6e9 !important;
}

/* ==================== COOKIES POPUP/PAGE ==================== */
#cookie-consent-bar,
.cookie-consent,
.cookie-banner,
.cc-window {
    background: linear-gradient(345deg, #090915, #14213a 99%) !important;
    color: #c0d6e9 !important;
    border: 1px solid rgba(192, 214, 233, 0.15) !important;
}

#cookie-consent-bar button,
.cookie-consent button,
.cc-btn {
    background: linear-gradient(135deg, #01bbff, #0091ff) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Cookies page */
#cookies {
    background: #141414 !important;
    color: #c0d6e9 !important;
}

#cookies .ui.blue.button {
    background: linear-gradient(135deg, #01bbff, #0091ff) !important;
    color: #ffffff !important;
}

/* ==================== LOADER ==================== */
.ui.loader::before {
    border-color: rgba(192, 214, 233, 0.2) !important;
}

.ui.loader::after {
    border-color: #01bbff transparent transparent !important;
}

/* ==================== STEPS ==================== */
.ui.steps,
.ui.steps .step {
    background: #141414 !important;
    border-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.steps .step .title {
    color: #ffffff !important;
}

.ui.steps .step .description {
    color: #8a9fb3 !important;
}

.ui.steps .active.step {
    background: rgba(1, 187, 255, 0.1) !important;
}

.ui.steps .active.step .title {
    color: #01bbff !important;
}

/* ==================== ACCORDION ==================== */
.ui.accordion .title {
    color: #c0d6e9 !important;
}

.ui.styled.accordion {
    background: #141414 !important;
    border: 1px solid rgba(192, 214, 233, 0.1) !important;
}

.ui.styled.accordion .title {
    border-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.accordion .active.title {
    color: #01bbff !important;
}

/* ==================== STATISTIC ==================== */
.ui.statistic .value {
    color: #ffffff !important;
}

.ui.statistic .label {
    color: #8a9fb3 !important;
}

/* ==================== DIVIDER ==================== */
.ui.divider {
    border-color: rgba(192, 214, 233, 0.1) !important;
}

.ui.divider:not(.vertical):not(.horizontal)::before,
.ui.divider:not(.vertical):not(.horizontal)::after {
    background: rgba(192, 214, 233, 0.1) !important;
}

/* ==================== PLACEHOLDER ==================== */
.ui.placeholder {
    background: #1a1a1a !important;
}

.ui.placeholder .line,
.ui.placeholder .image {
    background: rgba(192, 214, 233, 0.1) !important;
}