/* Algemene styling */
body {
    background-color: #f8f9fa;
}

/* Hover-effecten voor de navigatiebalk */
.navbar-nav .nav-link {
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #dc3545;
}

/* Tabel styling */
.table {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table th {
    background-color: #343a40;
    color: #fff;
    text-align: center;
}

.table td {
    text-align: center;
}

/* Knoppen styling */
.btn-primary {
    background-color: #007bff;
    border: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Footer styling */
footer {
    background-color: #343a40;
    color: #adb5bd;
}

footer p {
    margin: 0;
}

/* Default (light theme) */
body {
    background-color: #f8f9fa;
    color: #212529;
}

.navbar-light {
    background-color: #ffffff !important;
    color: #212529;
}

.navbar-dark {
    background-color: #343a40 !important;
    color: #ffffff;
}

/* Dark theme */
.bg-dark {
    background-color: #212529 !important;
    color: #ffffff !important;
}

.text-light {
    color: #ffffff !important;
}

.text-dark {
    color: #212529 !important;
}

/* Zorg dat de body minimaal de hoogte van het scherm vult */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* De main content groeit om lege ruimte in te vullen */
main {
    flex-grow: 1;
}

/* Styling voor de footer */
footer {
    background-color: #343a40;
    color: #adb5bd;
    text-align: center;
    padding: 1rem 0;
}

.device-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.device-card {
    background: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.device-card h5 {
    margin: 0;
    color: #333;
}

.device-card p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

.status-offline {
    color: red;
    font-weight: bold;
}

.device-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    text-transform: uppercase;
}

.btn-success {
    background-color: #28a745;
    color: white;
    border: none;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
    border: none;
}

/* Drag-and-drop styles */
#drop-area {
    color: #212529; /* Default text color */
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Combineer transitions */
}

/* Stijl wanneer bestanden worden gesleept */
#drop-area.dragging {
    background-color: rgba(0, 255, 0, 0.3); /* Lichtgroene achtergrond */
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.7); /* Groene gloed */
}

body.bg-dark #drop-area {
    color: #f8f9fa; /* White text for dark mode */
    background-color: #343a40 !important;
}

.file-card p {
    color: #212529; /* Default text color */
}

body.bg-dark .file-card p {
    color: #f8f9fa; /* White text for dark mode */
}

/* Styling voor bestandsnamen */
.file-card p {
    color: #212529; /* Default text color */
}

body.bg-dark .file-card p {
    color: #adb5bd; /* Lichtgrijs voor Dark Mode */
}

.devices-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.device-card {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    width: 250px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.group-container, .device-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.group-card, .device-card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    background: #fff;
    width: 100%;
    max-width: 300px;
}

.group-card {
    padding: 20px;
    margin-bottom: 20px; /* Voeg extra ruimte toe onder elke kaart */
    background: #f0f8ff; /* Zorgt voor lichte blauwe achtergrond */
    border: 1px solid #007bff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.device-card {
    border: 1px solid #ccc;
}

.group-header {
    font-size: 18px;
    font-weight: bold;
    color: #0056b3;
    margin-bottom: 10px;
}

.device-header {
    font-size: 16px;
    font-weight: bold;
}

