/* Applied instantly via inline head script before body renders — prevents dark-mode flash on navigation */
html.dark-mode-early,
html.dark-mode-early body {
  background-color: #0d1117;
  color: #e6edf3;
}

body {
  background-color: #D7D2CB;
  padding: 0 50px 50px;
  transition: background-color 0.3s, color 0.3s;
}

/* Top navbar — pull flush against the viewport edge, overriding body side padding */
.app-navbar {
  margin: 0 -50px 20px;
  background-color: #4b5563 !important;
}

body.dark-mode .app-navbar {
  background-color: #0d1117 !important;
}

/* Toolbar action buttons — solid grey in light mode, dark panel in dark mode */
.btn-action {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}
.btn-action:hover {
  background-color: #5a6268;
  border-color: #545b62;
  color: #fff;
}
body.dark-mode .btn-action {
  background-color: #21262d;
  border-color: #30363d;
  color: #cdd9e5;
}
body.dark-mode .btn-action:hover {
  background-color: #30363d;
  border-color: #8b949e;
  color: #e6edf3;
}

/* Dark mode palette */
body.dark-mode {
  background-color: #0d1117;
  color: #e6edf3;
}

body.dark-mode .breadcrumb {
  background-color: transparent;
}

body.dark-mode .breadcrumb-item.active {
  color: #8b949e;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
  color: #e6edf3;
}

body.dark-mode .text-muted {
  color: #8b949e !important;
}

body.dark-mode .btn-dark {
  background-color: #21262d;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark-mode .btn-dark:hover {
  background-color: #30363d;
  border-color: #8b949e;
}

body.dark-mode .btn-primary {
  background-color: #1f6feb;
  border-color: #1f6feb;
}

body.dark-mode .btn-warning {
  background-color: #9e6a03;
  border-color: #9e6a03;
  color: #e6edf3;
}

body.dark-mode .btn-secondary {
  background-color: #21262d;
  border-color: #30363d;
  color: #8b949e;
}

body.dark-mode .btn-info {
  background-color: #0e4429;
  border-color: #26a641;
  color: #4ade80;
}

/* Table dark mode — override Bootstrap's table-light and table-striped */
body.dark-mode .table {
  --bs-table-color: #e6edf3;
  --bs-table-bg: #0d1117;
  --bs-table-striped-bg: #161b22;
  --bs-table-striped-color: #e6edf3;
  --bs-table-hover-bg: #21262d;
  --bs-table-hover-color: #e6edf3;
  --bs-table-border-color: #30363d;
  color: #e6edf3;
  border-color: #30363d;
}

body.dark-mode .table td,
body.dark-mode .table th {
  border-color: #30363d;
}


/* Striped rows — subtle alternating shading */
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td,
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: #161b22 !important;
  color: #e6edf3 !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > td,
body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > th {
  background-color: #1c2128 !important;
  color: #e6edf3 !important;
}

body.dark-mode .table-hover > tbody > tr:hover > td,
body.dark-mode .table-hover > tbody > tr:hover > th {
  background-color: #2d333b !important;
  color: #e6edf3 !important;
}

/* Table header */
body.dark-mode .table thead th,
body.dark-mode thead.thead-dark th {
  background-color: #161b22 !important;
  color: #8b949e !important;
  border-color: #30363d !important;
}

/* Bootstrap-table sort icons */
body.dark-mode .table th .sortable::after,
body.dark-mode .table th .both::after {
  color: #8b949e;
}

body.dark-mode .link-dark {
  color: #58a6ff !important;
}

body.dark-mode a {
  color: #58a6ff;
}

body.dark-mode a:hover {
  color: #79c0ff;
}

