/* Page background */
body {
    background-color: #f4f6f9; /* light gray / blue tone */
    padding-top: 110px; /* default Bootstrap navbar height (56) plus second-bar */
}

/* Navbar customization */
.navbar {
    background-color: #3E2C40 !important; /* dark slate */
    z-index: 1050;
}

/* Navbar brand */
.navbar-brand {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.navbar-text {
  font-size: 0.95rem;
}

/* Navbar links */
.navbar-dark .navbar-nav .nav-link {
    color: #e5e7eb;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
}

/* Dropdown menu */
.dropdown-menu {
    border-radius: 0.5rem;
}

.second-bar {
    top: 56px;
    max-height: 43px;
    z-index: 1030; /* iets lager dan navbar (navbar is 1030–1040) */
    background-color: #e4e6f9;
    border-bottom: 1px solid #d0d0d0;
}

.second-bar > div {
    display: flex;
}

.second-bar h1 {
    font-size: 1.2em;
    white-space: nowrap;
    margin-right: 1em;
}

.subpage {
    padding: 1em 0;
}

.second-bar div#nav-record {
    font-size: 1.2em;
    margin-left: auto;
}
.second-bar div#nav-record a,
.second-bar div#nav-record a:visited {
  color: inherit;
  text-decoration: none;
}

.nav-record-btn {
    border: 0 none;
    padding: 0;
}
.nav-record-btn.disabled {
    opacity: 0.5;
}

.input-wrapper {
    position: relative; /* Lets us position the button inside */
}
.input-wrapper input {
    padding: 0 4px;
    width: 8em;
}
.clear-btn {
    /* Position the button inside the input */
    position: absolute;
    top: 50%; /* Vertically center */
    right: 0; /* 10px from the right edge */
    transform: translateY(-50%); /* Fine-tune vertical centering */

    /* Make it look like iPhone's "X" */
    background: none; /* No background */
    border: none; /* No border */
    color: #999; /* Light gray (iPhone uses this color) */
    font-size: 20px; /* Size of the "X" */
    cursor: pointer; /* Show a hand cursor on hover */

    /* Hide by default (we'll show it later when there's text) */
    display: none;
}
/* Optional: Darken the "X" on hover (like iPhone does) */
.clear-btn:hover {
    color: #333; /* Dark gray on hover */
}
/* Show the button when the input is NOT showing the placeholder (i.e., has text) */
.input-wrapper input:not(:placeholder-shown) + .clear-btn {
    display: block;
}
.input-wrapper select {
    width: 8em;
    height: 1.8em;
    background-color: white;
    border: 1px solid lightgray;
}

.show_details {
    text-decoration: none !important;
    color: black;
}

table.form-table th {
    white-space: nowrap;
}
table.form-table td input,
table.form-table td textarea {
    width: 100%;
}
table.form-table td input[data-provide='datepicker'] {
    width: 12em;
}


table.records-table {
    border-collapse: collapse;
    background-color: white;
}
table.records-table td {
    border: 1px solid lightgray;
    padding: 0.2em 0.4em;
}
table.records-table tr.has-open-remarks {
    background-color: LightGoldenRodYellow;
}

table.opmerking {
    margin-bottom: 5px;
    background-color: transparent;
    border: 1px solid gray;
}
table.opmerking td {
    border: 0px none;
    padding: 0 0.4em;
    color: gray;
}
table.opmerking tr:first-child td:first-child {
    border-right: 1px solid lightgray;
}
table.opmerking tr:first-child td:nth-child(2) {
    color: black;
    border-bottom: 1px solid lightgray;
    background-color: white;
    white-space: pre-line;
    padding: 0.3em 0.4em;
}
table.opmerkingen tr:first-child td:nth-child(2) div {
}

#opmerkingen input[disabled].btn {
    display:none;
}
#opmerkingen form {
    margin-bottom: 2em;
}
#opmerkingen textarea[disabled] {
    background-color: #fcfcfc;
}
.tab-content {
    padding-top: 0.6em;
}

form p {
    display: flex;
    flex-flow: row wrap;
    margin: 0.3em;
}
form p label {
    display: inline-block;
    width: 20em;
}

.tab-content .mb-3 {
    margin-bottom: 2px !important;
}

.login_area {
    max-width: 40em;
    margin: 0 auto;
    padding: 2em;
    border: 1px solid #3E2C40;
    border-radius: 1em;
}
.login_area input {
    min-width: 30em;
}