/* Vema Voorraad - custom styles on top of Bootstrap 5 */

:root {
    --vema-primary: #0066A2;
    --vema-primary-dark: #00507f;
    --vema-primary-light: #e6f1f8;
}

/* Override Bootstrap primary */
.btn-primary,
.bg-primary {
    background-color: var(--vema-primary) !important;
    border-color: var(--vema-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--vema-primary-dark) !important;
    border-color: var(--vema-primary-dark) !important;
}
.text-primary  { color: var(--vema-primary) !important; }
.link-primary  { color: var(--vema-primary) !important; }
a              { color: var(--vema-primary); }
a:hover        { color: var(--vema-primary-dark); }

.navbar-brand-vema {
    font-weight: 700;
    letter-spacing: .5px;
}

/* Navbar polishing */
.app-navbar {
    padding-top: .35rem;
    padding-bottom: .35rem;
}
.app-navbar .navbar-nav { gap: .2rem; }
.app-navbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem .9rem;
    border-radius: 6px;
    color: rgba(255,255,255,.82) !important;
    transition: background-color .15s ease, color .15s ease;
}
.app-navbar .nav-link i { font-size: 1rem; line-height: 1; }
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    background: rgba(255,255,255,.10);
    color: #fff !important;
}
.app-navbar .nav-link.active {
    background: rgba(255,255,255,.18);
    color: #fff !important;
    font-weight: 500;
}
.app-navbar .user-area {
    gap: .5rem;
    padding-left: .5rem;
    border-left: 1px solid rgba(255,255,255,.18);
}
@media (max-width: 767.98px) {
    .app-navbar .user-area {
        border-left: 0;
        padding-left: 0;
        align-items: flex-start;
    }
}
.app-navbar .user-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: rgba(255,255,255,.85);
    font-size: .88rem;
    padding: .3rem .8rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.app-navbar .user-chip:hover,
.app-navbar .user-chip.active {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.app-navbar .user-chip i { font-size: 1.1rem; }
.app-navbar .nav-link-logout { color: rgba(255,255,255,.7) !important; }
.app-navbar .nav-link-logout:hover { color: #fff !important; background: rgba(255,255,255,.10); }

html { height: 100%; }
body {
    background: #f5f7fa;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main.container-fluid {
    max-width: 1800px;
    flex: 1 0 auto;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.card-section {
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    border: 1px solid #e6e8eb;
}
.card-section .card-header {
    background: #fafbfc;
    font-weight: 600;
    border-bottom: 1px solid #e6e8eb;
}

/* Scroll container so the header can stay pinned while scrolling the list */
.table-scroll {
    max-height: calc(100vh - 260px);
    min-height: 220px;            /* keeps things sane on very short viewports */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: .5rem;
}

/* Compact table for the trailer overview */
.table-overzicht thead th {
    position: -webkit-sticky;     /* Safari < 13 */
    position: sticky;
    top: 0;
    z-index: 3;
    background: #eef2f6;
    border-bottom: 2px solid #d8dde3;
    box-shadow: inset 0 -2px 0 #d8dde3;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #4a5560;
    white-space: nowrap;
    vertical-align: top;          /* lijnt Acties + Excel-knop met de labels van sorteerbare kolommen */
    padding-top: .6rem;
}

/* Clickable sortable column headers - label on top, arrow centred below */
.table-overzicht thead th .sort-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.table-overzicht thead th .sort-link:hover {
    color: var(--vema-primary);
}
.table-overzicht thead th .sort-arrow {
    font-size: .72rem;
    margin-top: 1px;
}
/* Hover op de cellen i.p.v. de rij: in Bootstrap 5 hebben td/th een eigen
   achtergrond (--bs-table-bg) die een achtergrond op de <tr> zou afdekken. */
.table-overzicht tbody tr > td,
.table-overzicht tbody tr > th {
    transition: background-color .12s ease;
}
.table-overzicht tbody tr:hover > td,
.table-overzicht tbody tr:hover > th {
    background-color: #dde9fb !important;
}
.table-overzicht tbody tr:hover {
    cursor: pointer;
}

/* Klikbare voorraadstatus-rij op het dashboard */
.status-row { position: relative; }
.status-row:hover { cursor: pointer; }
.table-overzicht td {
    vertical-align: middle;
    font-size: .9rem;
}

.status-pill {
    display: inline-block;
    padding: .25em .55em;
    border-radius: .375rem;
    font-size: .75rem;
    font-weight: 600;
}

.totals-row td {
    background: #eef2f6;
    font-weight: 600;
}
.totals-row-grand td {
    background: #dee5ec;
    font-weight: 700;
}

.form-label {
    font-weight: 600;
    font-size: .9rem;
    color: #2a3340;
}

.login-card {
    max-width: 420px;
    margin: 6rem auto 2rem;
}

footer.app-footer {
    color: #6a7380;
    font-size: .78rem;
    padding: .55rem 0;
    text-align: center;
    background: #fff;
    border-top: 1px solid #e6e8eb;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
}
footer.app-footer a {
    color: inherit;
    text-decoration: none;
}
footer.app-footer a:hover {
    color: var(--vema-primary);
}

/* Small visual touch for the search bar */
.search-bar {
    background: #fff;
    padding: .65rem .75rem;
    border-radius: .5rem;
    border: 1px solid #e6e8eb;
    margin-bottom: .75rem;
}

/* Public info page card */
.info-card {
    max-width: 560px;
    margin: 1rem auto;
}
.info-card dt { font-weight: 600; color: #4a5560; margin-bottom: .35rem; font-size: 1rem; }
.info-card dd { margin-bottom: .35rem; font-size: 1rem; }
.info-price {
    background: var(--vema-primary-light);
    border-radius: .5rem;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}
.info-price .price {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--vema-primary);
}

/* WhatsApp deel-knop op de publieke info-pagina */
.whatsapp-share {
    background-color: #25D366;
    border: 1px solid #1faa54;
    color: #fff;
    font-weight: 500;
    padding: .55rem 1rem;
}
.whatsapp-share:hover,
.whatsapp-share:focus {
    background-color: #1faa54;
    border-color: #1a8c45;
    color: #fff;
}
.whatsapp-share i { font-size: 1.15rem; vertical-align: -2px; margin-right: 4px; }