/* Commands Widget Styling */
.commands-wrapper {
    max-width: 600px; 
    padding: 20px;
    background-color: #282c34;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

.commands-wrapper h2 {
    text-align: center;
    color: #61dafb;
    margin-bottom: 25px;
}

.command-category-details {
    background-color: #3a3f47; /* Slightly lighter background for each category */
    border-radius: 6px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Ensures border-radius applies to content */
    
}


.command-category-summary {
    display: block;
    padding: 15px 20px;
    background-color: #4a5059; /* Darker background for the summary bar */
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: 1px solid #5a606a; /* Separator line */
    user-select: none; /* Prevent text selection */
    position: relative;
    
}

.command-category-summary::before {
    content: '▶'; /* Right-pointing triangle for closed state */
    position: absolute;
    left: 5px; /* Adjusted to give more space */
    transition: transform 0.3s ease-in-out;
}

.command-category-details[open] > .command-category-summary::before {
    content: '▼'; /* Down-pointing triangle for open state */
    transform: rotate(90deg);
    transition: transform 0.3s ease-in-out;
}

.commands-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Zwei Spalten */
    gap: 10px;
    width: 100%;
}

@media (max-width: 768px) {
    .commands-grid {
        grid-template-columns: 1fr; /* Auf einer Spalte für mobile Geräte */
    }
}

.command-card {
    background-color: #2f333a; /* Background for individual command cards */
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease-in-out;
    margin-right: 0;
}

.command-card:hover {
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.command-item {
    display: flex;
    flex-direction: column;
    
}

.command {
    font-family: 'Courier New', Courier, monospace;
    color: #bb86fc; /* Highlight color for commands */
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 1em;
}

.function {
    color: #cccccc;
    font-size: 0.9em;
    line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .commands-grid {
        grid-template-columns: 1fr; /* Stack commands on small screens */
    }

    .commands-wrapper {
        margin: 10px;
        padding: 15px;
    }
}


/* Dashboard Layout */
.dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding:80px;
}

.top-row {
    display: flex;
    gap: 20px;
}

.second-row {
    display: flex;
    gap: 20px;
}


.dashboard-card {
    flex: 1;
    padding: 20px;
    background: #2d2d2d;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
}

.twitch-player-card {
    min-width: 60%;
}

.game-stats-card {
    min-width: 25%;
    font-size: large; /* Adjusted to make it smaller */
}

@media (max-width: 768px) {
    .top-row {
        flex-direction: column;
    }
    .second-row {
        flex-direction: column;
    }
    
}

.dashboard-card h2 {
    color: #bb86fc;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

/* Adjustments for existing commands-wrapper to fit within a card */
.commands-card .commands-wrapper {
    margin: 0; /* Remove external margin as it's now inside a card */
    padding: 0; /* Remove external padding as it's now inside a card */
    background-color: transparent; /* Make background transparent to use card's background */
    box-shadow: none; /* Remove shadow as card has its own */
}

/* Assign grid areas to each card */
.twitch-player-card {
    grid-area: twitch-player;
}

.game-stats-card {
    grid-area: game-stats;
}

.commands-card {
    grid-area: commands;
    max-width: 600px; /* Set a max-width for the commands card */
    margin-left: 0;
    margin-right: 0; /* Allow auto margin on the right */
}


.youtube-card {
    margin-right:0;
    margin-left: 0;
    max-width: 320px;
    max-height: 300px ;
    display: inline-block;
    vertical-align: top;
}
.youtube-card img{
    align-self: center;

}
.discord-card {
    margin-right:0;
    margin-left: 0;
    max-width: 320px;
    max-height: 300px ;
    display: inline-block;
    vertical-align: top;
}
.discord-card img{
    align-self: center;
}

/* Responsive adjustments for dashboard */
@media (max-width: 768px) {
    .dashboard-container {
        grid-template-columns: 1fr; /* Stack cards on smaller screens */
        grid-template-areas:
            "twitch-player"
            "game-stats"
            "commands"; /* Stack all on small screens */
        padding: 15px;
        margin: 15px auto;
    }
    .youtube-card {
            
            margin-left: 0;
            margin-top: 20px;
    }
    .discord-card {
        margin-left: 0;
        margin-top: 20px;
    }
}