:root {
  --background-color: dimgrey; /* Main page background */
  --text-color-light: white; /* For text on dark backgrounds */
  --text-color-dark: #212529; /* For text on light backgrounds */
  --text-color-muted: grey; /* Muted text */
  --primary-color: #0583D2; /* Blue for primary actions */
  --primary-color-hover: #0465a3; /* Darker blue for hover */
  --secondary-color: #6c757d; /* Grey for secondary actions */
  --secondary-color-hover: #5a6268; /* Darker grey for hover */
  --warning-color: #ffc107; /* Yellow for warnings/staging */
  --warning-text-color: #212529; /* Dark text for on-warning backgrounds */
  --warning-color-alt: #f0ad4e; /* Orange/yellow for other warnings */
  --danger-color: #f44336; /* Red for destructive actions */
  --success-color: #28a745; /* Green for success actions */
  --info-color: #3498db; /* Lighter blue for info/loaders */
  --accent-color: #86efac; /* Green accent color for headings and buttons */
  --border-color-light: #ccc; /* Light grey border */
  --border-color-medium: #eee; /* Very light grey border */
  --border-color-dark: #d4d4d4; /* Light grey border (alt) */
  --border-color-table: #ddd; /* Light grey for table borders */
  --loader-background: #f3f3f3; /* Light grey loader track */
  --box-shadow-color: rgba(0,0,0,0.2); /* Standard box shadow */
  --box-shadow-color-menu: rgba(0,0,0,0.3); /* Menu shadow */
  --overlay-color: rgba(0, 0, 0, 0.5); /* Modal overlay background */
  --menu-item-text-color: #333; /* Dark grey for menu text */
  --menu-item-hover-background: #f0f0f0; /* Light grey for menu hover */
  --modal-background: #fefefe; /* White modal background */
  --modal-border-color: #888; /* Grey modal border */
  --modal-close-color: #aaa; /* Grey for modal close button */
  --modal-close-hover-color: black; /* Black for modal close hover */
  --table-header-background: #f2f2f2; /* Light grey for table headers */
  --note-text-color: #888; /* Grey for notes/hints */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Near-black background */
    --text-color-light: #1f1f1f; /* Very dark grey (for light text on dark bg) */
    --text-color-dark: #ffffff; /* White (for dark text on light bg) */
    --text-color-muted: #aaaaaa; /* Light grey for muted text */
    --primary-color: #0a9bf5; /* Bright blue */
    --primary-color-hover: #0077cc; /* Darker bright blue */
    --secondary-color: #8b949e; /* Grey-blue */
    --secondary-color-hover: #a0a9b3; /* Lighter grey-blue */
    --warning-color: #ffc60a; /* Bright yellow */
    --warning-text-color: #212529; /* Dark text for on-warning backgrounds */
    --warning-color-alt: #e6a100; /* Darker yellow/orange */
    --danger-color: #ff453a; /* Bright red */
    --success-color: #34c759; /* Bright green */
    --info-color: #0a9bf5; /* Bright blue for info/loaders */
    --accent-color: #86efac; /* Green accent color for headings and buttons */
    --border-color-light: #555555; /* Dark grey border */
    --border-color-medium: #444444; /* Darker grey border */
    --border-color-dark: #666666; /* Lighter dark grey border */
    --border-color-table: #3a3a3a; /* Darker grey for table borders */
    --loader-background: #333333; /* Dark grey loader track */
    --box-shadow-color: rgba(255,255,255,0.1); /* White, low-opacity shadow */
    --box-shadow-color-menu: rgba(255,255,255,0.15); /* White, low-opacity menu shadow */
    --overlay-color: rgba(0, 0, 0, 0.7); /* Darker modal overlay */
    --menu-item-text-color: #dddddd; /* Very light grey menu text */
    --menu-item-hover-background: #333333; /* Dark grey menu hover */
    --modal-background: #2d2d2d; /* Dark grey modal background */
    --modal-border-color: #777777; /* Grey modal border */
    --modal-close-color: #aaaaaa; /* Light grey modal close button */
    --modal-close-hover-color: #dddddd; /* Lighter grey for modal close hover */
    --table-header-background: #1f1f1f; /* Very dark grey table headers */
    --note-text-color: #aaaaaa; /* Light grey for notes/hints */
  }
  .btn-secondary {
    color: var(--warning-text-color);
  }
  .icon-btn {
    background-color: var(--loader-background);
    border: none;
  }
  .selected-member-tag {
    color: var(--text-color-dark);
  }
  input[type="time"], input[type="date"] {
    color-scheme: dark;
  }
  a {
    color: var(--primary-color);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  background-color: var(--background-color);
  color: var(--text-color-dark);
}

