:root {
  /* Brand kleuren */
  --brand-primary: #166e89;
  --brand-yellow: #f4e067;
  --brand-purple: #c983b6;
  --brand-orange: #ef763a;
  --brand-green: #6f7f46;
  --brand-beige: #aa8557;

  /* Override Bootstrap primary */
  --bs-primary: #166e89;
  --bs-primary-rgb: 22, 110, 137;
  
  /* Override Bootstrap success with green */
  --bs-success: #6f7f46;
  --bs-success-rgb: 111, 127, 70;
}

/* Alert Success - Custom green theme */
.alert-success {
  background-color: #e8f0dd !important;
  border-color: #a8b896 !important;
  color: #4a5533 !important;
}

/* Alert Info - Custom Grace blue theme */
.alert-info {
  background-color: #e3f0f4 !important;
  border-color: #7fb3c7 !important;
  color: #0d4a5f !important;
}

/* Alert Warning - Subtiele oranje-gele variant */
.alert-warning {
  background-color: #fff3cd !important;
  border-color: #ffc107 !important;
  color: #856404 !important;
}

/* Badge Warning - Zachtere oranje tint met witte tekst */
.badge.bg-warning {
  background-color: #f0ad4e !important;
  color: #fff !important;
  border: 1px solid #ec971f !important;
}

/* Badge Info - Subtiele lichtblauwe variant (voor Exclusiviteit Gegeven) */
.badge.bg-info {
  background-color: #d4ebf2 !important;
  color: #0d4a5f !important;
  border: 1px solid #a8d5e3 !important;
}

/* Dark mode variables */
:root[data-bs-theme="dark"],
body.theme-dark,
@media (prefers-color-scheme: dark) {
  body:not(.theme-light) {
    --bs-body-bg: #121417;
    --bs-body-color: #e7eaee;
    --bs-border-color: #2a2f36;
    --bs-surface: #1b1f24;
    --bs-muted: #aeb4bb;
  }
}

/* Base styling */
body {
  font-family: var(--bs-body-font-family, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif);
  font-size: 15px;
}

/* Placeholder styling - lighter gray */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
  color: #c0c0c0;
  opacity: 1;
}

h1 {
  font-size: 1.8rem;
  font-weight: 600;
}

/* Tables */
.table th,
.table td {
  vertical-align: middle;
}

#todo-table tr.table-warning td {
  background-color: var(--bs-warning-bg-subtle) !important;
}

#todo-table tr.table-success td {
  background-color: var(--bs-success-bg-subtle) !important;
}

#todo-table tr.table-light td {
  background-color: #fefefe !important;
}

/* Table headers */
.table thead th {
  background-color: var(--bs-secondary-bg, #f1f3f5);
  color: var(--bs-secondary-color, #495057);
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
  padding: 0.75rem;
}

.table thead th a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.table thead th a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

.table thead th a .sort-icon {
  font-size: 0.8em;
  opacity: 0.6;
}

/* Table links gedempter */
.table td a {
  color: inherit;
  text-decoration: none;
}

.table td a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* Card links (zoals email in web_locationholder_registrations) */
.card a {
  color: inherit;
  text-decoration: none;
}

.card a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* Sticky table head */
.sticky-head th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-light, #f8f9fa);
}

/* Forms */
a.btn {
  text-decoration: none;
}

a.btn:hover {
  text-decoration: none;
}

.modal .form-control,
.modal .form-select {
  margin-bottom: 10px;
}

/* Form checks - brand color */
.form-check-input {
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-check-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .25rem rgba(22, 110, 137, .25);
}

.form-check-input:hover {
  border-color: #12576d;
}

/* Form switches */
.form-switch .form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.form-switch .form-check-input {
  cursor: pointer;
}

/* Inactive selects */
select[data-hidden],
option[data-hidden="1"] {
  opacity: .50;
}

/* Badges */
.badge {
  font-size: 0.85rem;
  padding: 0.5em 0.75em;
  font-weight: normal !important;
  opacity: 0.85;
}

#badge-total {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color);
}

#badge-open {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color);
}

#badge-bezig {
  background-color: var(--bs-warning-bg-subtle) !important;
  color: var(--bs-warning-text-emphasis);
}

#badge-klaar {
  background-color: var(--bs-success-bg-subtle) !important;
  color: var(--bs-success-text-emphasis);
}

/* Toast */
.toast {
  font-size: 0.9rem;
}

/* Modal */
.modal-footer {
  justify-content: space-between;
}

/* Search */
#search {
  max-width: 300px;
}

/* Custom buttons */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #12576d;
  border-color: #12576d;
  color: #fff;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  opacity: 0.65;
  cursor: not-allowed;
}

