/* Overgenomen uit styles/css/LDBAdmin.css en aangepast aan Bootstrap 5 */
@font-face {
    font-family: LDBAdminFont;
    src: url(../fonts/CenturyGothic.TTF);
}

:root {
    --ldb-dark: #002f51;
    --ldb-blue: #007cb4;
    --ldb-light: #4fa9d1;
}

html, body { height: 100%; }

body {
    font-family: 'Lucida Sans', Helvetica, Arial, Lucida, sans-serif;
    margin: 0;
    background-color: var(--ldb-light);
    font-size: 14px;
}

td { vertical-align: top; }

.ldb-shell { display: flex; min-height: 100vh; background-color: var(--ldb-dark); }

.ldb-nav {
    width: 11rem;
    flex: 0 0 11rem;
    color: white;
    padding: 10px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.ldb-logo { width: 8rem; margin: 0 auto 0.5rem; display: block; }

.ldb-copy { margin-top: auto; text-align: center; font-size: 0.75rem; padding-top: 1rem; }

.ldb-main { flex: 1 1 auto; background-color: var(--ldb-light); padding: 0 10px 20px; min-width: 0; }

.nav-button {
    display: block;
    margin: 6px 8px;
    padding: 5px;
    border: none;
    border-radius: 15px;
    box-shadow: 0 0 10px 3px rgba(0,0,0,0.2);
    background-color: var(--ldb-blue);
    color: #fff !important;
    font-size: 0.85rem;
    font-variant: small-caps;
    text-align: center;
    text-decoration: none;
    font-family: Helvetica, Arial, Lucida, sans-serif;
}
.nav-button:hover, .nav-button.active { background-color: var(--ldb-light); }

.title-button {
    display: block;
    margin: 15px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px 3px rgba(0,0,0,0.2);
    background-color: var(--ldb-blue);
    color: #fff;
    font-size: 28px;
    font-variant: small-caps;
    text-align: center;
    font-family: Helvetica, Arial, Lucida, sans-serif;
}

.select-button, .pdf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px 3px rgba(0,0,0,0.2);
    background-color: var(--ldb-blue);
    color: #fff !important;
    font-variant: small-caps;
    text-align: center;
    text-decoration: none;
    font-family: Helvetica, Arial, Lucida, sans-serif;
}
.pdf-button { width: 9rem; height: 7rem; font-size: 0.9rem; vertical-align: top; }
.pdf-button.disabled { opacity: .45; cursor: not-allowed; }