h1 {
  margin-bottom: 8%;
  text-align: left;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: left;
}

#nameMessage {
    margin: 0;
}

#nameMessage:not(:empty) {
    margin-top: 8px;
}

p span {
  background: var(--text-color-light);
  padding: 0px;
  color: var(--text-color-dark);
}

input,
select,
.btn {
  height: 40px;
  padding: 0 15px; /* Use padding for horizontal spacing only */
  border: 1px solid var(--border-color-light);
  border-radius: 5px;
  font-size: 16px;
  line-height: 38px; /* Vertically center text */
  background-color: var(--background-color);
  color: var(--text-color-dark);
}

.btn {
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: auto;
  min-width: 120px;
  cursor: pointer;
}

.login-container {
  background-color: var(--text-color-light);
  padding: 3%;
  box-shadow: 0 4px 8px 0 var(--box-shadow-color);
  margin-left: 5vw;
  margin-right: 5vw;
  margin-top: 5vw;
  margin-bottom: 5vw;
}

#create-acct {
  display: none;
}

button:hover {
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s;
}

#submit, #create-acct-btn {
  background-color: var(--primary-color);
  color: var(--text-color-dark);
  border: none;
  margin-top: 5%;
}

#return-btn {
  background: none;
  color: var(--text-color-muted);
  text-decoration: underline;
  border: none;
  margin-top: 3%;
}

#sign-up {
  border: none;
}

.loading-overlay {
  position: fixed;
  z-index: 1001; /* Ensure it's on top of the modal */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-color); /* Semi-transparent background */
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Stack spinner and timer vertically */
}

.loader {
  border: 16px solid var(--loader-background); /* Light gray */
  border-top: 16px solid var(--info-color); /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#member-search {
  padding: 12px;
  border: 1px solid var(--border-color-light);
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  margin-bottom: 0;
}

.autocomplete-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.autocomplete-items {
  border: 1px solid var(--border-color-dark);
  z-index: 99;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  background-color: var(--text-color-light);
}

.autocomplete-items div {
  display: inline-block;
  width: auto;
  padding: 0 15px;
  border-radius: 5px;
  font-size: 16px;
  line-height: 38px;
  text-align: left;
  cursor: pointer;
  background-color: var(--secondary-color);
  color: var(--text-color-dark);
  border: none;
  height: 40px;
}

.autocomplete-items div:hover {
  background-color: var(--secondary-color-hover);
}

#selected-members-container {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid var(--border-color-light);
  border-radius: 4px;
  min-height: 60px;
}

#selected-members-container p {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: bold;
}

#selected-admins-list {
  list-style-type: none;
  padding: 0;
  margin: -4px;
  display: flex;
  flex-wrap: wrap;
}

.selected-member-tag {
  background-color: var(--warning-color);
  color: var(--warning-text-color);
  padding: 0 8px;
  border-radius: 5px;
  font-size: 16px;
  height: 40px;
  line-height: 38px;
  display: inline-flex;
  align-items: center;
  margin: 4px;
}

.unknown-member-cell {
  background-color: var(--warning-color);
  color: var(--warning-text-color);
}

.no-group-schedule-tag {
  background-color: var(--warning-color);
  color: var(--warning-text-color);
  padding: 0 8px;
  border-radius: 5px;
  font-size: 16px;
  height: 40px;
  line-height: 38px;
  display: inline-flex;
  align-items: center;
  margin: 4px;
}

