/* custom.css */

/* Sicherstellen, dass die Navbar komplett weiß ist */
.navbar.bg-white {
    background-color: #ffffff !important;
}

/* Roter Trenner unter der Navbar */
.navbar.border-bottom.border-danger {
    border-bottom: 2px solid #dc3545; /* Bootstrap 'danger' Farbe */
}

/* From Uiverse.io by Galahhad */
.theme-switch {
    --toggle-size: 18px;
    --container-width: 4em;
    --container-height: 1.8em;
    --container-radius: 6.25em;
    --container-light-bg: #3D7EAE;
    --container-night-bg: #1D1F2C;
    --circle-container-diameter: 2.5em;
    --sun-moon-diameter: 1.6em;
    --sun-bg: #ECCA2F;
    --moon-bg: #C4C9D1;
    --spot-color: #959DB1;
    --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
    --stars-color: #fff;
    --clouds-color: #F3FDFF;
    --back-clouds-color: #AACADF;
    --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
    --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0.5rem !important;
}
  
.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: var(--toggle-size);
}
  
.theme-switch__container {
    width: var(--container-width);
    height: var(--container-height);
    background-color: var(--container-light-bg);
    border-radius: var(--container-radius);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
    transition: var(--transition);
    position: relative;
}
  
.theme-switch__container::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
    border-radius: var(--container-radius);
}
  
.theme-switch__checkbox {
    display: none;
}
  
.theme-switch__circle-container {
    width: var(--circle-container-diameter);
    height: var(--circle-container-diameter);
    background-color: rgba(255, 255, 255, 0.1);
    position: absolute;
    left: var(--circle-container-offset);
    top: var(--circle-container-offset);
    border-radius: var(--container-radius);
    box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
    display: flex;
    transition: var(--circle-transition);
    pointer-events: none;
}
  
.theme-switch__sun-moon-container {
    pointer-events: auto;
    position: relative;
    z-index: 2;
    width: var(--sun-moon-diameter);
    height: var(--sun-moon-diameter);
    margin: auto;
    border-radius: var(--container-radius);
    background-color: var(--sun-bg);
    box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
    filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
    overflow: hidden;
    transition: var(--transition);
}
  
.theme-switch__moon {
    transform: translateX(100%);
    width: 100%;
    height: 100%;
    background-color: var(--moon-bg);
    border-radius: inherit;
    box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
    transition: var(--transition);
    position: relative;
}
  
.theme-switch__spot {
    position: absolute;
    top: 0.75em;
    left: 0.312em;
    width: 0.75em;
    height: 0.75em;
    border-radius: var(--container-radius);
    background-color: var(--spot-color);
    box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}
  
.theme-switch__spot:nth-of-type(2) {
    width: 0.375em;
    height: 0.375em;
    top: 0.937em;
    left: 1.375em;
}
  
.theme-switch__spot:nth-last-of-type(3) {
    width: 0.25em;
    height: 0.25em;
    top: 0.312em;
    left: 0.812em;
}
  
.theme-switch__clouds {
    width: 1.25em;
    height: 1.25em;
    background-color: var(--clouds-color);
    border-radius: var(--container-radius);
    position: absolute;
    bottom: -0.625em;
    left: 0.312em;
    box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0 var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
    transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}
  
.theme-switch__stars-container {
    position: absolute;
    color: var(--stars-color);
    top: -100%;
    left: 0.312em;
    width: 2.75em;
    transition: var(--transition);
}
  
/* Aktionen beim Umschalten */
.theme-switch__checkbox:checked + .theme-switch__container {
    background-color: var(--container-night-bg);
}
  
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
  
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}
  
.theme-switch__circle-container:hover {
    left: calc(var(--circle-container-offset) + 0.187em);
}
  
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
    transform: translate(0);
}
  
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
    bottom: -4.062em;
}
  
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
    top: 50%;
    transform: translateY(-50%);
}
  