.btn-info {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.btn-info:hover {
  background-color: #12576d;
  border-color: #12576d;
}

.btn-outline-info {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background-color: transparent;
}

.btn-outline-info:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.btn-danger {
  background-color: #e06c75;
  border-color: #d9534f;
  color: #fff;
}

.btn-danger:hover {
  background-color: #c9302c;
  border-color: #ac2925;
}

.btn-outline-primary,
.btn-outline-success {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
  color: #fff;
}

/* Restore Bootstrap 5 default for btn-outline-danger */
.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

/* Force white background for button elements with outline classes (like anchor tags) */
button.btn-outline-primary,
button.btn-outline-secondary,
button.btn-outline-success,
button.btn-outline-danger,
button.btn-outline-info {
  background-color: #fff;
}

.btn-task {
  background-color: var(--brand-primary);
  color: #fff;
  border: none;
}

.btn-task:hover {
  background-color: #12576d;
  color: #fff;
}

.btn-edit {
  background-color: var(--brand-green);
  color: #fff;
  border: none;
}

.btn-edit:hover {
  background-color: #5c6939;
  color: #fff;
}

.btn-project {
  background-color: var(--brand-yellow);
  color: #333;
  border: none;
}

.btn-project:hover {
  background-color: #e6d557;
  color: #000;
}

.btn-delete {
  background-color: #cc4b4b;
  color: #fff;
  border: none;
}

.btn-delete:hover {
  background-color: #b93d3d;
  color: #fff;
}

.btn-confirm-delete {
  background-color: var(--bs-warning);
  color: #fff;
  border: none;
}

.btn-confirm-delete:hover {
  background-color: #ec971f;
  color: #fff;
}

/* Custom checkbox */
.custom-checkbox {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: var(--bs-secondary-bg);
  border-radius: 4px;
  border: 1px solid var(--bs-border-color);
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}

.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Brand color utilities */
.c-purple { color: var(--brand-purple); }
.c-blue { color: var(--brand-primary); }
.c-green { color: var(--brand-green); }

.bg-yellow { background: var(--brand-yellow); }
.bg-purple { background: var(--brand-purple); }
.bg-orange { background: var(--brand-orange); }
.bg-blue { background: var(--brand-primary); }
.bg-green { background: var(--brand-green); }
.bg-beige { background: var(--brand-beige); }

.button-yellow { background: var(--brand-yellow); }
.button-purple { background: var(--brand-purple); }
.button-orange { background: var(--brand-orange); }
.button-green { background: var(--brand-green); }
.button-dark { color: #ffffff; background: #000000; }

/* Tabs - oranje accent */
.nav-tabs .nav-link {
  color: var(--brand-orange);
  font-weight: 500;
}

.nav-tabs .nav-link:hover {
  color: var(--brand-purple);
}

.nav-tabs .nav-link.active {
  background-color: var(--brand-orange);
  color: #fff;
  border-color: var(--brand-orange) var(--brand-orange) transparent;
}

/* Breadcrumb */
.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 1rem;
}

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

.breadcrumb-item a:hover {
  color: var(--brand-orange);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--bs-body-color);
  font-weight: 600;
}

/* Pagination - groen accent */
.pagination .page-link {
  color: var(--brand-green);
  border-color: var(--brand-green);
}

.pagination .page-link:hover {
  background-color: var(--brand-green);
  color: #fff;
  border-color: var(--brand-green);
}

.pagination .active .page-link {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
}

/* Today highlight */
.today {
  border: 2px solid var(--brand-primary);
  box-shadow: 0 0 6px rgba(22, 110, 137, .35);
}

.today .card-header {
  color: var(--brand-primary);
  font-weight: 700;
}

.today-header {
  color: var(--brand-primary);
  font-weight: 700;
  background-color: rgba(22, 110, 137, 0.08);
}