body.dark-mode .modal-content {
  background-color: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark-mode .modal-header {
  border-color: #30363d;
}

body.dark-mode .form-check-label {
  color: #8b949e !important;
}

body.dark-mode .form-check-input {
  background-color: #21262d;
  border-color: #30363d;
}

body.dark-mode .form-check-input:checked {
  background-color: #238636;
  border-color: #238636;
}

body.dark-mode .recurring-item {
  border-bottom-color: rgba(48, 54, 61, 0.7) !important;
}

body.dark-mode .badge.bg-secondary {
  background-color: #30363d !important;
}

body.dark-mode .btn-link {
  color: #8b949e !important;
}

body.dark-mode .btn-link:hover {
  color: #58a6ff !important;
}

/* Bootstrap-table toolbar / search area */
body.dark-mode .fixed-table-toolbar,
body.dark-mode .fixed-table-pagination,
body.dark-mode .fixed-table-body,
body.dark-mode .fixed-table-loading,
body.dark-mode .bootstrap-table {
  background-color: #0d1117;
  color: #e6edf3;
}

body.dark-mode .fixed-table-container {
  background-color: #0d1117;
  border-color: #30363d;
}

body.dark-mode .fixed-table-toolbar .search input,
body.dark-mode .fixed-table-toolbar .search .input-group-text,
body.dark-mode .fixed-table-toolbar .columns .btn,
body.dark-mode .fixed-table-toolbar .columns .dropdown-menu {
  background-color: #21262d;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark-mode .fixed-table-toolbar .search input::placeholder {
  color: #8b949e;
}

body.dark-mode .fixed-table-pagination .page-link {
  background-color: #21262d;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark-mode .fixed-table-pagination .page-item.active .page-link {
  background-color: #1f6feb;
  border-color: #1f6feb;
}

/* Card */
body.dark-mode .card {
  background-color: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark-mode .card-body {
  background-color: #161b22;
}

/* Jumbotron */
body.dark-mode .jumbotron {
  background-color: #0d1117;
  color: #e6edf3;
}

/* Modal body text */
body.dark-mode .modal-body p,
body.dark-mode .modal-body label {
  color: #e6edf3;
}

/* Modal close button */
body.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Input group inside modals */
body.dark-mode .input-group-text {
  background-color: #21262d;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark-mode .form-check-label {
  color: #e6edf3 !important;
}

/* Text inputs */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
  background-color: #21262d;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus {
  background-color: #21262d;
  border-color: #58a6ff;
  color: #e6edf3;
  box-shadow: 0 0 0 0.2rem rgba(88,166,255,0.25);
}

/* Alert */
body.dark-mode .alert-info {
  background-color: #0e4429;
  border-color: #26a641;
  color: #4ade80;
}

/* Archived row highlight in dark mode */
body.dark-mode .table-striped > tbody > tr.table-warning > td,
body.dark-mode .table-striped > tbody > tr.table-warning > th,
body.dark-mode .table > tbody > tr.table-warning > td,
body.dark-mode .table > tbody > tr.table-warning > th {
  background-color: #1c1a00 !important;
  color: #8b949e !important;
}

body.dark-mode .table-hover > tbody > tr.table-warning:hover > td,
body.dark-mode .table-hover > tbody > tr.table-warning:hover > th {
  background-color: #252200 !important;
  color: #8b949e !important;
}

/* Archived badge */
body.dark-mode .badge.bg-warning {
  background-color: #9e6a03 !important;
  color: #e6edf3 !important;
}

/* btn-outline-secondary in dark mode */
body.dark-mode .btn-outline-secondary {
  color: #8b949e;
  border-color: #30363d;
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: #21262d;
  color: #e6edf3;
  border-color: #8b949e;
}

/* btn-outline-warning in dark mode */
body.dark-mode .btn-outline-warning {
  color: #e3b341;
  border-color: #e3b341;
}

body.dark-mode .btn-outline-warning:hover {
  background-color: #9e6a03;
  color: #e6edf3;
  border-color: #9e6a03;
}

/* btn-outline-danger in dark mode */
body.dark-mode .btn-outline-danger {
  color: #f85149;
  border-color: #f85149;
}

body.dark-mode .btn-outline-danger:hover {
  background-color: #b91c1c;
  color: #e6edf3;
  border-color: #b91c1c;
}

/* Accordion dark mode */
body.dark-mode .accordion-item {
  background-color: #161b22;
  border-color: #30363d;
}

body.dark-mode .accordion-button {
  background-color: #21262d;
  color: #e6edf3;
  border-color: #30363d;
}

body.dark-mode .accordion-button:not(.collapsed) {
  background-color: #2d333b;
  color: #e6edf3;
  box-shadow: none;
}

body.dark-mode .accordion-button::after {
  filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .accordion-body {
  background-color: #161b22;
}

/* Colour text utility (orange) */
.text-colour {
  color: #e67e22;
}

body.dark-mode .text-colour {
  color: #f0a04b;
}

body.dark-mode .text-secondary {
  color: #8b949e !important;
}

/* form-select dark mode */
body.dark-mode .form-select {
  background-color: #21262d;
  border-color: #30363d;
  color: #e6edf3;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

body.dark-mode .form-select:focus {
  border-color: #58a6ff;
  box-shadow: 0 0 0 0.2rem rgba(88,166,255,0.25);
}

/* card-header dark mode */
body.dark-mode .card-header {
  background-color: #21262d;
  border-bottom-color: #30363d;
  color: #cdd9e5;
}

/* Toast dark mode */
body.dark-mode .toast {
  background-color: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark-mode .toast-header {
  background-color: #21262d;
  border-bottom-color: #30363d;
  color: #e6edf3;
}

body.dark-mode .toast-body {
  background-color: #161b22;
  color: #e6edf3;
}

/* Dropdown dark mode */
body.dark-mode .dropdown-menu {
  background-color: #161b22;
  border-color: #30363d;
}

body.dark-mode .dropdown-item {
  color: #cdd9e5;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: #21262d;
  color: #e6edf3;
}

body.dark-mode .dropdown-header {
  color: #8b949e;
}

body.dark-mode .dropdown-divider {
  border-top-color: #30363d;
}

/* Tom Select dark mode */
body.dark-mode .ts-wrapper .ts-control,
body.dark-mode .ts-wrapper.ts-dark .ts-control {
  background-color: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark-mode .ts-wrapper .ts-dropdown,
body.dark-mode .ts-wrapper.ts-dark .ts-dropdown {
  background-color: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}

body.dark-mode .ts-wrapper .ts-dropdown .option,
body.dark-mode .ts-wrapper .ts-dropdown .optgroup-header {
  color: #cdd9e5;
}

body.dark-mode .ts-wrapper .ts-dropdown .option:hover,
body.dark-mode .ts-wrapper .ts-dropdown .option.active {
  background-color: #21262d;
  color: #e6edf3;
}

body.dark-mode .ts-wrapper .ts-dropdown .option.selected {
  background-color: #1f6feb;
  color: #fff;
}

body.dark-mode .ts-wrapper .ts-control input {
  color: #e6edf3;
}

body.dark-mode .ts-wrapper .ts-control input::placeholder {
  color: #8b949e;
}

/* Popover dark mode */
body.dark-mode .popover {
  background-color: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}
body.dark-mode .popover-header {
  background-color: #21262d;
  border-bottom-color: #30363d;
  color: #e6edf3;
}
body.dark-mode .popover-body {
  color: #cdd9e5;
}
body.dark-mode .popover .popover-arrow::before {
  border-color: transparent;
}
body.dark-mode .bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,
body.dark-mode .bs-popover-start>.popover-arrow::before {
  border-left-color: #30363d;
}
body.dark-mode .bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,
body.dark-mode .bs-popover-start>.popover-arrow::after {
  border-left-color: #161b22;
}
body.dark-mode .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,
body.dark-mode .bs-popover-end>.popover-arrow::before {
  border-right-color: #30363d;
}
body.dark-mode .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,
body.dark-mode .bs-popover-end>.popover-arrow::after {
  border-right-color: #161b22;
}
body.dark-mode .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,
body.dark-mode .bs-popover-top>.popover-arrow::before {
  border-top-color: #30363d;
}
body.dark-mode .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,
body.dark-mode .bs-popover-top>.popover-arrow::after {
  border-top-color: #161b22;
}
body.dark-mode .bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,
body.dark-mode .bs-popover-bottom>.popover-arrow::before {
  border-bottom-color: #30363d;
}
body.dark-mode .bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,
body.dark-mode .bs-popover-bottom>.popover-arrow::after {
  border-bottom-color: #161b22;
}