/* =============================================
   DARK MODE - Hylex Stats
   Theme controlled via html[data-theme="dark"]
   Toggle: Auto / Claro / Escuro
   ============================================= */

/* ── Theme Toggle ── */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 2px;
    margin-left: 10px;
}
.theme-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Palanquin Dark', sans-serif;
    font-size: 12px;
    font-weight: 400;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    white-space: nowrap;
    touch-action: manipulation;
}
.theme-btn:hover {
    color: #ffffff;
}
.theme-btn-active {
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-weight: 600;
}

/* ── Dark theme toggle on dark background ── */
html[data-theme="dark"] .theme-toggle {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ── Global ── */
html[data-theme="dark"] body {
    background-color: #2d2e33 !important;
    color: #fcfcfc !important;
}

html[data-theme="dark"] a {
    color: #fcfcfc;
}

/* ── Header / Navbar ── */
html[data-theme="dark"] .header-class {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .search-form-class {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: #3a3b41 !important;
}

html[data-theme="dark"] .dropdown-menu li a:hover {
    background-color: #4a4b52 !important;
}

/* ── Home page cards & containers ── */
html[data-theme="dark"] .top-reset-remain-time-container,
html[data-theme="dark"] .search-for-player-container {
    background: #3a3b41 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .top-reset-remain-time-time-text {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .search-for-player-label-class {
    background-color: #4a4b52 !important;
}

html[data-theme="dark"] .search-for-player-label-class input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] .search-for-player-label-class input[type=text] {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .search-for-player-label-class svg path {
    fill: #a0a0a0 !important;
}

/* ── Leaderboard selector bar ── */
html[data-theme="dark"] .casual-minigame-selector-modes,
html[data-theme="dark"] .ranked-minigame-selector-modes {
    background-color: #3a3b41 !important;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .casual-minigame-selector-mode,
html[data-theme="dark"] .ranked-minigame-selector-mode {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .casual-minigame-selector-mode-container a,
html[data-theme="dark"] .ranked-minigame-selector-mode-container a {
    color: #fcfcfc !important;
}

/* ── Filter buttons ── */
html[data-theme="dark"] .casual-minigame-filter-by-category-button,
html[data-theme="dark"] .ranked-minigame-filter-by-category-button {
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .cmgbcb-selected {
    border-bottom-color: #fcfcfc !important;
    color: #fcfcfc !important;
}

html[data-theme="dark"] .casual-minigame-filter-by-mode-button,
html[data-theme="dark"] .ranked-minigame-filter-by-mode-button {
    background-color: #3a3b41 !important;
    color: #fcfcfc !important;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .casual-minigame-filter-by-mode-item-duo,
html[data-theme="dark"] .ranked-minigame-filter-by-mode-item-duo {
    background-color: #4a4b52 !important;
}

html[data-theme="dark"] .casual-minigame-filter-by-mode-button-duo,
html[data-theme="dark"] .ranked-minigame-filter-by-mode-button-duo {
    background-color: #4a4b52 !important;
    color: #e1e1e1 !important;
}

/* ── Dropdown (Lifetime/Semanal) ── */
html[data-theme="dark"] .dropdown-content {
    background-color: #3a3b41 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .dropdown-content .dropdown-option {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .dropdown-content .dropdown-option:hover {
    background: #17ceff !important;
    color: #ffffff !important;
}

/* ── Dropdown mode menu ── */
html[data-theme="dark"] .dropdown-menu-mode {
    background-color: #3a3b41 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .dropdown-menu-mode li {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .dropdown-menu-mode li:hover {
    background: #17ceff !important;
    color: #ffffff !important;
}

/* ── Leaderboard table ── */
html[data-theme="dark"] .casual-leaderboard-header,
html[data-theme="dark"] .ranked-leaderboard-header {
    background-color: #3a3b41 !important;
    color: #fcfcfc !important;
    border-bottom-color: rgba(100, 100, 100, 0.5) !important;
}

html[data-theme="dark"] .casual-leaderboard-content-container,
html[data-theme="dark"] .ranked-leaderboard-content-container {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .casual-leaderboard-content-item-container,
html[data-theme="dark"] .ranked-leaderboard-content-item-container {
    background-color: #333439 !important;
    border-bottom-color: rgba(100, 100, 100, 0.3) !important;
}

html[data-theme="dark"] .casual-leaderboard-content-item-container:nth-child(even),
html[data-theme="dark"] .ranked-leaderboard-content-item-container:nth-child(even) {
    background-color: #3a3b42 !important;
}

html[data-theme="dark"] .casual-leaderboard-content-item-container:hover,
html[data-theme="dark"] .ranked-leaderboard-content-item-container:hover {
    background-color: #3f4350 !important;
}

html[data-theme="dark"] .casual-leaderboard-content-player-item-href,
html[data-theme="dark"] .ranked-leaderboard-content-player-item-href {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .casual-leaderboard-content-player-item-href:hover,
html[data-theme="dark"] .ranked-leaderboard-content-player-item-href:hover {
    color: #8a8aff !important;
}

/* ── Pagination ── */
html[data-theme="dark"] .pagination-btn,
html[data-theme="dark"] .pagination-arrow {
    background-color: #3a3b41 !important;
    color: #b0b0b0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .pagination-btn:hover,
html[data-theme="dark"] .pagination-arrow:hover {
    background-color: #2a4a6b !important;
    color: #17ceff !important;
    box-shadow: 0 2px 6px rgba(108, 201, 202, 0.2) !important;
}

html[data-theme="dark"] .pagination-active,
html[data-theme="dark"] .pagination-active:hover {
    background-color: #11a2ad !important;
    color: #1a1a2e !important;
    box-shadow: 0 2px 8px rgba(108, 201, 202, 0.35) !important;
}

html[data-theme="dark"] .pagination-ellipsis {
    color: #5a5a6a !important;
}

html[data-theme="dark"] .pagination-disabled {
    opacity: 0.3 !important;
}

html[data-theme="dark"] .casual-leaderboard-utils-last-update-text,
html[data-theme="dark"] .casual-leaderboard-utils-last-update-date,
html[data-theme="dark"] .ranked-leaderboard-utils-last-update-text,
html[data-theme="dark"] .ranked-leaderboard-utils-last-update-date {
    color: #b0b0b0 !important;
}

/* ── Leaderboard title ── */
html[data-theme="dark"] .casual-title-page-text,
html[data-theme="dark"] .ranked-title-page-text {
    color: #17ceff !important;
}

/* ── Selected mode/filter accent ── */
html[data-theme="dark"] .cmsm-selected {
    background-color: #11a2ad !important;
}

html[data-theme="dark"] .cmfbmbd-selected {
    background-color: #11a2ad !important;
}

/* ── Profile page ── */
html[data-theme="dark"] .mode-progression-item {
    background: rgba(255, 255, 255, 0.08);
    color: #c8c8c8;
}

html[data-theme="dark"] .personalstats-card-content-title {
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .personalstats-card-content-value {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .personalstats-card-content-more-info-item-nobutton {
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .personalstats-card-content-more-info-item-nobutton:hover {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .personalstats-card-content-more-info-item-container {
    border-top-color: rgba(100, 100, 100, 0.5) !important;
}

html[data-theme="dark"] .modal-content {
    background-color: #3a3b41 !important;
    color: #fcfcfc !important;
}

html[data-theme="dark"] .modal-datails-subtitle-p {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .modal-datails-period-nobtn {
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .modal-datails-period-nobtn-selected {
    color: #fcfcfc !important;
    border-bottom-color: #fcfcfc !important;
}

html[data-theme="dark"] .close-button,
html[data-theme="dark"] .close-button-details {
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .close-button:hover,
html[data-theme="dark"] .close-button-details:hover {
    color: #ffffff !important;
}

html[data-theme="dark"] .close-button:hover svg path,
html[data-theme="dark"] .close-button-details:hover svg path {
    fill: #ffffff !important;
}

html[data-theme="dark"] .copy-link-input {
    background-color: #4a4b52 !important;
    color: #fcfcfc !important;
}

html[data-theme="dark"] .copy-link-input[type=text] {
    color: #fcfcfc !important;
}

/* ── Profile stats containers ── */
html[data-theme="dark"] .profile-stats-card,
html[data-theme="dark"] .personalstats-card {
    background-color: #3a3b41 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .personalstats-card-details {
    background-color: #3a3b41 !important;
    border-bottom-color: rgba(100, 100, 100, 0.3) !important;
}

html[data-theme="dark"] .personalstats-card-content-container {
    background-color: #3a3b41 !important;
}

html[data-theme="dark"] .personalstats-card-content-item {
    background-color: #3a3b41 !important;
}

html[data-theme="dark"] .personalstats-card-content-container:not(.personalstats-card-content-container-geral) .personalstats-card-content-item:nth-child(even) {
    background-color: #414248 !important;
}
html[data-theme="dark"] .personalstats-card-content-container-geral .personalstats-card-content-item:nth-child(4n+3),
html[data-theme="dark"] .personalstats-card-content-container-geral .personalstats-card-content-item:nth-child(4n+4) {
    background-color: #414248 !important;
}

html[data-theme="dark"] .personalstats-card-content-item:hover {
    background-color: #464b58 !important;
}

html[data-theme="dark"] .personalstats-card-subtitle {
    color: #b0b0b0 !important;
}

/* ── Profile accent colors ── */
html[data-theme="dark"] .personalstats-title {
    color: #17ceff !important;
}

html[data-theme="dark"] .shareProfileModal-title {
    color: #17ceff !important;
}

html[data-theme="dark"] .copy-link-button {
    background-color: #17ceff !important;
}

html[data-theme="dark"] .modal-datails-title-h1 {
    color: #17ceff !important;
}

html[data-theme="dark"] .personalstats-card-title-details {
    color: #17ceff !important;
}

html[data-theme="dark"] .personalstats-cards-container-details {
    scrollbar-color: #4a4b52 transparent !important;
}

html[data-theme="dark"] .personalstats-cards-container-details::-webkit-scrollbar-thumb {
    background-color: #4a4b52 !important;
}

html[data-theme="dark"] .personalstats-cards-container-details::-webkit-scrollbar-thumb:hover {
    background-color: #55565e !important;
}

html[data-theme="dark"] .personalstats-cards-container-details::-webkit-scrollbar-track {
    background: transparent !important;
}

html[data-theme="dark"] .cards-row,
html[data-theme="dark"] .cards-row-details {
    color: #fcfcfc !important;
}

/* ── Calculos / Wiki page ── */
html[data-theme="dark"] .wiki-title-container h1 {
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .wiki-description-container {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .start-topic {
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .topic-text {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .wiki-title-topic {
    color: #fcfcfc !important;
    border-left-color: #fcfcfc !important;
}

html[data-theme="dark"] .wiki-container p {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .wiki-title-topic-area {
    color: #e0e0e0 !important;
    border-bottom-color: #4a4b52 !important;
}

html[data-theme="dark"] .wiki-container ul li {
    color: #fcfcfc !important;
}

/* ── Terms / Privacy page ── */
html[data-theme="dark"] .terms-container {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .terms-container h2 {
    color: #17ceff !important;
}

html[data-theme="dark"] .terms-container h3 {
    color: #17ceff !important;
}

html[data-theme="dark"] .terms-title-container h1 {
    color: #17ceff !important;
}

html[data-theme="dark"] .terms-container a {
    color: #17ceff !important;
}

html[data-theme="dark"] .invite-button-container button {
    background-color: #17ceff !important;
}

html[data-theme="dark"] .terms-container p,
html[data-theme="dark"] .terms-container ul,
html[data-theme="dark"] .terms-container li {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .last-update-container h3 {
    color: #b0b0b0 !important;
}

/* ── Login page ── */
html[data-theme="dark"] .login-container {
    background-color: #3a3b41 !important;
}

html[data-theme="dark"] .container-login-title {
    color: #17ceff !important;
}

html[data-theme="dark"] .input-nickname:focus {
    border-color: #17ceff !important;
}

html[data-theme="dark"] .input-nickname:focus + .input-nickname-label {
    color: #17ceff !important;
}

/* ── 404 / Error / Not found pages ── */
html[data-theme="dark"] .error-container,
html[data-theme="dark"] .notfound-container,
html[data-theme="dark"] .privatefound-container {
    color: #fcfcfc !important;
}

html[data-theme="dark"] .error-container h1,
html[data-theme="dark"] .notfound-container h1,
html[data-theme="dark"] .privatefound-container h1 {
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .error-container p,
html[data-theme="dark"] .notfound-container p,
html[data-theme="dark"] .privatefound-container p {
    color: #fcfcfc !important;
}

/* ── Footer ── */
html[data-theme="dark"] .wave-svg-container svg path {
    fill: #1a1a1a !important;
}

html[data-theme="dark"] .footer-bg-container {
    background-color: #1a1a1a !important;
}

html[data-theme="dark"] .footer-legal-info-credits-text {
    color: #fcfcfc !important;
}

/* ── Home page accent colors ── */
html[data-theme="dark"] .top-reset-remain-time-title {
    color: #17ceff !important;
}

html[data-theme="dark"] .search-for-player-text {
    color: #17ceff !important;
}

html[data-theme="dark"] .container-ranked-leaderboard-title {
    color: #17ceff !important;
}

html[data-theme="dark"] .container-casual-leaderboard-title {
    color: #17ceff !important;
}

/* ── Loading page ── */
html[data-theme="dark"] .loading-container .shareProfileModal-title {
    color: #17ceff !important;
}

/* ── Generic overrides ── */
html[data-theme="dark"] .disabled {
    color: #e1e1e1 !important;
}

html[data-theme="dark"] .coming-soon {
    color: #e1e1e1 !important;
}

/* ── Scrollbar ── */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #2d2e33;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4a4b52;
    border-radius: 4px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #55565e;
}

/* ── Responsive: hide theme toggle text on very small screens ── */
@media (max-width: 767px) {
    .theme-toggle {
        margin-left: 6px;
    }
    .theme-btn {
        font-size: 11px;
        padding: 3px 7px;
    }
}