.ldb-panel { background: #fff; border-radius: 6px; padding: 15px; margin: 0 15px 15px; }

.titlerow, .titlerow > th, .titlerow > td { color: #fff !important; background-color: var(--ldb-light) !important; text-align: center; }
.titlehd { text-align: center; font-weight: bold; }
.subtitlerow, .subtitlerow > th, .subtitlerow > td { color: #000; background-color: rgba(79,169,209,0.5) !important; text-align: center; }
.subsubtitlerow, .subsubtitlerow > th, .subsubtitlerow > td { color: #000; background-color: rgba(79,169,209,0.25) !important; text-align: center; }

.annulatie, .annulatie > td { background-color: #f8c8c8 !important; color: #000 !important; font-weight: bold !important; }

.table-ldb { background: #fff; }
.table-ldb .form-control, .table-ldb .form-select { font-size: 0.85rem; padding: 2px 6px; }
.form-control-xs, .form-select-xs { font-size: 0.85rem; padding: 2px 6px; height: auto; }

.btn-xs { padding: 1px 6px; font-size: 0.8rem; line-height: 1.4; }
.btn-add { color: #fff; background-color: var(--ldb-blue); }
.btn-add:hover { color: #fff; background-color: var(--ldb-dark); }

.check-list label { display: block; font-weight: normal; }

.ldb-toolbar { display: flex; gap: .5rem; margin-top: .5rem; }

table.dataTable thead tr.dt-filter input { width: 100%; font-size: .8rem; padding: 1px 4px; }

.login-wrap { max-width: 380px; margin: 12vh auto 0; }
.start-logo { text-align: center; margin-top: 10vh; }
.start-logo img { max-height: 75vh; max-width: 100%; }

/* Lijsten: selectievelden en vinkjes per tabblad */
.lijsten .velden { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .75rem 0; }
.lijsten .velden select { width: auto; min-width: 12rem; max-width: 20rem; }
.lijsten h1.title-button { font-size: 1.1rem; display: block; text-align: center; margin: .5rem auto; max-width: 48rem; }
.vinkjes { margin: .75rem 0; }
.vinkjes .titlehd { margin-bottom: .35rem; }
.vinkjes label { font-size: .9rem; cursor: pointer; }

/* PDF-voorbeeld van lijsten */
.pdf-balk { position: sticky; top: 0; z-index: 5; background: var(--bs-body-bg, #fff); padding: .5rem; border-radius: .5rem; margin-bottom: .75rem; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.pdf-paginas { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-bottom: 2rem; }
.pdf-pagina { max-width: 100%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.pdf-pagina canvas { display: block; }

/* Detailvensters (panelen met .container/.container-xl): gecentreerd zoals de vroegere pop-ups.
   .ldb-panel zet marges van 15px, waardoor de automatische centrering van Bootstrap verdween op brede schermen. */
.ldb-panel[class*="container"] { margin-left: auto; margin-right: auto; }
.title-button:has(+ .ldb-panel.container) { max-width: 1320px; margin-left: auto; margin-right: auto; }
.title-button:has(+ .ldb-panel.container-xl) { max-width: 1320px; margin-left: auto; margin-right: auto; }

/* Tabbladen: alle tabs als tabje met rand en afgeronde bovenhoeken in de gewone tekstkleur;
   het actieve tabblad in LDB-blauw met witte letters. */
.nav-tabs { gap: 2px; }
.nav-tabs .nav-link {
    color: var(--bs-body-color);
    background-color: #f4f6f8;
    border: 1px solid var(--bs-border-color);
    border-bottom-color: transparent;
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--bs-body-color); background-color: #e3ebf1; border-color: var(--bs-border-color); border-bottom-color: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: var(--ldb-blue);
    border-color: var(--ldb-blue);
}

/* Tabbladen altijd op één lijn; past het niet, dan verschijnt een smalle horizontale schuifbalk. */
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.nav-tabs .nav-item { flex: 0 0 auto; }
.nav-tabs .nav-link { white-space: nowrap; padding: .4rem .75rem; }
/* Veel korte tabbladen (wagens bij Trein): compacter zodat ze op één lijn passen. */
.nav-tabs.nav-compact { gap: 1px; }
.nav-tabs.nav-compact .nav-link { padding: .3rem .4rem; font-size: .8rem; }
/* Trein: heen- en terugreis naast elkaar enkel als er plaats genoeg is voor alle wagentabbladen. */
.trein-kol { flex: 0 0 auto; width: 100%; }
@media (min-width: 1600px) { .trein-kol { width: 50%; } }/* Parameters: 18 tabbladen, nog iets kleiner zodat ze ook op een laptopscherm (1366 px) passen. */
.nav-tabs.nav-klein { gap: 0; }
.nav-tabs.nav-klein .nav-link { padding: .3rem .2rem; font-size: .75rem; }

/* Menu links: alle knoppen (links en de Logout-knop) even breed en gecentreerd in de kolom. */
.ldb-nav .nav-button { box-sizing: border-box; width: 9rem; margin: 6px auto; }
.ldb-nav form { display: flex; justify-content: center; }
/* Geen zichtbare schuifbalk in het menu (scrollen kan wel), anders staan de knoppen niet meer in het midden. */
.ldb-nav { scrollbar-width: none; }
.ldb-nav::-webkit-scrollbar { display: none; }
.ldb-nav form .nav-button { flex: 0 0 auto; }