.selected-member-tag .remove-btn {
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;
}

.admin-notice {
  background-color: var(--warning-color);
  color: var(--warning-text-color);
  padding: 8px;
  border-radius: 5px;
  margin-top: 10px;
}

.admin-notice a {
  color: var(--primary-color);
  text-decoration: underline;
}

#menuToggleBtn {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--primary-color);
    color: var(--text-color-dark);
    border: none;
    padding: 0 15px; /* Padding gefixed */
    cursor: pointer;
    font-size: 24px;
    border-radius: 5px;
    z-index: 1000;
    box-shadow: 0 4px 8px var(--box-shadow-color);
    transition: all 0.4s ease-in-out; /* Soepele overgang voor alle styles */
    width: 60px; /* Standaard breedte (hamburger) */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Deze regel zorgt ervoor dat de knop 250px breed wordt 
   ZODRA het menu de class 'show' heeft, ongeacht de volgorde in HTML 
*/
body:has(#mainMenu.show) #menuToggleBtn {
    width: 250px;
    right: 0px;
    border-radius: 0 0 0 5px; /* Optioneel: sluit mooier aan op de rand */
    justify-content: space-between; /* Geeft ruimte tussen 'Menu' en 'X' */
    padding: 0 20px;
}

#menuToggleBtn:hover {
    background-color: var(--primary-color-hover);
  transform: none;
}

button:hover {
    cursor: pointer;
    opacity: 1;
    transition: 0.3s;
}

#mainMenu {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: var(--text-color-light);
    padding-top: 80px;
    box-shadow: -4px 0 10px var(--box-shadow-color-menu);
    transition: transform 0.4s ease-in-out;
    z-index: 999;
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
}

#mainMenu.show {
    transform: translateX(0);
}

.menu-header {
    padding: 15px 20px;
}

#mainMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 80px); /* Adjust based on actual header/padding */
    overflow-y: auto;
}

#mainMenu li {
    border-bottom: 1px solid var(--border-color-medium);
}

#mainMenu li:last-child {
    border-bottom: none;
    margin-top: auto;
}

#mainMenu a {
    display: block;
    padding: 15px 20px;
    color: var(--menu-item-text-color);
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s;
    font-size: 16px;
    font-weight: bold;
}

.person-name-header {
    padding: 15px 20px;
}

.control-button {
    background-color: var(--primary-color);
    color: var(--text-color-dark);
    border: none;
    padding: 10px 15px;
    width: auto;
    display: inline-block;
    margin-right: 10px;
}

.old-value-note {
    font-size: 0.8em;
    color: var(--note-text-color);
    margin-top: -10px;
    margin-bottom: 5px;
    padding-left: 5px;
}

.member-form-container {
    padding: 15px;
    border: 1px solid var(--border-color-table);
    border-radius: 4px;
    margin-top: 15px;
}

.member-form-container input[type="text"],
.member-form-container input[type="email"] {
    margin-bottom: 5px;
    padding: 10px;
}

.secondary-btn, .delete-btn {
    width: 49%;
    display: inline-block;
    margin-top: 10px;
    padding: 10px;
}

.secondary-btn {
    background-color: var(--warning-color-alt);
}

.delete-btn {
    background-color: var(--danger-color);
    margin-left: 2%;
}

#orphaned-admins-list h4 {
    margin-bottom: 5px;
}

.orphaned-admin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px dashed var(--border-color-medium);
    margin-bottom: 5px;
}

.add-admin-as-member-btn {
    background-color: var(--primary-color);
    color: var(--text-color-dark);
    padding: 5px 10px;
    width: auto;
    font-size: 0.8em;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--overlay-color);
    padding-top: 60px;
}

.modal-content {
    background-color: var(--modal-background);
    margin: 5% auto;
    padding: 20px;
    border: 1px solid var(--modal-border-color);
    width: 80%;
    max-width: 500px;
    border-radius: 5px;
}