/* Dark mode specifics */
@media (prefers-color-scheme: dark) {
  body:not(.theme-light) {
    background-color: #121417;
    color: #e7eaee;
  }

  body:not(.theme-light) h1 {
    color: #f1f3f5;
  }

  body:not(.theme-light) .card,
  body:not(.theme-light) .modal-content,
  body:not(.theme-light) .dropdown-menu {
    background-color: #1b1f24;
    color: #e7eaee;
    border-color: #2a2f36;
  }

  body:not(.theme-light) .card-header,
  body:not(.theme-light) .card-footer {
    background-color: #151a1f !important;
    border-color: #2a2f36 !important;
    color: #e7eaee !important;
  }

  body:not(.theme-light) .card .text-muted,
  body:not(.theme-light) .text-muted {
    color: #aeb4bb !important;
  }

  body:not(.theme-light) .card .bi,
  body:not(.theme-light) .card i.bi {
    opacity: 0.9;
  }

  body:not(.theme-light) .table {
    color: #e7eaee;
    --bs-table-color: #e7eaee;
    --bs-table-bg: #1b1f24;
    --bs-table-border-color: #2a2f36;
  }

  body:not(.theme-light) .table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: #171b20;
    color: #e7eaee;
  }

  body:not(.theme-light) .table-striped > tbody > tr:nth-of-type(even) {
    color: #e7eaee;
  }

  body:not(.theme-light) .table td,
  body:not(.theme-light) .table th {
    color: #e7eaee;
  }

  body:not(.theme-light) input.form-control,
  body:not(.theme-light) select.form-select,
  body:not(.theme-light) textarea.form-control {
    background-color: #0f1419;
    color: #e7eaee;
    border-color: #36414d;
  }

  body:not(.theme-light) .form-control::placeholder {
    color: #8a94a1;
  }

  body:not(.theme-light) .nav-tabs {
    border-bottom-color: #2a2f36;
  }

  body:not(.theme-light) .nav-tabs .nav-link.active {
    border-color: var(--brand-orange) var(--brand-orange) #1b1f24;
  }

  /* Navbar dark mode - visibility fixes */
  body:not(.theme-light) .navbar .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  body:not(.theme-light) .navbar .nav-link:hover {
    color: rgba(255, 255, 255, 1) !important;
  }

  body:not(.theme-light) .navbar .dropdown-menu {
    background-color: #1b1f24;
  }

  body:not(.theme-light) .navbar .dropdown-item {
    color: #e7eaee;
  }

  body:not(.theme-light) .navbar .dropdown-item:hover {
    background-color: #2a2f36;
    color: #fff;
  }

  body:not(.theme-light) .breadcrumb-item a:hover {
    color: var(--brand-yellow);
  }

  body:not(.theme-light) .breadcrumb-item.active {
    color: #cbd3db;
  }

  body:not(.theme-light) .pagination .page-link {
    background-color: #1b1f24;
  }

  body:not(.theme-light) .btn-outline-primary,
  body:not(.theme-light) .btn-outline-success {
    color: #cbd3db;
    border-color: #6c757d;
  }

  body:not(.theme-light) .btn-outline-primary:hover,
  body:not(.theme-light) .btn-outline-success:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
  }
  
  body:not(.theme-light) .btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
  }

  body:not(.theme-light) .btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
  }

  body:not(.theme-light) .toast {
    background-color: rgba(27, 31, 36, 0.95);
    backdrop-filter: blur(4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);
    color: #e7eaee;
    border-color: #2a2f36;
  }

  body:not(.theme-light) .modal-content {
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
  }

  body:not(.theme-light) #badge-total,
  body:not(.theme-light) #badge-open {
    background-color: #2a2f36 !important;
    color: #e0e3e7;
  }

  body:not(.theme-light) #badge-bezig {
    background-color: #b5972a !important;
    color: #fff3cd;
  }

  body:not(.theme-light) #badge-klaar {
    background-color: #3e6f46 !important;
    color: #d4edda;
  }
}

/* Manual dark mode: body.theme-dark - inherits from media query */
body.theme-dark {
  background-color: #121417;
  color: #e7eaee;
}

/* ============================================================================
   BUTTON ACTIVE/FOCUS STATES - Match button colors instead of blue
   ============================================================================ */

/* Warning button (yellow) - for Verzetten/Reschedule */
.btn-warning:active,
.btn-warning:focus,
.btn-warning.active {
  background-color: #d39e00 !important;
  border-color: #c69500 !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5) !important;
}

/* Danger button (red) - for Annuleren/Cancel */
.btn-danger:active,
.btn-danger:focus,
.btn-danger.active {
  background-color: #bb2d3b !important;
  border-color: #b02a37 !important;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5) !important;
}

/* Secondary button (gray) - for Sluiten/Close */
.btn-secondary {
  color: #fff !important;
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary.active {
  background-color: #565e64 !important;
  border-color: #51585e !important;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5) !important;
}

/* Primary button (teal) - for main actions */
.btn-primary:active,
.btn-primary:focus,
.btn-primary.active {
  background-color: #115569 !important;
  border-color: #0e4a5c !important;
  box-shadow: 0 0 0 0.25rem rgba(22, 110, 137, 0.5) !important;
}

/* Success button (green) - for positive actions */
.btn-success:active,
.btn-success:focus,
.btn-success.active {
  background-color: #5a6638 !important;
  border-color: #515d32 !important;
  box-shadow: 0 0 0 0.25rem rgba(111, 127, 70, 0.5) !important;
}

/* Planning navigation buttons - neutral gray hover/active states */
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary.active {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25) !important;
}

/* Week navigation arrow buttons */
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus,
.btn-outline-secondary.active {
  background-color: #5a6268 !important;
  border-color: #545b62 !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25) !important;
}

/* ============================================================================
   POPOVER WIDTHS - Custom width classes for help popovers
   ============================================================================ */

/* Standard Bootstrap popover width is ~276px (max-width) */
/* These classes override that for more content-rich popovers */

.popover-wide {
  max-width: 500px !important;
}

.popover-extra-wide {
  max-width: 650px !important;
}