/* Groene knop voor 'Start Group' */
.start-group-btn {
    background-color: #28a745;
    color: white;
    border: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.start-group-btn:hover {
    background-color: #218838;
    transform: scale(1.05);
}

/* Groene knop voor 'Change Campaign' */
.change-campaign-btn {
    background-color: #28a745;
    color: white;
    border: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.change-campaign-btn:hover {
    background-color: #218838;
    transform: scale(1.05);
}

.popover {
    max-width: 200px; /* Verminder de maximale breedte */
    padding: 10px; /* Pas de padding binnen de popover aan */
}

.popover-header {
    font-size: 14px; /* Verklein de titel */
    padding: 5px 10px; /* Pas de padding van de header aan */
}

.popover-body {
    font-size: 13px; /* Verklein de tekst */
    padding: 5px 10px; /* Pas de padding van de body aan */
}

/* Maak de popover-knoppen kleiner */
.popover-button {
    font-size: 12px;
    padding: 2px 5px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.btn-success {
    padding: 0.375rem 0.75rem; /* Standaard Bootstrap padding */
    font-size: 0.6rem;          /* Zorg dat de fontgrootte overeenkomt */
    line-height: 1.5;         /* Houd consistente lijnhoogte */
    border-radius: 0.25rem;   /* Standaard Bootstrap afronding */
}

.btn-danger {
    padding: 0.375rem 0.75rem;
    font-size: 0.6rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

.btn-play {
    background-color: #28a745;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
    width: 30px; /* Maak het vierkant */
    height: 30px; /* Maak het vierkant */
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-play i {
    font-size: 1.5rem;
    color: white;
}

/* Stijl voor online apparaat (groen) */
.bi-check-circle-fill {
    color: #28a745 !important;
}

/* Stijl voor offline apparaat (rood) */
.bi-x-circle-fill {
    color: #dc3545 !important;
}

.card.shadow-custom {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card.shadow-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card.device-card {
    width: 75%; /* Maak de kaarten 25% kleiner */
    padding: 0.75rem;
    margin: auto;
}

.card.device-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.card.device-card.online {
    background-color: #d4edda; /* Groenachtige achtergrond voor online */
    border-color: #28a745;    /* Groene rand voor online */
}

.card.device-card.offline {
    background-color: #f8d7da; /* Roodachtige achtergrond voor offline */
    border-color: #dc3545;    /* Rode rand voor offline */
}

.restart-device-btn {
    /* Zorg dat de knop wat compacter is */
    padding: 0.2rem 0.3rem;
    font-size: 0.75rem;
}

.restart-device-btn {
    padding: 0.2rem 0.3rem;
    font-size: 0.75rem;
}

.restart-device-btn i {
    font-size: 1rem;
    /* Zet een expliciete kleur zodat het icoon goed zichtbaar is */
    color: #dc3545; /* bijvoorbeeld rood, of kies een andere kleur */
}

/* Algemene knopstijl voor de drie actieknoppen */
.btn-square {
    width: 50px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Huidige hover-stijl voor alle knoppen (grijs) */
.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}

/* Specifieke hover-stijl voor de restart-knop (ROOD) */
.restart-script-btn:hover {
    background-color: #dc3545 !important;  /* Rood */
    color: white !important;
    border-color: #dc3545 !important;
    transform: scale(1.05);
}

.button-text {
    font-size: 0.4rem;
    text-transform: uppercase;
    display: block;
    margin-top: 2px; /* Zorgt ervoor dat de tekst netjes onder het icoon staat */
    margin-left: 2px;
    font-weight: bold;
}

/* Nieuwe styling specifiek voor device cards op de dashboardpagina */
.dashboard-device-card {
    position: relative;
    width: 100%;
    max-width: 300px; /* Maximale breedte zodat het niet te groot wordt */
    aspect-ratio: 16 / 9; /* Zorgt voor een breedbeeldformaat zoals een scherm */
    border-radius: 12px;
    overflow: hidden;
    background-color: #f8f9fa;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 
    transition: transform 0.2s ease-in-out;
    display: flex;
    align-items: flex-end; /* Zorgt dat de tekst altijd onderaan blijft */
    justify-content: center;
}

.dashboard-device-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Semi-transparante overlay voor de apparaatnaam */
.dashboard-device-card .device-header {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 8px;
}

/* Status label (Online/Offline) */
.dashboard-device-card .device-status {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.8);
}

.dashboard-device-card .device-status.online {
    color: #28a745;
}

.dashboard-device-card .device-status.offline {
    color: #dc3545;
}

/* Pas de afbeelding aan om beter te werken als achtergrond */
.dashboard-device-card {
    background-size: cover;
    background-position: center;
}

/* Stijl voor de kaartcontainer */
#map {
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.settings-menu {
    position: absolute;
    top: 2.5rem;
    right: 0.5rem;
    background-color: white;
    border: 1px solid #ddd;
    padding: 0.5rem;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 0.25rem;
}

.file-card {
    padding: 0.5rem !important;
    margin: 0.25rem !important;
    font-size: 0.75rem;
    width: 80px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.file-card i.bi-folder {
    font-size: 28px !important; /* kleiner dan de huidige 36px */
}

.file-card p {
    margin: 0.3rem 0 0 0;
    font-size: 0.65rem;
    max-width: 70px;
    word-break: break-word;
}

.file-card .btn-danger i.bi-trash {
    font-size: 0.8rem;   /* Iets kleiner */
}

.file-card .btn-danger {
    width: 15px;
    height: 15px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-card .btn-danger i.bi-trash {
    font-size: 12px !important; /* kleiner wit icoon */
    line-height: 1;             /* voorkomt dat het ‘hoog’ oogt */
}

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 per rij */
    gap: 10px;
}

.campaign-grid .file-card {
    margin: 0 !important;
    width: 100%; /* laat het netjes in de grid passen */
}

@media (max-width: 768px) {
    .campaign-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .campaign-grid {
        grid-template-columns: 1fr;
    }
}

.planner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 per rij */
    gap: 10px;
}

.planner-grid .file-card {
    margin: 0 !important;
    width: 100%;
}

@media (max-width: 768px) {
    .planner-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .planner-grid {
        grid-template-columns: 1fr;
    }
}

.device-card-wrapper {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.subscription-bar-inside {
    transform: rotate(180deg);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 20px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: white;
    font-size: 0.65rem;
    font-weight: regular;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 1;
    pointer-events: none; /* voorkomt dat het kliks blokkeert */
}

.subscription-green {
    background-color: #198754;
}

.subscription-orange {
    background-color: #fd7e14;
}

.subscription-red {
    background-color: #dc3545;
}

.subscription-grey {
    background-color: #adb5bd;
}

/* Zorg dat de device-card zelf de rest van de ruimte vult */
.device-card {
    flex-grow: 1;
    min-width: 0; /* voorkomt overflows */
}

.device-card {
    padding: 20px 20px 20px 48px; /* top, right, bottom, left */    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: #e9e9e9;
    position: relative;
    width: 100%;
    max-width: 300px;
}

.device-card-wrapper .device-card {
    padding: 20px 20px 20px 48px !important;
}

.device-card-header {
    background-color: #343a40; /* Donkergrijs */
    color: white;
    padding: 0.5rem 1rem;
    margin: -20px -20px 20px -48px; /* boven, rechts, onder, links */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.device-card-header .device-name {
    padding-left: 12px; /* schuif naar rechts zodat hij niet onder de subscription bar valt */
}