body {
    background-color: #0b1020;
    color: #e2e8f0;
}

:root {
    --bs-body-bg: #0b1020;
    --bs-body-color: #e2e8f0;
    --bs-emphasis-color: #f8fafc;
    --bs-tertiary-bg: #12213f;
    --bs-border-color: #2f4f7a;
    --bs-secondary-bg: #0f1b33;
}

.category {
    /*border: 1px solid red;*/
    /*margin: 2px;*/
}

h1 {
    color: black;
    background-color: grey;
    border: solid white 1px;
}

p {
    color: lightgrey;
}

a {
    color: lightgrey;
}

.tags {
    color: lightgrey;
}

label {
    color: lightgrey;
    padding-top: 20px;
}

input {
    color: #e2e8f0;
}

.topic-header{
    background-color: #1e3a8a;
}
.card .card-body{
    background-color: #0f1f3d;
}

/* Menu bar */
.navbar.bg-body-tertiary {
    background-color: #102347 !important;
    border: 1px solid #2f4f7a;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-toggler,
.navbar .navbar-text {
    color: #e2e8f0;
}

.navbar .nav-link:hover,
.navbar .navbar-brand:hover {
    color: #f8fafc;
}

.navbar .navbar-toggler {
    border-color: #60a5fa;
    color: #bfdbfe;
}

.navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(96, 165, 250, 0.35);
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28191, 219, 254, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Add/edit + confirmation dialogs */
.modal-content {
    background-color: #0f1b33;
    color: #e2e8f0;
    border: 1px solid #2f4f7a;
}

.modal-header,
.modal-footer {
    border-color: #2f4f7a;
}

.btn-close {
    filter: invert(1) grayscale(1);
}

/* Text fields + dropdowns */
.form-control,
.form-select,
textarea.form-control,
input.form-control {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #2f4f7a;
}

.form-control:focus,
.form-select:focus {
    background-color: #0f172a;
    color: #f8fafc;
    border-color: #60a5fa;
    box-shadow: 0 0 0 .25rem rgba(96, 165, 250, 0.25);
}

.form-control::placeholder {
    color: #94a3b8;
}

.form-floating > label {
    color: #94a3b8;
}


/* Keep checkbox label text aligned in form-check rows */
.form-check .form-check-label {
    padding-top: 0;
    vertical-align: middle;
}

.form-check .form-check-input {
    margin-top: 0.4em;
}

.dropdown-menu {
    background-color: #0f1b33;
    border-color: #2f4f7a;
}

.dropdown-item,
.dropdown-item-text {
    color: #e2e8f0;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #12213f;
    color: #f8fafc;
}

.dropdown-divider {
    border-color: #2f4f7a;
}



/* Autocomplete dropdowns (group/topic/tags) */
.tag-autocomplete-list {
    background-color: #0b1220;
    border: 1px solid #2f4f7a;
}

.tag-autocomplete-list .list-group-item {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #2f4f7a;
}

.tag-autocomplete-list .list-group-item:hover,
.tag-autocomplete-list .list-group-item:focus {
    background-color: #1e293b;
    color: #f8fafc;
}

.tag-autocomplete-list .list-group-item.active {
    background-color: rgba(13, 110, 253, 0.28);
    color: #eaf2ff;
    border-color: #0d6efd;
}

/* Tag labels shown after clicking "Show tags" */
.tag-item {
    background: #12213f;
    color: #e2e8f0;
    border: 1px solid #2f4f7a;
}

.tag-item:hover {
    background: #1d355f;
    color: #f8fafc;
}

.tag-item.selected {
    background: #1e40af;
    border-color: #3b82f6;
    color: #f8fafc;
}

.tag-item .badge {
    background: #1d355f !important;
    color: #f8fafc;
}

/* Grid table */
.table {
    --bs-table-bg: #0f172a;
    --bs-table-color: #e2e8f0;
    --bs-table-border-color: #2f4f7a;
    --bs-table-striped-bg: #1e293b;
    --bs-table-striped-color: #f8fafc;
    --bs-table-hover-bg: #12213f;
    --bs-table-hover-color: #f8fafc;
}

.table-light,
.table > :not(caption) > * > .table-light {
    --bs-table-bg: #12213f;
    --bs-table-color: #e2e8f0;
}
body.edit-mode {
    background: rgba(220, 53, 69, 0.04);
}

body.edit-mode .topic-card{
    --bs-card-bg: rgba(220, 53, 69, 0.04);
    --bs-card-border-color: rgba(220, 53, 69, 0.25);
}
body.edit-mode .topic-header {
    background-color: rgba(220, 53, 69, 0.18);
}

body.edit-mode .topic-header-link {
    color: #dc3545; /* bootstrap "danger" red */
}