/* ASSIGNMENT CSS */
.bg-yellow {
    background-color: #FFFF99; /* soft yellow */
}
.bg-yellow:focus {
    background-color: #FFFF99;
    border-color: #F0AD4E;
}
.bg-yellow:read-only {
    background-color: #FFFF99 !important;
    color: #555; /* optional: make text readable */
}

.bg-blue {
    background-color: #CCFFFF; /* soft blue */
}
.bg-blue:focus {
    background-color: #CCFFFF;
    border-color: #5BC0DE;
}
.bg-blue:read-only {
    background-color: #CCFFFF !important;
    color: #555; /* optional */
}

.group-row {
    display: table;
    width: 100%;
    border: 2px solid #000; /* bold border around group */
    margin-bottom: 15px;
}

.group-label {
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
    width: 50px;
    border-right: 2px solid #000; /* vertical separator */
    padding: 0; /* remove padding so line spans full height */
}

.group-fields {
    display: table-cell;
    padding: 10px;
}

.d-flex-row {
    display: flex;
    align-items: stretch; /* makes children full height */
}

.separator {
    width: 1px; /* thin line */
    background: #ccc; /* color of the separator */
    margin: 0; /* optional spacing */
}

.group-header {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid #000; /* matches group border */
    padding: 0;
    margin: 0 -10px 10px -10px; /* extend into the .group-fields padding */
}

.group-fields .suffix {
    line-height: 34px;
    display: inline-block;
    vertical-align: middle;
}

/* Extra-large modal */
.modal-xl {
    width: 1300px;        /* default width for large screens */
    max-width: 95%;       /* never overflow the screen */
    margin: 30px auto;    /* vertical spacing + center horizontally */
}

input.is-invalid,
input[readonly].is-invalid,
.form-control.is-invalid {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

input.is-invalid:focus {
	outline: none;
	box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}


/* Medium screens (tablets) */
@media (max-width: 1200px) {
    .modal-xl {
        width: 90%;       /* slightly narrower */
        max-width: 90%;
    }
}

/* Small screens (phones) */
@media (max-width: 768px) {
    .modal-xl {
        width: 95%;       /* almost full screen */
        margin: 15px auto; /* smaller vertical margin */
    }
}

/* Optional: ensure modal content scrolls if too tall */
.modal-xl .modal-content {
    max-height: 85vh;      /* viewport height */
    overflow-y: auto;      /* scroll if content exceeds */
}

/* Make only the "Új" label clearly change color */
label.checkbox-changed {
  background-color: rgba(52, 152, 219, 0.3);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(52, 152, 219, 0.4);
  padding: 2px 6px;
  transform: scale(1.3); /* subtle enlargement */
  transition: 
    background-color 0.8s ease,
    box-shadow 0.8s ease,
    opacity 1s ease,
    transform 0.4s ease;
  opacity: 1;
}

/* sliding switch */
/* Switch container */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;      /* total width */
  height: 24px;     /* total height */
}

/* Hide default checkbox */
.switch input {
  display: none;
}

/* Background slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.2s;
  border-radius: 12px; /* half of height for rounded ends */
  height: 24px;
}

/* The sliding nub */
.slider:before {
  position: absolute;
  content: "";
  height: 20px;        /* nub slightly smaller than container height */
  width: 20px;
  left: 2px;           /* margin inside the container */
  top: 2px;            /* center vertically: (container - nub)/2 */
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
}

/* Checked state */
.switch input:checked + .slider {
  background-color: #4CAF50;
}

.switch input:checked + .slider:before {
  transform: translateX(26px); /* container width - nub width - margins */
}