/* ✅ Zorg ervoor dat de content niet achter de header valt */
.main-content {
    margin-top: 140px; /* Moet gelijk zijn aan de hoogte van .main-header */
}


/* ✅ Verwijder afgeronde hoeken van de thead */
thead {
    background-color: black; /* Donkerder blauw voor meer contrast */
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}

/* ✅ Pas border-radius alleen toe op de onderste hoeken van de tabel */
table {
    width: 100%;
    border-collapse: separate; /* ✅ BELANGRIJK: Zorgt ervoor dat border-radius werkt */
    border-spacing: 0; /* Zorgt ervoor dat er geen ruimte tussen de cellen zit */
    background-color: #ffffff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 8px 8px; /* ✅ Alleen onderaan afgeronde hoeken */
    overflow: hidden;
    border-top: 2px solid white; /* ✅ Witte lijn tussen header en tabel */
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 14px;
    color: black; /* Witte tekst voor een moderne look */
}



/* ✅ Specifiek de eerste rijhoeken aanpassen */
thead tr:first-child th:first-child {
    border-top-left-radius: 0 !important; /* Geen afgeronde linkerhoek */
}

thead tr:first-child th:last-child {
    border-top-right-radius: 0 !important; /* Geen afgeronde rechterhoek */
}

/* ✅ Zorg ervoor dat de eerste rij correct aansluit op de tabel */
thead tr th {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ✅ Celstijlen */
th, td {
    padding: 8px 10px;  /* Minder ruimte in cellen */
    text-align: center;
    border-bottom: 1px solid #ddd;
    line-height: 0.8; /* Lagere lijnhoogte voor compacte look */
    font-weight: bold;
}

/* ✅ Laatste rij zonder onderlijn */
tbody tr:last-child td {
    border-bottom: none;
}

tbody tr {
    background-color: white; /* Witte achtergrond voor inhoud */
    color: black; /* Zwarte tekst voor inhoud */
}

/* ✅ Afwisseling van rijachtergrond weghalen */
tbody tr:nth-child(even),
tbody tr:nth-child(odd) {
    background-color: white; /* Geen kleurverschil meer tussen rijen */
}

th.group-left,
td.group-left {
    border-left: 3px solid white;  /* Witte scheiding tussen kolomgroepen */
}

/* ✅ Zoekknop stijlen */
button {
    width: 25px; /* ✅ Maak de knoppen kleiner */
    height: 25px;
    background-color:#c0ff58;
    color: black;
    border: none;
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* ✅ Hover-effect voor de knop */
button:hover {
    background-color: #5cd372;
    box-shadow: 0px 2px 10px rgba(110, 235, 234, 0.6);
    transform: scale(1.1); /* ✅ Klein vergrotingseffect bij hover */
}

/* ✅ Submit Button */
.submit-button {
    background-color: #007bff;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
    min-width: 120px; /* optioneel */
    display: flex;
}

/* ✅ Hover-effect voor de knop */
.submit-button:hover {
    background-color: #0056b3;
}

/* ✅ Gearceerde rijen voor bepaalde tijdstippen */
.highlight-row {
    background-color: #C6C9C9 !important; /* 🔥 Voorkomt overschrijven */
}

/* ✅ Zorg dat de tekst leesbaar blijft */
.highlight-row td {
    font-weight: bold;
    color: black !important; /* 🔥 Zorgt ervoor dat de tekst zichtbaar blijft */
}

.price-cell {
    cursor: pointer;
    color: #007bff;
    text-decoration: underline;
}

.price-cell:hover {
    background-color: #f0f8ff;
}

.orderbook-header {
    text-align: center;
    margin-bottom: 10px;
}

.orderbook-header h2 {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
}

#periode-info {
    font-weight: bold;
    font-size: 22px;
    margin-left: 8px;
}

.order-input {
    width: 100px;
    text-align: center;
    padding: 6px;
    font-size: 14px;
}

/* 🔁 Responsieve aanpassing voor mobiele schermen */
@media (max-width: 600px) {
    .order-input {
        width: 60px;
        font-size: 12px;
        padding: 4px;
    }
}

.trading-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.trading-left {
    flex: 2;
    min-width: 0;
}

.trading-right {
    flex: 1;
    background-color: #f8f8f8;
    padding: 10px;
    border-left: 1px solid #ccc;
}

.livechart-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

.livechart-chart {
    flex: 1;
    min-width: 0;
}

.livechart-sidebar {
    width: 300px;
    flex-shrink: 0;
    background-color: #f8f8f8;
    padding: 6px 4px;
    border-left: 1px solid #ccc;
    font-size: 11px;
}

.livechart-sidebar table {
    width: 100%;
    border-collapse: collapse;
}

.livechart-sidebar th,
.livechart-sidebar td {
    padding: 2px 3px;
    text-align: center;
}

.livechart-sidebar h2 {
    font-size: 0.85em;
    margin: 0 0 6px 0;
    text-align: center;
}

@media (max-width: 768px) {
    .trading-layout {
        flex-direction: column;
    }

    .trading-right {
        display: none;
    }

    .livechart-sidebar {
        display: none;
    }

    .live-table {
        font-size: 11px;
        border-collapse: collapse;
        width: 100%;
    }

    .live-table th,
    .live-table td {
        padding: 6px 4px;
        text-align: center;
        white-space: nowrap;
    }

    .pagination button,
    .pagination span {
        font-size: 12px;
        padding: 4px 6px;
    }

    .live-table thead tr:first-child th {
        font-size: 10px;
        padding: 6px 4px; /* 🔥 iets meer hoogte */
    }

    .live-table thead tr:nth-child(2) th {
        font-size: 11px;
        padding: 6px 4px; /* 🔥 idem */
    }
}

.highlight-row {
    background-color: #e3f7ff;
    font-weight: bold;
}

/* ✅ Algemene button styling met bredere knoppen en centrering */
button.delete-button, 
button.update-button {
    display: block;             /* Zorgt dat button in de cel gecentreerd wordt */
    margin: 0 auto;             /* Horizontaal centreren */
    padding: 8px 16px;          /* Maak de knop breder en hoger */
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s ease;
    text-align: center;
    min-width: 80px;        
    text-align: center;
    line-height: normal; 
    height: 26px; /* Of pas aan naar gewenste hoogte *//* Zorgt dat de tekst niet wordt "opgetild" */    /* Minimum breedte voor de tekst */
}

/* ✅ Delete button in rood */
button.delete-button {
    background-color: #e74c3c;
}

button.delete-button:hover {
    background-color: #c0392b;
}

/* ✅ Update button in groen */
button.update-button {
    background-color: #27ae60;
}

button.update-button:hover {
    background-color: #1e8449;
}

.styled-table {
    width: 100%;
    table-layout: auto;           /* Zorgt dat kolommen breder mogen worden */
    border-collapse: collapse;
    overflow-x: auto;
  }
  
  .styled-table th {
    white-space: nowrap;          /* ❗ voorkom dat titels afbreken */
    padding: 10px 12px;
    font-size: 13px;
    text-align: center;
  }
  
  .styled-table td {
    padding: 8px 12px;
    text-align: center;
  }
  
  /* Zorg dat bij veel kolommen de tabel scrollbaar wordt op kleinere schermen */
  .table-wrapper {
    overflow-x: auto;
    max-width: 100%;
  }
  

.highlight-hour-row {
    background-color: rgb(219, 241, 252) !important;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  
  .popup-content {
    background-color: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    width: 340px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    font-family: 'Segoe UI', sans-serif;
  }
  
  .popup-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    text-align: center;
  }
  
  .popup-content label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
  }
  
  .popup-content input {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
  }
  
  .popup-content button {
    padding: 10px 16px;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 8px;
  }
  
  .popup-content button[type="submit"] {
    background-color: #007bff;
    color: white;
    margin-right: 10px;
  }
  
  .popup-content button[type="button"] {
    background-color: #ddd;
    color: #333;
  }

  #popupSide.buy {
    background-color: #e6f4ea; /* lichtgroen */
    border: 1px solid #b6dfc2;
    color: #146c2d;
  }
  
  #popupSide.sell {
    background-color: #fce8e6; /* lichtrood */
    border: 1px solid #f5bebe;
    color: #a94442;
  }

  .popup-btn {
    padding: 10px 20px;              /* meer ruimte rondom tekst */
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 100px;                /* voorkomt dat korte knoppen te smal worden */
    display: inline-block;
    text-align: center;
    white-space: nowrap;  
    line-height: 1.4;               /* 🔧 Zorgt voor evenwichtige verticale uitlijning */
  display: inline-flex;           /* 🔑 Zorgt dat je kunt alignen */
  align-items: center;           /* 🎯 Verticaal centreren van tekst en iconen */
  justify-content: center;           /* tekst blijft op één regel */
  }
  
  
  /* Verstuur knop (primaire actie) */
  .popup-btn.send {
    background-color: #007bff;
    color: white;
  }
  
  .popup-btn.send:hover {
    background-color: #0069d9;
  }
  
  /* Annuleer knop (secundaire actie) */
  .popup-btn.cancel {
    background-color: #e0e0e0;
    color: #333;
  }
  
  .popup-btn.cancel:hover {
    background-color: #d5d5d5;
  }

.popup-btn svg,
.popup-btn img {
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
}

.market-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
  }
  
  .live-status-container {
    display: block;
  }
  
  @media (max-width: 1024px) {
    .market-grid {
      grid-template-columns: 1fr;
    }
  
    .live-status-container {
      display: none;  /* Verberg op mobiel/tablet */
    }
  }
  
.positive-cell { color: #0b8a00; font-weight: 600; }
.negative-cell { color: #c00;    font-weight: 600; }

.positive-cell_da {
    background-color: #d6f5d6;
}

.negative-cell_da {
    background-color: #ffd6d6;
}

.modal { position: fixed; inset: 0; z-index: 1000; }
.modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.35); }
.modal-dialog { position:relative; margin: 5vh auto; max-width: 920px; background:#fff; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); overflow:hidden; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #e8e8e8; }
.modal-header h3 { margin:0; font-size:18px; }
#modalClose { background:transparent; border:none; font-size:26px; line-height:1; cursor:pointer; }
.modal-body { padding: 14px; }
tr { cursor: pointer; } /* rijen klikbaar maken */