.close-btn {
    color: var(--modal-close-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: var(--modal-close-hover-color);
    text-decoration: none;
    cursor: pointer;
}

.search-container {
    margin-bottom: 15px;
}

.autocomplete-dropdown {
    position: relative;
}

.message {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
}

#activitiesMessage:empty {
    margin: 0;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
  .data-table th, .data-table td {
      display: table-cell;
      border: 1px solid var(--border-color-table);
      padding: 8px;
      text-align: left;
      vertical-align: middle;
  }

.schedules-data-table td:first-child {
    vertical-align: top;
}

.data-table th {
    background-color: var(--table-header-background);
}

.form-group {
    margin-bottom: 15px;
}

.input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.input-group > * {
    vertical-align: middle; /* Fallback for non-flex content */
}

.input-group > * {
    vertical-align: middle;
}

.input-with-button {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-button input {
    flex-grow: 1;
    width: 100%;
}

.icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 24px;
    line-height: 40px;
    flex-shrink: 0;
    min-width: 40px;
}

.original-value {
    font-size: 0.8em;
    color: var(--note-text-color);
    margin-top: -10px;
    margin-bottom: 5px;
    padding-left: 5px;
}

.form-group > input[type="checkbox"] + label {
    margin-left: 8px;
    vertical-align: middle;
}

.form-actions {
    margin-top: 15px;
}

.delete-button-container {
    margin-top: 15px;
}

.button-section {
    margin-bottom: 15px;
}

.field-display {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.field-display p {
    margin: 0;
}

/* Stacked layout for all modal form tables */
.modal .form-table tr, 
.modal .form-table td {
    display: block;
    width: 100%;
}
.modal .form-table td:nth-child(1) { /* Labels */
    text-align: left;
    padding-top: 10px; 
    padding-right: 0;
    width: auto;
}
.field-edit {
  display: flex;
}

.search-and-add-container {
  margin-bottom: 15px;
}

.menu-link {
    display: block;
    padding: 10px 15px;
    color: var(--menu-item-text-color);
    text-decoration: none;
}

.menu-link:hover {
    background-color: var(--menu-item-hover-background);
}

.menu-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    padding: 0;
}

.organization-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

#organizationDetails > div,
#main > section {
        margin-bottom: 1.5rem;
    }
    
.content-group {
    margin-bottom: 1rem;
}
.btn {
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px;
  width: auto;
  min-width: 120px;
  height: 40px;
  line-height: 38px;
}
.btn-icon-compact {
  width: 35px;
  min-width: 35px;
  height:35px;
  font-weight: bold;
  margin: 2px;
  display: inline-flex;
  justify-content: center;
  align-items: center; 
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
  }

.btn-primary {
  background-color: var(--primary-color);
  color: var(--text-color-dark);
}

.btn-success {
  background-color: var(--success-color);
  color: var(--text-color-dark);
}

.btn-danger {
  background-color: var(--danger-color);
  color: var(--text-color-dark);
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--text-color-dark);
}

.form-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.form-table td {
    padding: 4px;
    vertical-align: middle;
}

.form-table td:nth-child(1) { /* Labels */
    width: 100px;
    text-align: right;
    padding-right: 10px;
    padding-top: 14px;
    vertical-align: top;
}

#taskTypeModal .form-table td:has(input[type="checkbox"]) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 4px; /* Reset padding for checkbox rows */
}

#modalTaskTypeDescription,
#modalScheduleDescription {
    width: 100%;
    font-size: 16px; /* Match input */
    height: 80px; /* Approx 2 lines + padding */
    padding: 8px;
    border: 1px solid var(--border-color-light);
    border-radius: 5px;
    font-family: sans-serif;
    background-color: var(--background-color);
    color: var(--text-color-dark);
}

#takenVanTypeDescription:empty {
    display: none;
}

/* Desktop-specific widths for task table */
.data-table.task-data-table th:nth-child(1), .data-table.task-data-table td:nth-of-type(1) { width: 160px; }

.data-table.task-data-table th:nth-child(2), .data-table.task-data-table td:nth-of-type(2) { width: 140px; }

