.table-separator-div {
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: center;     /* vertical centering */
    background-color: #ffbe00; /* Orange*/
    color: #000000; /* black text for best contrast */
    font-weight: bold;
    font-size: 21px;
    border-radius: 0.75rem;
    padding: 1.75rem;
    width: 100%;
    text-align: center; /* still useful for multiline text */
}
.no-hover-button:focus,
.no-hover-button:active,
.no-hover-button:hover {
  color: inherit !important;
  background-color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}

.table-dark {
    --bs-table-hover-bg: unset !important;
    --bs-table-hover-color: unset !important;
    --bs-table-hover-bg: unset !important;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: unset !important;
    --bs-table-bg-state: unset !important;
}

.leaflet-popup-close-button {
    display: none;
}

/* A popup teljes stílusát sötétre állítjuk */
.leaflet-popup-content-wrapper {
    background: #2c2c2c !important; /* sötét háttér */
    color: #f1f1f1 !important;      /* világos szöveg */
    border-radius: 8px;             /* lekerekítés */
}

.leaflet-popup-tip {
    background: #2c2c2c !important; /* a kis háromszög is sötét */
}

.leaflet-popup-content a.btn {
    color: #f1f1f1; /* gomb szöveg világos legyen */
}

.dark-popup {
    background-color: #2c2c2c; /* sötét háttér */
    color: #f1f1f1;           /* világos szöveg */
    border: 1px solid #555;    /* szegély árnyalattal */
    border-radius: 8px;        /* lekerekített sarkok */
    padding: 8px 12px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.popup-link {
    font-size: 16px;
    text-decoration: none;
    color: #007bff;
}

.popup-link:hover {
    text-decoration: underline;
}


.disabled-row {
    pointer-events: none; /* no clicks allowed */
    opacity: 0.5;         /* looks disabled */
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: transparent !important;
}

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  --bs-gutter-x: 0.75rem !important;
}

.table-dark {
  --bs-table-hover-bg: #212529 !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
  background-color: transparent !important; /* keep original background */
  color: #198754 !important; /* Bootstrap's default text color */
  border-color: #198754 !important; /* Bootstrap's default border */
  box-shadow: none !important; /* remove focus ring */
}


/* .circular-arrow-container {
  animation: spin 10s linear infinite;
  transform-origin: center center;
  animation-direction: var(--spin-direction, normal);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
} */

.gpio-table {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
}

input[type="range"] {
    margin: 2px;        /* add spacing so it doesn’t overlap text */
}

input.color-range {
    -webkit-appearance: none;
    width: 70%;
    height: 12px;
    border-radius: 8px;
}

input.color-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
}

input.color-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
}

.gpio-table th, .gpio-table td {
    border: 1px solid #ccc;
    padding: 6px 10px;
    text-align: center;
}

.gpio-table td.bit-1 {
    background-color: #dc3545; /* Bootstrap btn-danger red */
    color: #fff;               /* white text for contrast */
    font-weight: bold;
    text-align: center;
}

.gpio-table td.bit-0 {
    background-color: #198754; /* Bootstrap btn-success green */
    color: #fff;               /* white text */
    font-weight: bold;
    text-align: center;
}

.dropdown-header {
  font-weight: 600;
  color: #555;
}
.dropdown-item.bg-danger:hover,
.dropdown-item.bg-success:hover {
  opacity: 0.8;
}

#map {
    height: 100vh;
}

/* Power-save dark theme */
#irrigationForm .scrollable-section {
    background-color: #000; /* OLED power-save black */
    color: #ccc;            /* light gray text */
    font-size: 16px;
    border: 1px solid #444;
    overflow-y: auto;       /* enable scrolling */
    max-height: 500px;      /* adjust as needed */
    padding: 10px;
    border-radius: 5px;
}

/* Tables inside the form */
#irrigationForm table {
    width: 100%;
    border-collapse: collapse;
}

#irrigationForm th {
    background-color: #3b3b3b;
    color: #eee;
}

#irrigationForm tr:hover {
    background-color: #454545;
}

/* Sticky header */
#irrigationForm .sticky-header {
    position: sticky;
    top: 0;
    background-color: #111;
    color: #eee;
    box-shadow: 0 2px 5px rgba(255,255,255,0.1);
}

/* High contrast / sunny mode */
@media (forced-colors: active), (prefers-contrast: more) {
    #irrigationForm .scrollable-section {
        background-color: #f0f0f0;
        color: #000;
        border-color: #999;
    }
    #irrigationForm th {
        background-color: #ddd;
        color: #000;
    }
    #irrigationForm tr:hover {
        background-color: #ccc;
    }
    #irrigationForm .sticky-header {
        background-color: #fff;
        color: #000;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
}

@media (max-width: 576px) {

    .navbar-brand {
        display: none !important;
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table tbody,
    .responsive-table td {
        display: block;
        width: 100%;
        text-align: center;
        /* padding: 1px; /* adds spacing inside each td */ */
        box-sizing: border-box; /* ensures padding doesn't break width */
    }

    .responsive-table tr {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 4px;
        margin-bottom: 4px;
        color:white;
    }

    .responsive-row {
        display: block;              /* you already set this */
        width: 100%;
        text-align: center;
        /* padding: 20px; */
        margin-bottom: 10px;

        background-color: #4caf50;   /* your custom color */
        color: white;                /* text color */
        border-bottom: 1px solid #FF0000;
    }

    .responsive-table td > * {
        margin-top: 0px; /* vertical spacing between elements */
        margin-bottom: 0px; /* vertical spacing between elements */
        display: inline-block; /* keeps elements on separate lines if needed */
    }

    .responsive-table td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;

        color: #555;
    }
}

.selected-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e9ecef;
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    cursor: grab;
}

.selected-item.dragging {
    opacity: 0.5;
}

.selected-item button {
    border: none;
    background: transparent;
    color: #dc3545;
    font-weight: bold;
    cursor: pointer;
}