/* Dark Mode Styles */
[data-theme="dark"] {
    --background-color: #121212;
    --card-background: #1f2937;
    --border-color: #374151;
    --text-color: #ffffff;
    --hover-color: #374151;
    --secondary-color: #e5e7eb;
    --post-background: #1f2937;
    --post-text-color: #ffffff;
    --message-background: #1f2937;
    --upvote-box-background: #2d3748;
    --upvote-count-color: #ffffff;
    --msg-post-background: #4a2511;

    .navbar {
        background-color: var(--card-background) !important;
        border-color: var(--border-color) !important;
    }

    .nav-link {
        color: var(--text-color) !important;
    }

    .dropdown-menu {
        background-color: var(--card-background) !important;
        border-color: var(--border-color) !important;
    }

    .modal-content {
        background-color: var(--card-background) !important;
        border-color: var(--border-color) !important;
    }

    .list-group-item {
        background-color: var(--card-background) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    .btn-outline-primary {
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    .text-muted {
        color: var(--secondary-color) !important;
    }

    /* Upvote Box Styles - Updated */
    .vote-container {
        background-color: var(--upvote-box-background) !important;
        border: 1px solid var(--border-color) !important;
    }

    .vote-count {
        color: var(--upvote-count-color) !important;
    }

    .upvote-btn i, .downvote-btn i {
        color: var(--text-color) !important;
    }

    /* Message Styles - Updated */
    .message {
        background-color: var(--message-background) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-color) !important;
    }

    .message-content {
        color: var(--text-color) !important;
    }

    .message-bubble {
        background-color: var(--upvote-box-background) !important;
        color: var(--text-color) !important;
    }

    /* Additional Dark Mode Styles */
    .card {
        background-color: var(--card-background) !important;
        border-color: var(--border-color) !important;
    }

    .post {
        background-color: var(--post-background) !important;
        border-color: var(--border-color) !important;
    }

    .post *, .card *, .modal * {
        color: var(--text-color) !important;
    }

    .post .text-muted, .card .text-muted, .modal .text-muted {
        color: var(--secondary-color) !important;
    }

    input, textarea {
        background-color: var(--card-background) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    /* Ensure vote buttons remain visible and colored correctly */
    .upvote-btn.active {
        color: #4CAF50 !important;
    }

    .downvote-btn.active {
        color: #f44336 !important;
    }

    /* Fix any remaining light backgrounds */
    .bg-white {
        background-color: var(--card-background) !important;
    }

    .bg-light {
        background-color: var(--card-background) !important;
    }

    /* Vote Buttons Fix */
    .vote-buttons {
        background-color: var(--upvote-box-background) !important;
        border-color: var(--border-color) !important;
    }

    .vote-buttons.d-flex.align-items-center {
        background-color: var(--upvote-box-background) !important;
    }

    /* Ensure vote counts are visible */
    .vote-buttons span {
        color: var(--text-color) !important;
    }

    /* Make sure vote icons are visible */
    .vote-buttons i {
        color: var(--text-color) !important;
    }

    .vote-buttons .upvote-btn.active i {
        color: #4CAF50 !important;
    }

    .vote-buttons .downvote-btn.active i {
        color: #f44336 !important;
    }

    /* Message Post Styles */
    .post-card.msg {
        background-color: var(--msg-post-background) !important;
        border-color: #5d331c !important;
    }

    .post-card.msg * {
        color: var(--text-color) !important;
    }

    .post-card.msg .text-muted {
        color: #fbd38d !important; /* Helleres Orange für ausgegrauten Text */
    }

    /* Blog Styles */
    .page-header {
        background-color: var(--card-background) !important;
        color: var(--text-color) !important;
    }

    .page-header h1, 
    .page-header h2, 
    .page-header h3, 
    .page-header p {
        color: var(--text-color) !important;
    }

    .blog-content {
        background-color: var(--card-background) !important;
        color: var(--text-color) !important;
    }

    .blog-content * {
        color: var(--text-color) !important;
    }

    .blog-content .text-muted {
        color: var(--secondary-color) !important;
    }

    /* Kollegium Page Styles */
    .search-container {
        background-color: var(--card-background) !important;
        border-color: var(--border-color) !important;
    }

    .search-container input {
        background-color: var(--upvote-box-background) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    .stat-card {
        background-color: var(--card-background) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

    .stat-card * {
        color: var(--text-color) !important;
    }

    .contact-list {
        background-color: var(--card-background) !important;
        border-color: var(--border-color) !important;
    }

    .contact-list * {
        color: var(--text-color) !important;
    }

    .contact-list .text-muted {
        color: var(--secondary-color) !important;
    }

    /* Additional container fixes */
    .container-fluid {
        background-color: var(--background-color) !important;
    }

    .container {
        background-color: var(--background-color) !important;
    }

    /* Ensure all cards and containers follow dark theme */
    .card, .container, .container-fluid {
        background-color: var(--card-background) !important;
    }

    /* Announcement Styles */
    .post-card.announcement {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }

    .post-card.announcement .post-header {
        background: #dc3545 !important;
        color: white !important;
    }

    .post-card.announcement .post-content {
        background: #1f2937 !important;
        color: #fff !important;
    }

    .post-card.announcement .post-content * {
        color: #fff !important;
    }

    .post-card.announcement .announcement-badge {
        background: #dc3545 !important;
        color: white !important;
    }

    .post-card.announcement .text-muted {
        color: #9CA3AF !important;
    }
}