.data-table.task-data-table th:nth-child(3), .data-table.task-data-table td:nth-of-type(3) { width: auto; } 
.data-table.task-data-table th:nth-child(4), .data-table.task-data-table td:nth-of-type(4) { width: auto; }
@media (min-width: 601px) {
  /* Styles for task tables with rowspan-aware classes (e.g., st-edit-debug.html) */
  .data-table.task-data-table {
    table-layout: fixed;
    width: 100%;
  }
  /* Target headers by position and body cells by class for reliability */
  .data-table.task-data-table th:nth-child(1),
  .data-table.task-data-table .task-table-date {
    width: 160px;
  }
  .data-table.task-data-table th:nth-child(2),
  .data-table.task-data-table .task-table-action {
    width: 140px;
  }
  /* Flexible columns */
  .data-table.task-data-table th:nth-child(3),
  .data-table.task-data-table .task-table-person {
    width: 50%; /* 50% of remaining space */
  }
  .data-table.task-data-table th:nth-child(4),
  .data-table.task-data-table .task-table-label {
    width: 20%; /* 25% of remaining space */
  }
  .task-data-table-all .task-table-deleted,
  .task-data-table-all th:nth-child(5) {
    width: 40%; 
  }
}
@media (max-width: 600px) {
  .organization-container {
    max-width: 100%;
  }
  .login-container {
    margin-left: 0;
    margin-right: 0;
  }
  .data-table thead {
    display: none;
  }
  .data-table tr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color-table);
    padding: 0;
  }
  .data-table td {
    border-bottom: 1px dotted var(--border-color-light);
    padding: .5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  
  .data-table td:last-child {
    border-bottom: 0;
  }
  .data-table td:before {
    display: none;
  }
  /* Schedules table specific mobile layout */
  .schedules-data-table td:nth-of-type(1) { width: 50%; order: 1; justify-content: flex-start; }
  .schedules-data-table td:nth-of-type(2) { width: 50%; order: 2; justify-content: flex-end; }
  .schedules-data-table td:nth-of-type(3) { width: 100%; order: 3; justify-content: flex-start; }
  /* Members table specific mobile layout */
  .members-data-table td:nth-of-type(1) { width: 50%; order: 1; justify-content: flex-start; }
  .members-data-table td:nth-of-type(4) { width: 50%; order: 2; justify-content: flex-end; }
  .members-data-table td:nth-of-type(2) { width: 50%; order: 3; justify-content: flex-start; }
  .members-data-table td:nth-of-type(3) { width: 50%; order: 4; justify-content: flex-end; }
  /* OAdmin table specific mobile layout */
  .oadmin-data-table tr { flex-wrap: nowrap; }
  .oadmin-data-table td:nth-of-type(1) { width: 50%; justify-content: flex-start; }
  .oadmin-data-table td:nth-of-type(2) { width: 50%; justify-content: flex-end; }
  /* Beheerders table specific mobile layout */
  .beheerders-data-table tr { flex-wrap: nowrap; }
  .beheerders-data-table td:nth-of-type(1) { width: 50%; justify-content: flex-start; }
  .beheerders-data-table td:nth-of-type(2) { width: 50%; justify-content: flex-end; }
  /* OMembers table specific mobile layout */
  .omembers-data-table tr { flex-wrap: nowrap; }
  .omembers-data-table td:nth-of-type(1) { width: 50%; justify-content: flex-start; }
  .omembers-data-table td:nth-of-type(2) { width: 50%; justify-content: flex-end; }
  /* MijnTaken table specific mobile layout */
  .mijntaken-data-table td:nth-of-type(1) { width: 140px; order: 1; } /* Bekijk button */
  .mijntaken-data-table td:nth-of-type(2), 
  .mijntaken-data-table td:nth-of-type(3) {
      width: calc(100% - 140px); 
      order: 2; 
      display: block; 
      padding: 4px 8px;
      border-bottom: none;
  }
  /* Activity Task table specific mobile layout */
  .activity-task-table td { display: block; width: 100%; text-align: left; }
  .activity-task-table td:nth-child(1) { text-align: right; }
  /* Task table specific mobile layout */
  .task-data-table td:nth-of-type(1) { width: 140px; order: 1; } /* Bekijk button */
  .task-data-table td:nth-of-type(2) { width: calc(100% - 140px); order: 2; display: block; padding: 8px; } /* Combined data */
  .data-table td p {
      margin: 0;
  }
  .input-group input[type="text"] {
    flex-basis: 100%;
    margin-bottom: 8px;
  }
}

#main, #Schedule, #divTasktypeList, #divAdminsList, #divMembersList, #Taken, #divTaskList, #personData, #divScheduleList {
    margin-bottom: 1.5rem;
}

#mijnTaken {
    margin-bottom: 1.5rem;
}

.clean-list {
    list-style-position: inside;
    padding-left: 0;
}

#main, #organizations-list-container, #create-organization-section {
    margin-bottom: 1.5rem;
}

.organization-item {
    border: 1px solid var(--border-color-table);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 1rem;
}

.organization-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.organization-header h3 {
    margin: 0;
}

.person-item a {
    text-decoration: none;
    color: var(--primary-color);
}

.person-item a:hover {
    text-decoration: underline;
}

.admin-only-note {
    font-style: italic;
    color: var(--secondary-color);
}

#main, #taakData {
    margin-bottom: 1.5rem;
}

.details-dl {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 8px 16px;
}

.details-dl dt {
    font-weight: bold;
    text-align: right;
}

.details-dl dd {
    margin-left: 0;
}
    .staged-selection {
    background-color: var(--warning-color);
    color: var(--warning-text-color);
}

.deselected-selection {
    background-color: var(--danger-color);
    color: var(--text-color-dark);
}

.task-row.selected {
    background-color: var(--primary-color);
    color: var(--text-color-dark);
}

.task-row.selected a {
    color: var(--text-color-dark);
}

.modal-form-layout {
    width: 100%;
    margin-bottom: 15px;
    border-collapse: collapse;
}

.modal-form-layout td {
    padding: 4px;
    vertical-align: middle;
}

.modal-form-layout td:nth-child(1) { /* Labels */
    width: 80px; /* Fixed width for labels */
    text-align: right;
    padding-right: 10px;
    vertical-align: top;
    padding-top: 10px; /* Align with text inside input */
}

.modal-form-layout input, .modal-form-layout select {
    width: 100%;
}

/* Specific width adjustments for modals */
#editEventModal #eventAddressInput,
#activityModal #activityAddressInput {
    width: 100%;
}

/* Constrain the td for specific inputs in Edit Event Modal */
#editEventModal .form-table td:has(#eventDurationInput),
#editEventModal .form-table td:has(#eventTimeInput) {
    width: auto;
    max-width: 150px; /* Adjust as needed */
}

/* Constrain the td for specific inputs in Activity Modal */
#activityModal .form-table td:has(#activityDateInput),
#activityModal .form-table td:has(#activityDurationInput) {
    width: auto;
    max-width: 150px; /* Adjust as needed */
}

/* Constrain the input-with-button container in Activity Modal */
#activityModal .form-table td:has(.input-with-button) .input-with-button {
    width: auto;
    max-width: 200px; /* Input (150px) + Button (40px) + Gap (8px) */
}

/* Ensure inputs inside constrained containers fill available space */
#editEventModal .form-table input,
#activityModal .form-table input:not(#activityAddressInput) {
    width: 100%;
}

/*
  Desktop-specific widths for the 5-column task table on st-all.html.
  This overrides the 4-column layout rules.
*/
@media (min-width: 601px) {
  .task-data-table-all {
    table-layout: fixed;
    width: 100%;
  }
  /* Fixed columns */
  .task-data-table-all .task-table-date,
  .task-data-table-all th:nth-child(1) {
    width: 160px;
  }

.task-data-table-all .task-table-action,
/* Edit Group Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color); /* Use solid page background */
    display: none;
    z-index: 1000;
    overflow-y: auto; /* The overlay is now the scrollable container */
}

#editGroupModal .modal-content {
    background-color: transparent; /* Content background is now the overlay's */
    color: var(--text-color-dark);
    padding: 20px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 800px; /* Set a max-width for content readability */
    margin: 2rem auto; /* Center content with some margin */
    height: auto; /* Height will be determined by content */
}

#editGroupModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#editGroupModal .modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--modal-close-color);
}

#editGroupModal .modal-close-btn:hover {
    color: var(--modal-close-hover-color);
}

#editGroupModal .modal-footer {
    border-top: 1px solid var(--border-color-light);
    padding-top: 15px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#editGroupModal .form-group {
    margin-bottom: 1.5rem;
}

#editGroupModal .form-control {
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color-dark);
    background-color: var(--background-color);
    background-clip: padding-box;
    border: 1px solid var(--border-color-light);
    border-radius: 0.25rem;
}

#memberAutocompleteResults {
    border: 1px solid var(--border-color-dark);
    border-top: none;
    max-height: 150px;
    overflow-y: auto;
    background-color: var(--background-color);
}

#memberAutocompleteResults div {
    padding: 8px 12px;
    cursor: pointer;
}

#memberAutocompleteResults div:hover {
    background-color: var(--primary-color);
    color: var(--text-color-dark);
}

#existingMembersList .member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color-medium);
}

.btn-staged {
  background-color: var(--warning-color);
  color: var(--warning-text-color);
}
  .task-data-table-all th:nth-child(2) {
    width: 140px;
  }
  /* Flexible columns */
  .task-data-table-all .task-table-person,
  .task-data-table-all th:nth-child(3) {
    width: 50%; /* 50% of remaining space */
  }
  .task-data-table-all .task-table-label,
  .task-data-table-all th:nth-child(4) {
    width: 20%; /* 25% of remaining space */
  }
  .task-data-table-all .task-table-deleted,
  .task-data-table-all th:nth-child(5) {
    width: 40%; 
  }
}

#taak-container {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    gap: 1.5rem; /* Consistent spacing between columns */
}

#taak-col1 {
    flex-grow: 1; /* Take up remaining space */
}

.log-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: bold;
    font-size: 0.9em;
}

.filter-group select {
    min-width: 200px;
}

.filter-group .btn {
    margin-left: 0.5rem;
}

#taak-col2 {
    width: 140px; /* Fixed width for the button column */
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
}

#taak-col2 > .btn {
    margin-bottom: 8px; /* Add spacing between vertically stacked buttons */
}

#taak-col2 > .btn:last-child {
    margin-bottom: 0; /* No margin after the last button */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    #taak-container {
        flex-direction: column;
    }
    #taak-col2 {
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
    }
}

/* Layout for two-column subscription overview */
.subscription-overview-container {
    display: flex;
    gap: 1.5rem; /* Space between columns */
    margin-bottom: 1.5rem; /* Consistent spacing after the container */
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
}

.subscription-panel {
    flex: 1; /* Each panel takes equal space */
    min-width: 300px; /* Minimum width before wrapping */
    background-color: var(--background-color); /* Use a slightly different background */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--box-shadow-color);
}

.subscription-panel h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.products-list-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .subscription-overview-container {
        flex-direction: column; /* Stack panels vertically */
    }

    

    .subscription-panel {
        min-width: unset; /* Remove min-width when stacked */
        width: 100%; /* Full width when stacked */
    }
}

/* --- Ad Overlay Styles --- */
#adManagerOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Dark transparent background */
    color: var(--text-color-dark); /* Light text on dark background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

#adManagerOverlay > div {
    max-width: 600px;
    padding: 20px;
    background-color: #333; /* Dark background for content box */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

#adManagerOverlayContent {
    margin-bottom: 15px;
    font-size: 1.1em;
    line-height: 1.4;
}

#adManagerCountdown {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--warning-color);
    margin-top: 10px;
}

#adManagerCloseBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--modal-close-color);
    display: none; /* Hidden by default */
}

#adManagerCloseBtn:hover {
    color: var(--modal-close-hover-color);
}