body {
    margin: 0;
    padding-top: 0;
    background: #f2f6fc;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #1c3359;
}

.app-wrapper {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

#navigation {
    width: 250px;
    min-height: 100vh;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    margin: 0;
    border: 0;
    background: linear-gradient(180deg, #1d4b8f 0%, #132845 75%);
    box-shadow: 4px 0 24px rgba(13, 33, 62, 0.22);
    z-index: 1040;
}

#navigation .navigation-mobile-bar {
    display: none;
}

#navigation .navigation-mobile-bar-inner {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 0.9rem;
}

#navigation .navigation-mobile-toggle {
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    box-shadow: none;
}

#navigation .navigation-mobile-toggle:focus {
    box-shadow: none;
}

#navigation .navigation-mobile-toggle .navbar-toggler-icon {
    filter: invert(1);
}

#navigation .navigation-desktop {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#navigation .navigation-desktop-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 1rem 0.8rem 1.2rem;
}

#navigation .navigation-offcanvas {
    --bs-offcanvas-width: 100vw;
    width: 100vw;
    max-width: 100vw;
    background: linear-gradient(180deg, #143059 0%, #0e2340 100%);
    color: #fff;
}

#navigation .navigation-offcanvas-header {
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#navigation .navigation-offcanvas-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    height: 100%;
}

#navigation .navigation-offcanvas-bottom {
    margin-top: auto;
    padding-top: 1.25rem;
}

#navigation .navbar-header {
    padding: 1.2rem 1.1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

#navigation .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    margin: 0;
    text-decoration: none;
}

/* Logo met beeldmerk en tagline (wit op transparant, 720x157 voor retina). */
#navigation .navbar-brand .brand-logo {
    display: block;
    width: 100%;
    max-width: 170px;
    height: auto;
    margin-bottom: 10px;
}

#navigation .navbar-collapse {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 1rem 0.8rem 1.2rem;
}

#navigation .sidebar-nav {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation .sidebar-nav > li {
    float: none;
    width: 100%;
    margin-bottom: 0.4rem;
}

#navigation .sidebar-nav > li > a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.8rem 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#navigation .sidebar-nav > li > a i {
    width: 18px;
    text-align: center;
}

#navigation .sidebar-nav > li.active > a,
#navigation .sidebar-nav > li > a:hover {
    background: rgba(44, 130, 236, 0.95);
    color: #fff;
}

#navigation .sidebar-nav-bottom {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

#navigation .sidebar-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.62);
    font-size: 1rem;
    align-items: center;
    gap: 0.6rem;
}

#navigation .sidebar-footer i {
    font-size: 1.8rem;
}

.app-shell {
    margin-left: 250px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-bottom: 1px solid #dbe6f3;
    padding: 0.75rem 2rem;
}

.app-topbar-search {
    max-width: 520px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #d2deee;
    border-radius: 10px;
    background: #f9fbff;
    padding: 0 0.8rem;
}

.app-topbar-search i {
    color: #7f96bb;
}

.app-topbar-search .form-control {
    border: 0;
    box-shadow: none;
    background: transparent;
    color: #49648f;
}

.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar-icon {
    position: relative;
    color: #2e4a76;
}

.topbar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff2f49;
    position: absolute;
    right: -3px;
    top: 0;
}

.topbar-account {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    color: #2e4a76;
    text-decoration: none;
    font-weight: 600;
}

.topbar-account .fa-circle-user {
    font-size: 1.5rem;
}

.topbar-chevron {
    font-size: 0.75rem;
    color: #6f86ad;
}

.app-content {
    padding: 1.6rem 2rem 1.2rem;
    flex: 1 0 auto;
}

#footer {
    margin-left: 0;
    background: #fff;
    border-top: 1px solid #e3ebf5;
    color: #7189ac;
    font-size: 0.85rem;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 2rem;
}

#footer p {
    margin: 0;
}

#footer a {
    color: #3d5f95;
    text-decoration: none;
}

#footer a:hover {
    color: #1f7ae0;
    text-decoration: underline;
}

.footer-separator {
    margin: 0 0.35rem;
    color: #b9c7db;
}

.footer-version a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid #e3ebf5;
    border-radius: 999px;
    background: #f6f9fd;
    color: #4a6b9c;
}

.footer-version a:hover {
    text-decoration: none;
    border-color: #cfe0f5;
    color: #1f7ae0;
}

.details-row {
    display: none;
}

#modalDetails .details.well {
    margin-bottom: 0px !important;
}

.details-title {
    display: none;
}

.details {
    padding: 15px;
}

.details-image {
    width: 165px;
    margin-right: 15px;
}

.details-table {
    margin-bottom: 7px;
}

.details-table > tbody > tr > td {
    min-width:160px;
}

/* The title is lifted into the modal header, so hide the duplicate. */
.modal-body .details-title {
    display: none;
}


/* Details modal (reusable)
 *---------------------------------*/

.modal-details .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(13, 33, 62, 0.28);
    overflow: hidden;
}

.modal-details .modal-header {
    align-items: flex-start;
    background: #fff;
    border-bottom: 1px solid #eaf1fa;
    padding: 1.4rem 1.6rem 1.15rem;
    justify-content: space-between;
}

.modal-details .modal-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #16294a;
}

.modal-details .modal-title .details-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: #e8f2fd;
    color: #2b6cb8;
    font-size: 0.8rem;
    font-weight: 600;
}

.modal-details .modal-header .btn-close {
    margin: 0;
    opacity: 0.55;
}

.modal-details .modal-body {
    background: #fbfcfe;
    padding: 1.25rem 1.6rem;
}

.modal-details .modal-footer {
    background: #fff;
    border-top: 1px solid #eaf1fa;
    padding: 1rem 1.6rem;
}

.modal-details .modal-footer .btn {
    border-radius: 9px;
    border-color: #dbe6f4;
    color: #33507d;
    font-weight: 600;
    padding: 0.55rem 1.6rem;
}


/* Car details layout
 *---------------------------------*/

.car-details-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.car-details-photo {
    border-radius: 10px;
    overflow: hidden;
    background: #eef3fa;
    border: 1px solid #e6eef8;
    max-width: 200px;
    max-height: 200px;
    align-self: center;
    margin: 0 auto;
}

.car-details-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
}

.car-details-photo .map {
    width: 100%;
    height: 100%;
    min-height: 200px;
    min-width: 200px;
}

.car-details-specs {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0.9rem;
    background: #fff;
    border: 1px solid #e6eef8;
    border-radius: 10px;
}

.car-details-specs > li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid #f0f4fa;
}

.car-details-specs > li:last-child {
    border-bottom: 0;
}

.car-details-specs .spec-icon {
    flex: 0 0 auto;
    width: 34px;
    text-align: center;
    font-size: 1.25rem;
    color: #1d3764;
}

.car-details-specs .spec-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.car-details-specs .spec-label {
    font-size: 0.8rem;
    color: #8ba2c2;
}

.car-details-specs .spec-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #16294a;
}

.car-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.details-card {
    background: #fff;
    border: 1px solid #e6eef8;
    border-radius: 10px;
    padding: 1rem 1.1rem 0.75rem;
}

.details-card-wide {
    grid-column: 1 / -1;
}

.details-card > header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.details-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e8f2fd;
    color: #1f7ae0;
    font-size: 1.05rem;
}

.details-card > header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #16294a;
}

.details-card dl {
    margin: 0;
}

.details-card dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f2f6fb;
}

.details-card dl > div:last-child {
    border-bottom: 0;
}

.details-card dt {
    margin: 0;
    font-weight: 500;
    color: #7d97ba;
}

.details-card dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: #23405f;
}

@media (max-width: 767px) {
    .car-details-top,
    .car-details-grid {
        grid-template-columns: 1fr;
    }

    .car-details-photo img {
        min-height: 0;
    }
}

.hidden-container {
    display: none;
}

#groupBijtelling {
    display: none;
}

.toolbar {
    background: #f0f0f0;
    outline: none;
    border: solid 1px #ddd;
    margin-bottom: 20px;
    padding: 10px 10px;
}

.toolbar select,
.toolbar input[type=text] {
    /*width: 225px;*/
}


/* Profiel
 *---------------------------------*/

.profile-nav li{
    margin-right: 8px;
}

.profile-nav li:first-child{
    margin-right: 20px;
}

.profile-nav li a:hover{
    text-decoration: none;
}

.profile-nav li:not(.active) a h3{
    opacity: 0.6;
}

.profile-nav li:not(.active) a:hover h3{
    opacity: 1;
}

.profile-nav li.active{

}

.profile-nav h3{
    margin-bottom: 5px;
    color: #3071a9;
}


/* Dashboard
 *---------------------------------*/

#dashboard-main-chart {
    margin-top: -20px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid #e3e5e7;
    border-top: none;
    background: #f0f0f0;
}

.jvectormap-zoomout,
.jvectormap-zoomin {
    background-color: #3071a9;
    width: auto;
    height: auto;
    display: none;
}

#geo-table > tbody > tr > td:first-child{
    font-weight: bold;
}


.dashboard-post{
    color: #666;
    position: relative;
}
.dashboard-post header{
    padding: 6px 15px;
    /*border-bottom: 1px solid #ddd;*/
}
.dashboard-post header .icon{
    width: 14px;
    font-size: 17px;
    color: #000;
    position: absolute;
    top: 8px;
    left: 12px;
}
.dashboard-post header .title{
    margin-left: 24px;
    font-size: 15px;
}
.dashboard-post dl{
    margin: 0px;
}
.dashboard-post footer{
    border-top: 1px solid #ddd;
    padding: 8px 15px;
}

/* Verbruik
 *---------------------------------*/

#verbruikTable td{
    width: 150px;
}

.miniLineChartWrapper {
    padding: 5px;
    border: 1px solid #CECECE;
    opacity: 0.6;
    margin-bottom: 10px;
}

.miniLineChartWrapper:hover {
    opacity: 1;
    cursor: pointer;
}

.miniLineChartWrapper.active {
    opacity: 1;
}

.miniLineChartWrapper span {
    font-size: 18px;
    float: right;
}

.rit-create-map {
    height: 600px;
    width: 100%;
}

#privateKm{
    display: none;
}

.markerSelect{
    width: 225px;
}

.label.label-lg {
    font-size: 13px;
}

#google-maps-canvas {
    height: 350px;
}

.details.well {
    border-radius: 0px;
}
/* chrome */
.scroll::-webkit-scrollbar {
        width: 7px;
        height: 10px;
}
.scroll::-webkit-scrollbar-track {
        background-color: #333;
}
.scroll::-webkit-scrollbar-thumb:vertical {
        background-color: #666;
}
.scroll::-webkit-scrollbar-thumb:vertical:hover,
.scroll::-webkit-scrollbar-thumb:horizontal:hover {
        background: #428bca;
}
.scroll::-webkit-scrollbar-thumb:horizontal {
        background-color: #666;
}
        
/* IE */
.scroll{
    scrollbar-base-color: #666;
    scrollbar-3dlight-color: #333;
    scrollbar-highlight-color: #428bca;
    scrollbar-track-color: #333;
    scrollbar-arrow-color: #666;
    scrollbar-shadow-color: #333;
    scrollbar-darkshadow-color: #333;
}

.social-icon:hover {
    background: #3b5998;
}


#licensePlateRequest {
    min-height: 500px;
}

.options-table tbody tr td:last-child {
    /*min-width: 150px;*/
}

.table-options{
    margin-left: 15px;
}

#viewTypeToggle {
    margin-left: 10px;
}

/* Dashboard redesign */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.dashboard-header h1 {
    margin: 0;
    font-size: 2.7rem;
    color: #18345f;
}

.dashboard-header p {
    margin: 0;
    color: #647fa7;
    font-size: 1.05rem;
}

.dashboard-date {
    color: #5f7ba4;
    font-weight: 600;
    margin-top: 0.9rem;
}

/* Aankondiging nieuwe versie (Dashboard/Index) */

.release-announcement {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 1.5rem 1.75rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(31, 122, 224, 0.10), transparent 45%),
        radial-gradient(circle at 85% 110%, rgba(31, 122, 224, 0.07), transparent 40%),
        linear-gradient(135deg, #fbfdff 0%, #f1f6fd 100%);
    border: 1px solid #e2eaf5;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20, 48, 89, 0.05);
    color: #16294a;
}

.release-announcement-meta,
.release-announcement-heading,
.release-announcement-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.release-announcement-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: #1f7ae0;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.release-announcement-date {
    color: #5b7ba7;
    font-size: 0.88rem;
}

.release-announcement-heading {
    align-items: flex-start;
    margin-top: 0.9rem;
}

.release-announcement-heading h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    color: #132845;
}

.release-announcement-heading p {
    margin: 0.4rem 0 0;
    max-width: 48rem;
    color: #5b7ba7;
    font-size: 1.02rem;
}

.release-announcement-version {
    flex: 0 0 auto;
    padding: 0.4rem 0.9rem;
    border-radius: 12px;
    background: rgba(31, 122, 224, 0.10);
    color: #1f7ae0;
    font-size: 1.5rem;
    font-weight: 800;
}

.release-announcement-notes {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
}

.release-announcement-notes li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #2a3f63;
}

.release-announcement-notes li + li {
    margin-top: 0.55rem;
}

.release-announcement-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e3eefc;
    color: #1f7ae0;
    font-size: 0.75rem;
}

.release-announcement-actions {
    justify-content: flex-start;
    gap: 1.25rem;
    margin-top: 1.4rem;
}

.release-announcement-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.1rem;
    border-radius: 9px;
    background: #1f7ae0;
    border-color: #1f7ae0;
    font-weight: 600;
}

.release-announcement-hide {
    color: #1f7ae0;
    font-weight: 500;
}

@media (max-width: 575px) {
    .release-announcement {
        padding: 1.15rem;
    }

    .release-announcement-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .release-announcement-heading h2 {
        font-size: 1.5rem;
    }

    .release-announcement-version {
        font-size: 1.1rem;
    }

    .release-announcement-notes li {
        align-items: flex-start;
    }
}

.dashboard-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-hero-card,
.dashboard-quick-actions {
    background: #fff;
    border: 1px solid #dbe6f3;
    border-radius: 12px;
    padding: 1rem;
}

.dashboard-hero-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
}

.dashboard-hero-card .img-thumbnail {
    border-radius: 10px;
    border-color: #d3e1f2;
}

.dashboard-hero-details h2 {
    margin: 0;
    font-size: 2rem;
    color: #172f56;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.dashboard-hero-details h2 a {
    font-size: 1rem;
}

.dashboard-hero-details p {
    margin-bottom: 0.6rem;
    color: #647fa8;
}

/* Dutch license plate badge (reusable) */
.license-plate {
    display: inline-block;
    width: 90px;
    background: #ffc928;
    border: 2px solid #f0a92b;
    border-radius: 4px;
    color: #111;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dashboard-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 220px;
}

.dashboard-quick-actions .panel-header,
.dashboard-card .panel-header {
    background: transparent;
    color: #1d3764;
    border-bottom: 1px solid #e2ebf7;
    font-weight: 700;
    padding: 0 0 0.75rem;
    margin-bottom: 0.75rem;
}

.dashboard-quick-actions .list-group-item {
    color: #3d5f95;
    text-decoration: none;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    border: 0;
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}

.dashboard-quick-actions .list-group-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    color: #1f84ea;
}

.dashboard-quick-actions .list-group-item:hover {
    background: #f2f7fd;
    color: #1f5fb0;
}

.dashboard-card {
    border: 1px solid #dbe6f3;
    border-radius: 12px;
    box-shadow: none;
}

.dashboard-card .panel-body {
    padding-top: 0;
}

.panel-link {
    font-size: 0.9rem;
    text-decoration: none;
    color: #2f77e8;
}

.stat {
    border: 1px solid #e2ebf7;
    text-align: left;
    border-radius: 9px;
    margin-bottom: 0.75rem;
    background: #fff;
}

.stat .value {
    font-size: 2.2rem;
    white-space: nowrap;
    line-height: 1.3;
    color: #1970e2;
    font-weight: 700;
    background: transparent;
    padding: 1rem 1rem 0.2rem;
}

.stat .title {
    border-top: 0;
    background: transparent;
    color: #627ea6;
    padding: 0 1rem 1rem;
}

.card-header .fa-chart-simple {
    color: #1f7ae0;
    margin-right: 0.35rem;
}

.dashboard-hero-grid.wide-stats {
    grid-template-columns: minmax(0, 1fr) 400px;
}

.metric-row {
    display: flex;
    gap: 0.5rem;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border: 1px solid #e2ebf7;
    border-radius: 10px;
    padding: 0.6rem;
}

.metric-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f1fd;
    color: #2f6fed;
    font-size: 0.9rem;
}

.metric-body {
    min-width: 0;
}

.metric-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #7c8ba3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #16233f;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Table/chart segmented toggle */
.view-toggle {
    display: inline-flex;
    background: #eef2f8;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

.view-toggle-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border-radius: 7px;
    background: #fff;
    color: #8393ac;
    font-size: 0.95rem;
    cursor: pointer;
    margin: 0;
    user-select: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.view-toggle-option:hover {
    color: #1f7ae0;
}

.view-toggle-option.active {
    background: #2f6fed;
    color: #fff;
    box-shadow: 0 2px 5px rgba(31, 84, 179, 0.35);
}

.view-toggle-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.view-toggle-option a {
    display: none;
}

/* Chart metric nav list */
.chart-nav {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chart-nav li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    color: #5f7ba4;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.chart-nav li i:first-child {
    width: 16px;
    text-align: center;
    color: #8ea3c4;
}

.chart-nav li:hover {
    background: #f2f7fd;
}

.chart-nav li.active {
    background: #2f6fed;
    color: #fff;
    box-shadow: 0 2px 6px rgba(31, 84, 179, 0.3);
}

.chart-nav li.active i:first-child {
    color: #fff;
}

.chart-nav-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    display: none;
}

.chart-nav li.active .chart-nav-chevron {
    display: inline-block;
}

/* Chart stat callout */
.chart-stat {
    background: #eef4fc;
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.chart-stat-date {
    font-size: 0.78rem;
    color: #7c8ba3;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.chart-stat-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: #16233f;
    line-height: 1.2;
}

.chart-stat-trend {
    display: none;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.chart-stat-trend span {
    font-weight: 500;
    color: #7c8ba3;
    margin-left: 0.15rem;
}

.chart-stat-trend.trend-up {
    color: #16a34a;
}

.chart-stat-trend.trend-down {
    color: #dc2626;
}

/* Highcharts tooltip (useHTML) */
.chart-tooltip {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(20, 48, 89, 0.18);
    padding: 0.5rem 0.8rem;
    text-align: center;
    white-space: nowrap;
}

.chart-tooltip-date {
    font-size: 0.72rem;
    color: #7c8ba3;
    font-weight: 600;
}

.chart-tooltip-value {
    font-size: 0.95rem;
    color: #1970e2;
    font-weight: 700;
}

.fuel-trend-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    margin-left: 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
    vertical-align: middle;
}

.fuel-trend-better {
    color: #15803d;
    background: #eaf8ef;
}

.fuel-trend-worse {
    color: #dc2626;
    background: #feeff0;
}

.fuel-trend-average {
    color: #64748b;
    background: #eef2f7;
}

.fuel-trend-anomaly {
    color: #a16207;
    background: #fef6e4;
    cursor: help;
}

.dashboard-post {
    border-bottom: 1px solid #e7eef9;
    padding: 0.1rem 0;
}

.dashboard-post header {
    padding: 0.45rem 0;
}

.dashboard-post header .title {
    margin-left: 0.4rem;
    color: #385b8f;
    font-weight: 600;
}

.dashboard-post header .icon {
    position: static;
    color: #1f84ea;
}

.dashboard-post header small {
    color: #738aad;
}


.tab-pane .chart-wrapper {
    position: relative;
}

.chart-empty {
    position: absolute;
    top: 45%;
    left: 45%;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 999px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}

#ImageToCrop {
    width: 500px;
}

/* Rapporten (Views/Rapport/Index.cshtml): categorieën links, doorzoekbare rapportlijst rechts. */
.report-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.report-sidebar {
    position: sticky;
    top: 1rem;
}

.report-sidebar-card,
.report-content {
    background: #fff;
    padding: 1.1rem;
}

.report-sidebar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #16294a;
    margin: 0.25rem 0 1rem;
}

.report-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.report-nav-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid #e2ebf7;
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    color: #234166;
    background: #fff;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.report-nav-item > i {
    width: 24px;
    text-align: center;
    color: #1f7ae0;
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.report-nav-item > span:not(.report-nav-count) {
    flex: 1 1 auto;
    min-width: 0;
}

.report-nav-item strong {
    display: block;
    font-size: 0.92rem;
    color: #16294a;
}

.report-nav-item small {
    display: block;
    color: #5b7ba7;
    font-size: 0.8rem;
    line-height: 1.25;
}

.report-nav-count {
    min-width: 26px;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: #e8f1fd;
    color: #1f5fb8;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    flex: 0 0 auto;
}

.report-nav-item:hover {
    background: #f6f9fe;
    border-color: #cfe0f5;
    color: #234166;
}

.report-nav-item.active {
    background: #eef5fe;
    border-color: #b9d4f5;
}

.report-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.report-toolbar .report-search {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.report-list-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #16294a;
    margin: 0 0 0.15rem;
}

.report-list-header p {
    margin: 0 0 0.85rem;
    color: #5b7ba7;
    font-size: 0.9rem;
}

.report-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e8eef7;
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.report-item:hover {
    border-color: #cfe0f5;
    box-shadow: 0 2px 6px rgba(31, 84, 179, 0.06);
}

.report-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.report-icon-green { background: #e3f7ec; color: #1f9d5c; }
.report-icon-teal { background: #e0f5f5; color: #16928f; }
.report-icon-blue { background: #e6f0fd; color: #1f7ae0; }
.report-icon-purple { background: #efe9fc; color: #7a4fd6; }
.report-icon-red { background: #fde8ec; color: #d93a5a; }
.report-icon-pink { background: #fde8f1; color: #d63384; }
.report-icon-orange { background: #fff1e0; color: #e07b12; }
.report-icon-gray { background: #eef1f5; color: #5f6f86; }

.report-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.report-item-title {
    font-weight: 700;
    color: #16294a;
}

.report-item-text {
    color: #5b7ba7;
    font-size: 0.88rem;
}

.report-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.report-item-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 7px;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.4rem 0.9rem;
}

.report-favorite {
    border: 0;
    background: transparent;
    color: #9aabc3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
    transition: background-color .15s ease, color .15s ease;
}

.report-favorite:hover {
    color: #e6a700;
    background: #fff7d6;
}

.report-favorite.active {
    color: #f2b200;
}

.report-empty {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 0.9rem;
    color: #5b7ba7;
    border: 1px dashed #d6e2f1;
    border-radius: 10px;
}

.report-empty[hidden] {
    display: none;
}

@media (max-width: 1199px) {
    .report-layout {
        grid-template-columns: 1fr;
    }

    .report-sidebar {
        position: static;
    }

    .report-nav-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 767px) {
    .report-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .report-item {
        flex-wrap: wrap;
    }

    .report-item-body {
        flex-basis: calc(100% - 60px);
    }

    .report-item-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

#edit-pagination ul{
    margin-bottom: 0px;
    float: right;
}


/* Admin area
 *---------------------------------*/

.shortcut {
    text-align: center;
    padding: 10px 0px;
    color: #666 !important;
    background: #f0f0f0 !important;
}

.shortcut .value {
    font-size: 20px;
    color: #444;
    font-weight: bold;
}

.shortcut span {
    font-style: italic;
    font-size: 12px;
}

#releasenote-table {
    width: 100%;
    margin-left: -5px;
}


/* Todo list
 *---------------------------------*/

#todo {
    list-style-type: none;
    color: #666;
    max-height: 459px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid #ddd;
}

#todo.maintenance {
    max-height: none;
    overflow: auto;
}

#todo li {
    padding: 0px;
    position: relative;
    font-size: 15px;
    display: list-item;
    text-align: -webkit-match-parent;
}

#todo li.completed {
    opacity: 0.7;
}

#todo .header {
    background: rgba(0, 0, 0, 0.02);
    position: relative;
}

#todo .header .btn {
    border-radius: 0px;
    border-top: none;
    border-right: none;
}

#todo li input.date {
    border-radius: 0px;
    border: none;
    border-bottom: 1px solid #ccc;
    box-shadow: none;
    outline: none;
}

#todo li input.add {
    padding: 15px;
    border: none;
    box-shadow: none;
    font-size: 20px;
    outline: none;
    display: inline-block;
    color: #555;
    background: none;
    width: 100%;
    line-height: 25px;
}

#todo li .add-button {
    float: right;
    position: absolute;
    right: 10px;
    bottom: -3px;
    cursor: pointer;

    padding: 16px 20px;
    font-size: 20px;
}

#todo li .add-button:hover {
    color: #3071a9;
}

#todo li .add-button.disabled {
    opacity: 0.5;
} 

#todo li input.toggle {
    height: 40px;
    background: none;
    text-align: center;
    width: 40px;
    height: auto;
    position: absolute;
    top: 0px;
    bottom: 0;
    margin: auto 0;
    border: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    outline: none;
    cursor: pointer;
    border-right: 1px double #d9edf7;
    border-width: medium;
}

#todo li input.toggle:after {
    content: "✔";
    line-height: 43px;
    font-size: 20px;
    color: #d9d9d9;
    text-shadow: 0 -1px 0 #bfbfbf;
}

#todo li.completed input.toggle:after {
    color: #428bca;
}

#todo li label {
    white-space: pre;
    padding: 13px 60px 13px 13px;
    margin: 0px 55px 0px 45px;
    display: block;
    line-height: 1.2;
    font-weight: normal;
    text-wrap: normal;
    overflow: hidden;
    position: relative;
}

#todo li.empty label {
    margin-left: 0px;
}

#todo li:hover label {
    color: #3071a9;
}

#todo li.completed label,
#todo li.completed label span {
    text-decoration: line-through;
}

#todo li label .date {
    padding: 13px 13px 13px 0px;    
}

#todo li label .description {
    border-left: 1px double #d9edf7;
    border-width: medium;
    padding: 13px 13px 13px 13px;
    position: absolute;
    left: 140px;
    bottom: 0px;
}

#todo li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 22px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    color: #888;
}

#todo li .destroy:hover {
    color: #3071a9;
}

#todo-footer {
    color: #555;
    background: rgba(0, 0, 0, 0.02);
    padding: 10px;
}

#todo-footer .todo-amount {
    font-weight:bold;
    margin-left: 10px;
}


/* Todo list
 *---------------------------------*/

#recent-users {
    max-height: 260px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

#recent-users li {
    position: relative;
}

#recent-users .avatar img{
    height: 45px;
    opacity: 0.7;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

#recent-users .date {
    text-align: center;
    vertical-align: middle;
    width: 75px;
    border: 1px solid #ddd;
}

#recent-users .date-day,
#recent-users .date-month {
    position: relative;
    top: 3px;
    font-size: 16px;
    color: #666;
}

#recent-users .date-time {
    font-size: 12px;
    color: #888;
}

#recent-users .username {
    vertical-align: middle;
    padding: 0px 12px;
    border: 1px solid #ddd;
    border-left: 0px;
    color: #555;
}


/* Todo list
 *---------------------------------*/

#logs {
    max-height: 580px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0px;
    padding-bottom: 10px;
}

#logs .log-date {
    text-align: center;
    vertical-align: middle;
    width: 75px;
    border: 1px solid #ddd;
}

#logs .log-date-day,
#logs .log-date-month {
    font-size: 12px;
    position: relative;
    top: 3px;
    color: #888;
}

#logs .log-date-time {
    font-size: 18px;
    color: #666;
}

#logs .log-message {
    vertical-align: middle;
    padding: 0px 15px;
    border: 1px solid #ddd;
    border-left: 0px;
    color: #555;
}

#logs .log-message.Exception {
    background: #f2dede;
}

#logs .log-message.Info {
    background: #d9edf7;
} 

#logs .log-message .user {
    font-size: 11px;
    color: #888;
}


#mylist {
    max-height: 390px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0px;
    padding-bottom: 10px;
}

#mylist li {
    position: relative;
}

#mylist .date {
    text-align: center;
    vertical-align: middle;
    width: 75px;
    border: 1px solid #ddd;
}

#mylist .date-day {
    position: relative;
    top: 3px;
    font-size: 16px;
    color: #666;
}

#mylist .date-year {
    font-size: 12px;
    color: #888;
}

#mylist .message {
    vertical-align: middle;
    padding: 0px 15px;
    border: 1px solid #ddd;
    border-left: 0px;
    color: #555;
}

#mylist .message .description {
    font-size: 11px;
    color: #888;
}

#mylist li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 22px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    color: #888;
}

#mylist li .destroy:hover {
    color: #3071a9;
}

.user {
    cursor: pointer !important;
}

.user:hover {
    color: #3071a9 !important;
}

/* Media queries
 *---------------------------------*/


.facebook a {
    color: #3A599C;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

.facebook span {
    position: relative;
    top: 2px;
    left: 10px;
}

.facebook img {
    width: 35px;
}

#receiversPanel {
    min-height: 525px;
    max-height: 525px;
    overflow-y: scroll;
    font-size: 12px;
}

#receiversPanel li:first-child label {
    font-weight: bold !important;
}

#receiversPanel .checkbox{
    margin: 0px;
}


/* Design refinements (match reference design)
 *---------------------------------*/

#navigation {
    background: linear-gradient(180deg, #143059 0%, #0e2340 100%);
    box-shadow: 2px 0 18px rgba(10, 27, 51, 0.18);
}

#navigation .navbar-header {
    padding: 1.4rem 1.25rem 0;
    border-bottom: 0;
}

#navigation .navbar-collapse {
    padding: 0.5rem 0.9rem 1.2rem;
}

#navigation .sidebar-nav > li {
    margin-bottom: 0.15rem;
}

#navigation .sidebar-nav > li > a {
    padding: 0.72rem 1rem;
    border-radius: 8px;
    font-size: 0.98rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    gap: 0.9rem;
}

#navigation .sidebar-nav > li > a i {
    width: 20px;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
}

#navigation .sidebar-nav > li > a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

#navigation .sidebar-nav > li.active > a {
    background: #1f7ae0;
    color: #fff;
    box-shadow: 0 6px 14px rgba(31, 122, 224, 0.35);
}

#navigation .sidebar-nav > li.active > a i {
    color: #fff;
}

#navigation .sidebar-nav-bottom {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Uitloggen is een POST-formulier; de knop krijgt dezelfde look als de nav-links. */
#navigation .nav-logoff-form {
    margin: 0;
}

#navigation .nav-logoff-form button {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.72rem 1rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 0.98rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#navigation .nav-logoff-form button i {
    width: 20px;
    font-size: 1.05rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
}

#navigation .nav-logoff-form button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

#navigation .nav-logoff-form button:hover i {
    color: #fff;
}

/* Actieve auto: autokeuze bovenaan de sidebar (Views/Shared/Components/ActiveCarSelector)
 *---------------------------------*/

/* De keuze staat boven het hoofdmenu; het onderste menu blijft onderaan. */
#navigation .navigation-desktop-body,
#navigation .navigation-offcanvas-body {
    justify-content: flex-start;
}

#navigation .navigation-desktop-body > :last-child {
    margin-top: auto;
}

#navigation .active-car {
    margin-bottom: 1.1rem;
}

#navigation .active-car-label {
    padding: 0 0.3rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

#navigation .active-car-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#navigation .active-car-toggle:hover,
#navigation .active-car-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(66, 164, 255, 0.65);
}

#navigation .active-car-toggle:focus-visible {
    outline: 2px solid #42a4ff;
    outline-offset: 2px;
}

#navigation .active-car-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    background: #fff;
}

#navigation .active-car-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(66, 164, 255, 0.18);
    color: #42a4ff;
}

#navigation .active-car-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

#navigation .active-car-text strong {
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#navigation .active-car-text small {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.6);
}

#navigation .active-car-caret {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.2s ease;
}

#navigation .active-car-toggle[aria-expanded="true"] .active-car-caret {
    transform: rotate(180deg);
}

/* Het menu zelf is een lichte kaart, ook al staat hij in de donkere sidebar. */
#navigation .active-car-menu {
    min-width: 290px;
    max-width: calc(100vw - 2rem);
    padding: 0.4rem;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(13, 33, 62, 0.28);
}

#navigation .active-car-menu-header {
    margin-bottom: 0.3rem;
    padding: 0.55rem 0.7rem 0.6rem;
    border-bottom: 1px solid #e6ecf5;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1c3359;
}

#navigation .active-car-menu-list {
    max-height: min(60vh, 360px);
    overflow-y: auto;
}

#navigation .active-car-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.15rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    color: #1c3359;
    white-space: normal;
}

#navigation .active-car-option .active-car-thumb {
    background: #f2f6fc;
}

#navigation .active-car-option .active-car-text small {
    color: #6b7a99;
}

#navigation .active-car-option:hover,
#navigation .active-car-option:focus {
    background: #f2f6fc;
    color: #1c3359;
}

#navigation .active-car-option.active,
#navigation .active-car-option:active {
    background: #eaf3fe;
    color: #1c3359;
}

#navigation .active-car-check {
    color: #1f7ae0;
}

#navigation .active-car-menu .dropdown-divider {
    margin: 0.35rem 0.3rem;
    border-color: #e6ecf5;
}

#navigation .active-car-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-size: 0.92rem;
    color: #1c3359;
}

#navigation .active-car-link i {
    width: 18px;
    text-align: center;
    color: #54658a;
}

#navigation .active-car-link:hover,
#navigation .active-car-link:focus,
#navigation .active-car-link:active {
    background: #f2f6fc;
    color: #1c3359;
}

/* In het mobiele menu zo breed als de knop. */
#navigation .navigation-offcanvas .active-car-menu {
    width: 100%;
    max-width: none;
}

#navigation .sidebar-footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    line-height: 1.25;
    border-top: 0;
}

#navigation .sidebar-footer i {
    font-size: 2.4rem;
    color: rgba(255, 255, 255, 0.18);
    margin-bottom: 0.4rem;
}

.app-topbar {
    justify-content: flex-end;
    padding: 0.65rem 2rem;
    border-bottom: 1px solid #e3ebf5;
    box-shadow: 0 1px 2px rgba(20, 48, 89, 0.04);
}

.app-topbar-search {
    max-width: 420px;
    height: 38px;
    border-radius: 20px;
    border-color: #dde7f3;
    background: #fff;
    margin-right: auto;
    margin-left: auto;
}

.app-topbar-search .form-control {
    height: 36px;
    font-size: 0.9rem;
}

.app-topbar-actions {
    gap: 1.5rem;
}

.topbar-icon {
    font-size: 1.15rem;
    color: #33507e;
}

.topbar-account {
    font-size: 0.95rem;
}

.topbar-account .fa-circle-user {
    font-size: 1.7rem;
    color: #5b7ba7;
}

.dashboard-header h1 {
    font-size: 2.4rem;
    font-weight: 700;
}

.dashboard-hero-grid {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 1.1rem;
}

.dashboard-hero-card,
.dashboard-quick-actions,
.dashboard-card {
    border-color: #e2eaf5;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(20, 48, 89, 0.05);
}

.dashboard-hero-card .img-thumbnail {
    width: 175px;
    height: 118px;
    object-fit: cover;
    padding: 0;
}

.dashboard-hero-actions .btn {
    min-width: 200px;
    border-radius: 9px;
    font-weight: 600;
    padding: 0.6rem 1rem;
}

.dashboard-hero-actions .btn-primary {
    background: #1f7ae0;
    border-color: #1f7ae0;
}

.dashboard-hero-actions .btn-default {
    background: #e8f2fd;
    border-color: #d6e8fb;
    color: #2b6cb8;
}

.dashboard-quick-actions .panel-header,
.dashboard-quick-actions .card-header,
.dashboard-card .panel-header {
    font-size: 1.05rem;
    padding: 0.9rem 1.25rem;
    margin: 0;
    border-bottom: 1px solid #e6eef8;
}

.dashboard-quick-actions .card-header {
    background: transparent;
    color: #1d3764;
    font-weight: 700;
}

/* Kaarten op het dashboard (Dashboard/Index): blauw icoon in de kop en geen lijn onder de kop */
.dashboard-grid .dashboard-card .panel-header {
    border-bottom: 0;
}

.dashboard-grid .dashboard-card .panel-header > span > i {
    color: #2f6fed;
}

.dashboard-quick-actions .list-group-flush {
    padding: 0;
}

.dashboard-quick-actions {
    align-self: start;
    overflow: hidden;
    padding: 0;
    padding-bottom: 10px;
}

.dashboard-card .panel-body,
.dashboard-quick-actions .panel-body {
    padding: 1.15rem 1.25rem;
}

.dashboard-post {
    padding: 0;
    border-bottom: 1px solid #eef3fa;
}

.dashboard-post:last-child {
    border-bottom: 0;
}

.dashboard-post header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.25rem;
}

.dashboard-post header .icon {
    width: 22px;
    text-align: center;
    font-size: 1rem;
    color: #1f84ea;
}

.dashboard-post header .icon.log-icon-info {
    color: #1f84ea;
}

.dashboard-post header .icon.log-icon-error {
    color: #e08a1e;
}

.dashboard-post header .icon.log-icon-exception {
    color: #dc3545;
}

.dashboard-post header a {
    text-decoration: none;
}

.dashboard-post header a:hover .title {
    text-decoration: underline;
}

.dashboard-post header .title {
    margin-left: 0;
}

.dashboard-post header small {
    margin-left: auto;
    float: none !important;
    white-space: nowrap;
}

.dashboard-card .panel-body > .table {
    margin-bottom: 0;
}

.activity-period-picker .btn {
    min-width: 220px;
    justify-content: space-between;
    border-radius: 10px;
}

.activity-metric-row {
    gap: 0.85rem;
}

.activity-metric-card {
    align-items: stretch;
    padding: 0.95rem 1rem;
    gap: 0.85rem;
}

.activity-metric-card .metric-icon {
    width: 42px;
    height: 42px;
    font-size: 1rem;
}

.metric-icon.metric-accent-blue {
    background: #e8f1fd;
    color: #2f6fed;
}

.metric-icon.metric-accent-green {
    background: #e8f8f0;
    color: #18a06c;
}

.metric-icon.metric-accent-purple {
    background: #efeaff;
    color: #7c53e6;
}

.metric-icon.metric-accent-orange {
    background: #fff1e5;
    color: #f28b1a;
}

.activity-metric-card .metric-value {
    font-size: 1.9rem;
    line-height: 1.1;
}

.activity-metric-card .metric-label {
    font-size: 0.95rem;
}

.metric-delta {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.metric-delta small {
    font-size: 0.72rem;
    font-weight: 500;
    color: #7a899f;
}

.metric-delta.text-success {
    color: #18a06c !important;
}

.metric-delta.text-danger {
    color: #dc3545 !important;
}

/* Paginakop met acties rechts (periodekeuze + primaire knop), zie Verbruik/Index */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.period-picker {
    position: relative;
    margin: 0;
}

.period-picker > i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #5b7ba7;
    pointer-events: none;
}

.period-picker .form-select {
    min-width: 200px;
    padding: 0.65rem 2.25rem 0.65rem 2.4rem;
    border-radius: 9px;
    border-color: #dfe7f3;
    font-weight: 600;
    color: #16294a;
    box-shadow: 0 1px 2px rgba(22, 41, 74, 0.04);
}

/* KPI-tegels in de paginakop (Views/Shared/_KpiTiles.cshtml) */
.kpi-row {
    gap: 1rem;
}

.kpi-card {
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid #e8eef7;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(22, 41, 74, 0.05);
}

.kpi-card .metric-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 1.4rem;
}

.kpi-card .metric-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-card .metric-label {
    font-size: 0.8rem;
    color: #16294a;
    white-space: normal;
}

.kpi-card .metric-value {
    font-size: 1.5rem;
    color: #0f1f3d;
    line-height: 1.15;
    margin: 0.35rem 0 0.55rem;
}

.kpi-change-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.kpi-change {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-weight: 700;
}

.kpi-change-better {
    background: #e3f6ec;
    color: #138a5c;
}

.kpi-change-worse {
    background: #fdecee;
    color: #d0343f;
}

.kpi-change-neutral {
    background: #eef2f8;
    color: #5b7ba7;
}

.kpi-comparison {
    color: #7a899f;
}

.kpi-note {
    font-size: 0.85rem;
    color: #7a899f;
}

.kpi-note.text-danger {
    font-weight: 600;
}

.activity-main-card .panel-body {
    padding: 0;
}

.activity-data-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.activity-toolbar {
    padding: 1rem 1.25rem 0.9rem;
    gap: 1rem;
    align-items: flex-start;
}

.activity-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.activity-filter-group .form-select {
    width: auto;
    min-width: 155px;
}

.activity-table {
    width: 100%;
}

.activity-table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7f9b;
}

.activity-table tbody td {
    vertical-align: middle;
}

.activity-action-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: #17315b;
}

.activity-action-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef5ff;
    color: #1f7ae0;
    flex: 0 0 auto;
}

.activity-result {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.activity-result.result-success {
    background: #e8f8f0;
    color: #13865b;
}

.activity-result.result-warning {
    background: #fff5e8;
    color: #c87a10;
}

.activity-result.result-failed {
    background: #fde8ea;
    color: #c83c4b;
}

.activity-side-card .panel-body {
    padding: 0;
}

.activity-list-body {
    max-height: none;
}

.activity-side-item header {
    padding: 0.75rem 1.15rem;
}

.activity-side-copy {
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.activity-side-copy .title,
.activity-side-copy .muted {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-side-time {
    margin-left: auto;
}

.activity-link {
    font-size: 0.88rem;
    text-decoration: none;
    color: #1f7ae0;
    font-weight: 600;
}

.activity-link:hover {
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    .activity-toolbar {
        flex-direction: column;
    }

    .activity-filter-group {
        width: 100%;
    }

    .activity-filter-group .form-select {
        min-width: 0;
        flex: 1 1 180px;
    }

    .metric-delta {
        display: none;
    }
}

/* Kostenverdeling op het dashboard: donut met het totaal in het midden, legenda met bedragen rechts */
.cost-breakdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    padding: 0.75rem 0.5rem;
}

.cost-breakdown-chart {
    position: relative;
    flex: 0 0 auto;
    width: 240px;
    height: 240px;
}

.cost-donut-chart {
    width: 100%;
    height: 100%;
}

.cost-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.cost-donut-total {
    font-size: 1.6rem;
    font-weight: 700;
    color: #18345f;
    line-height: 1.2;
}

.cost-donut-label {
    font-size: 0.9rem;
    color: #647fa7;
}

.cost-breakdown-legend {
    flex: 1 1 280px;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cost-breakdown-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    border-radius: 8px;
    color: #274574;
    transition: background-color 0.15s ease;
}

.cost-breakdown-item:hover {
    background: #f2f7fd;
}

.cost-breakdown-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.cost-breakdown-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cost-breakdown-percent {
    min-width: 3rem;
    text-align: right;
    color: #274574;
}

.cost-breakdown-value {
    min-width: 5.5rem;
    text-align: right;
    font-weight: 600;
    color: #18345f;
    font-variant-numeric: tabular-nums;
}


/* Melding na een gebruikersactie op Admin/Users; verborgen via het hidden-attribuut (zie admin.js) */
.admin-user-status:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Tijdlijn: regels op Tijdlijn/Index en de kaart "Laatste activiteiten" (Views/Shared/_TimelineItem.cshtml) */
.timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline-list > li + li .timeline-item {
    border-top: 1px solid #eef3fa;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.9rem 0.5rem;
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.15s ease;
}

.timeline-item:hover,
.timeline-item:focus-visible {
    background: #f5f9fe;
    color: inherit;
}

.timeline-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.timeline-icon-blue { background: #e8f1fd; color: #2f6fed; }
.timeline-icon-purple { background: #efeaff; color: #7c53e6; }
.timeline-icon-green { background: #e8f8f0; color: #18a06c; }
.timeline-icon-red { background: #fdecef; color: #e0344e; }
.timeline-icon-orange { background: #fff1e5; color: #f28b1a; }
.timeline-icon-teal { background: #e3f6f7; color: #1596a3; }
.timeline-icon-slate { background: #edf1f6; color: #5b6f8c; }

.timeline-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.timeline-title {
    font-weight: 700;
    color: #18345f;
}

.timeline-meta {
    color: #647fa7;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-amount {
    flex: 0 0 auto;
    text-align: right;
    font-weight: 700;
    color: #18345f;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.timeline-amount small {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
    color: #647fa7;
}

.timeline-chevron {
    flex: 0 0 auto;
    align-self: center;
    color: #8aa0c0;
    font-size: 0.85rem;
}

/* Kaart "Laatste activiteiten" op het dashboard */
.activity-card .activity-card-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.activity-card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f1fd;
    font-size: 1.15rem;
}

.activity-card-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.activity-card-heading small {
    font-weight: 400;
    font-size: 0.85rem;
    color: #647fa7;
}

.activity-card-all {
    margin-left: auto;
    white-space: nowrap;
}

.activity-card-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem auto 0;
    padding: 0.65rem 1.25rem;
    max-width: 280px;
    border-radius: 10px;
    background: #eef4fd;
    color: #1f6fe5;
    font-weight: 600;
    text-decoration: none;
}

.activity-card-more:hover {
    background: #e1ecfb;
    color: #1f5fb0;
}

/* Tijdlijn/Index: filterknoppen per soort en maandkoppen */
.timeline-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.timeline-filter {
    padding: 0.35rem 0.95rem;
    border: 1px solid #d4e1f0;
    border-radius: 999px;
    background: #fff;
    color: #274574;
    font-size: 0.9rem;
    text-decoration: none;
}

.timeline-filter:hover {
    border-color: #9dbcec;
    color: #1f5fb0;
}

.timeline-filter.active {
    background: #1f6fe5;
    border-color: #1f6fe5;
    color: #fff;
}

.timeline-card {
    padding: 0.5rem 1.25rem 1rem;
}

/* Jaarkop op Tijdlijn/Index (het dashboard groepeert niet) */
.timeline-year-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 0.5rem 0.4rem;
    color: #647fa7;
    font-size: 0.9rem;
}

.timeline-year-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #18345f;
}

/* Tijdlijn/Index: de lijst is halve paginabreedte, maar niet smaller dan een regel nodig heeft. */
@media (min-width: 992px) {
    .timeline-filters,
    .timeline-card {
        max-width: max(540px, 50%);
    }
}

@media (max-width: 575.98px) {
    .timeline-item {
        gap: 0.75rem;
        padding: 0.8rem 0.25rem;
    }

    .timeline-chevron {
        display: none;
    }

    .activity-card-heading small {
        display: none;
    }
}

.monthly-cost-chart {
    width: 100%;
    height: 320px;
}

.fuel-consumption-chart {
    width: 100%;
    height: 240px;
}

/* Tegels onder de verbruiksgrafiek: gemiddeld, beste en slechtste maand */
.fuel-insight-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.fuel-insight-stat {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid #e6eef8;
    border-radius: 10px;
}

.fuel-insight-stat .metric-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fuel-insight-value {
    font-weight: 700;
    color: #18345f;
    line-height: 1.3;
}

.fuel-insight-label {
    font-size: 0.85rem;
    color: #647fa7;
    line-height: 1.3;
}

.metric-icon.metric-accent-red {
    background: #fdecec;
    color: #e0443e;
}

.monthly-cost-filter {
    width: auto;
    min-width: 9rem;
    border-color: #d4e1f0;
    border-radius: 9px;
    color: #274574;
}

.chart-empty-message {
    margin: 2.5rem 0;
    text-align: center;
}

.stat {
    border-color: #e6eef8;
}

.stat .value {
    font-size: 1.9rem;
}

.stat .title {
    font-size: 0.9rem;
}


/* Breadcrumb (reusable, app wide)
 * Works with the legacy <ol class="breadcrumb"><li>...</li></ol> markup
 * as well as Bootstrap 5 .breadcrumb-item markup.
 *---------------------------------*/

.breadcrumb {
    --bs-breadcrumb-divider: "";
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 0.9rem;
}

.breadcrumb > li,
.breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: #5b7ba7;
}

/* Chevron separator before every item except the first. */
.breadcrumb > li + li::before,
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.6rem;
    color: #a9bdd6;
    padding: 0 0.6rem;
    float: none;
    margin-right: 8px;
}

.breadcrumb > li > a,
.breadcrumb .breadcrumb-item > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    color: #5b7ba7;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.breadcrumb > li > a:hover,
.breadcrumb .breadcrumb-item > a:hover {
    background: #e9f1fb;
    color: #1f7ae0;
    text-decoration: none;
}

.breadcrumb > li > a:focus-visible,
.breadcrumb .breadcrumb-item > a:focus-visible {
    outline: 2px solid #9dc4ee;
    outline-offset: 1px;
}

/* Current page: not a link, so give it emphasis instead. */
.breadcrumb > li.active,
.breadcrumb .breadcrumb-item.active {
    color: #1d3764;
    font-weight: 600;
}

/* First crumb usually links home, prefix it with a house icon. */
.breadcrumb > li:first-child > a::before,
.breadcrumb .breadcrumb-item:first-child > a::before {
    content: "\f015";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.85rem;
}


/* Info callout (reusable)
 *---------------------------------*/

.info-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: #eaf3fd;
    border: 1px solid #d3e6fa;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}

.info-callout-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f7ae0;
    color: #fff;
    font-size: 0.95rem;
}

.info-callout-body {
    min-width: 0;
}

.info-callout-body h5 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 700;
    color: #16294a;
}

.info-callout-body > p {
    margin: 0 0 0.7rem;
    color: #45608c;
    font-size: 0.88rem;
}

.info-callout-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.info-callout-chip {
    background: #fff;
    border: 1px solid #c7dcf3;
    border-radius: 8px;
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1d3764;
}

.info-callout-note {
    margin: 0 0 0.3rem;
    font-size: 0.82rem;
    color: #4a6486;
}

.info-callout-note:last-child {
    margin-bottom: 0;
}

/* Import / export dropzone
 *---------------------------------*/

.import-dropzone {
    border: 2px dashed #d3e1f2;
    border-radius: 12px;
    padding: 1.75rem 1.25rem;
    background: #f8fbfe;
}

.import-dropzone .fa-file-lines {
    color: #9db6d6;
}

.import-dropzone select {
    max-width: 320px;
    margin: 0 auto;
}

/* Page header (reusable)
 *---------------------------------*/

.profile-navigation,
.admin-navigation {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2eaf5;
}

.profile-navigation .navbar,
.admin-navigation .navbar {
    background: transparent;
    border: 0;
    padding: 0;
    min-height: 0;
    border-radius: 0;
}

.profile-navigation .navbar .container-fluid,
.admin-navigation .navbar .container-fluid {
    padding: 0;
}

.profile-navigation .nav,
.admin-navigation .nav {
    display: flex;
    flex-direction: row;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-navigation .nav > li > a,
.admin-navigation .nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.1rem;
    color: #5b7ba7;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.profile-navigation .nav > li > a:hover,
.admin-navigation .nav > li > a:hover {
    color: #1f7ae0;
}

.profile-navigation .nav > li.active > a,
.admin-navigation .nav > li.active > a {
    color: #1f7ae0;
    border-bottom-color: #1f7ae0;
}

.page-header-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.page-header-bar h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: #16294a;
}

.page-header-bar p {
    margin: 0;
    color: #5b7ba7;
}

.page-header-bar .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9px;
    font-weight: 600;
    padding: 0.65rem 1.15rem;
    white-space: nowrap;
}

.page-header-bar .btn-primary {
    background: #1f7ae0;
    border-color: #1f7ae0;
}

.admin-summary-card .panel-body {
    padding-top: 1rem;
}

.admin-summary-row {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.admin-summary-row .metric-card {
    flex: 1 1 210px;
}

/* Instellingen (settings) page
 *---------------------------------*/

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.settings-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.settings-card {
    background: #fff;
    border: 1px solid #e2eaf5;
    border-radius: 14px;
    padding: 1.5rem;
}

.settings-card header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.settings-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: #eaf1fd;
    color: #1f7ae0;
    font-size: 1.05rem;
}

.settings-card header h5 {
    margin: 0 0 0.15rem;
    font-weight: 700;
    color: #16294a;
}

.settings-card header p {
    margin: 0;
    color: #5b7ba7;
    font-size: 0.85rem;
}

.option-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.option-tile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #e2eaf5;
    border-radius: 10px;
    padding: 0.75rem;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.option-tile input[type="radio"] {
    accent-color: #1f7ae0;
    margin: 0;
}

.option-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    background: #eef3fa;
    color: #5b7ba7;
}

.option-tile-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.option-tile-text strong {
    color: #16294a;
    font-size: 0.9rem;
}

.option-tile-text small {
    color: #5b7ba7;
    font-size: 0.78rem;
}

.option-tile.active {
    border-color: #1f7ae0;
    background: #eaf1fd;
}

.option-tile.active .option-tile-icon {
    background: #1f7ae0;
    color: #fff;
}

.settings-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eef3fa;
}

.settings-toggle-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.settings-toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    margin-top: 0.1rem;
}

.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-slider {
    position: absolute;
    inset: 0;
    background: #d7e2f3;
    border-radius: 999px;
    transition: background 0.15s ease;
    cursor: pointer;
}

.settings-toggle-slider:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.settings-toggle input:checked + .settings-toggle-slider {
    background: #1f7ae0;
}

.settings-toggle input:checked + .settings-toggle-slider:before {
    transform: translateX(18px);
}

.settings-toggle-text strong {
    display: block;
    color: #16294a;
    font-size: 0.9rem;
}

.settings-toggle-text small {
    color: #5b7ba7;
    font-size: 0.8rem;
}

.settings-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.settings-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9px;
    font-weight: 600;
    padding: 0.65rem 1.15rem;
}

.settings-actions .btn-primary {
    background: #1f7ae0;
    border-color: #1f7ae0;
    margin-left: auto;
}

@media (max-width: 991px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}


/* Account page
 *---------------------------------*/

.settings-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 720px;
}

.settings-card .input-group-text {
    background: #eef3fa;
    border-right: 0;
    color: #5b7ba7;
}

.settings-card .form-control-static {
    display: flex;
    align-items: center;
    margin: 0;
    background: #f6f9fd;
    color: #16294a;
    font-weight: 500;
}

.settings-card hr {
    border-color: #eef3fa;
    margin: 1.25rem 0;
}

.alert-info-soft {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #eaf1fd;
    color: #1f4e8c;
    border: 1px solid #d7e6fb;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.settings-actions-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.settings-actions-inline .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9px;
    font-weight: 600;
    padding: 0.65rem 1.15rem;
}

.settings-actions-inline .btn-primary {
    background: #1f7ae0;
    border-color: #1f7ae0;
}

.settings-card-danger {
    border-color: #f6d3d3;
}

.settings-card-icon-danger {
    background: #fbe7e7;
    color: #d64545;
}

/* Bevestigingsdialoog Account/Manage → Account/Delete */
.account-delete-modal .modal-content {
    border: 0;
    border-radius: 14px;
}

.account-delete-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #d64545;
}


/* Data panel + table (reusable)
 *---------------------------------*/

.data-panel {
    background: #fff;
    border: 1px solid #e2eaf5;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(20, 48, 89, 0.05);
    padding: 1rem;
}

.data-panel-search {
    position: relative;
    margin-bottom: 1rem;
}

.data-panel-search i {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    transform: translateY(-50%);
    color: #8ba2c2;
    pointer-events: none;
}

.data-panel-search input {
    height: 42px;
    padding-left: 2.4rem;
    border-radius: 9px;
    border: 1px solid #e2eaf5;
    background: #fff;
    box-shadow: none;
}

.data-panel-search input:focus {
    border-color: #9dc4ee;
    box-shadow: 0 0 0 3px rgba(31, 122, 224, 0.12);
    outline: none;
}

.data-panel-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.data-panel-toolbar .data-panel-search {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.data-panel-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Dezelfde toolbar boven de tabelkaart (Verbruik/Onderhoud/Ritten/Kosten): zoeken links, acties rechts. */
.page-toolbar .data-panel-search {
    flex: 0 1 460px;
}

.page-toolbar .data-panel-search input {
    height: 44px;
    border-color: #dfe7f3;
    box-shadow: 0 1px 2px rgba(22, 41, 74, 0.04);
}

.page-toolbar .data-panel-toolbar-actions {
    margin-left: auto;
}

/* Ritten/Index: declareren (knop actief na het aanvinken van ritten, zie ritten.js) */
.declaration-actions {
    gap: 0.75rem;
}

.declaration-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 44px;
    padding: 0 1rem;
    border-radius: 9px;
    font-weight: 600;
}

.declaration-actions .btn-outline-secondary {
    background: #fff;
    border-color: #dfe7f3;
    color: #274574;
}

.declaration-actions .btn-outline-secondary:hover {
    background: #f3f7fd;
    color: #16294a;
}

.declaration-actions .btn-primary:disabled {
    background: #c9d9ef;
    border-color: #c9d9ef;
    color: #fff;
    opacity: 1;
}

.ride-declared {
    color: #18a06c;
}

.declaration-hint {
    font-size: 0.85rem;
    color: #7a899f;
    white-space: normal;
    text-align: right;
}

.declaration-hint .btn-link {
    height: auto;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 0.35rem;
    vertical-align: baseline;
}

@media (max-width: 991px) {
    .page-toolbar {
        flex-wrap: wrap;
    }

    .page-toolbar .data-panel-search {
        flex-basis: 100%;
    }

    .declaration-actions {
        flex-wrap: wrap;
        margin-left: 0;
    }

    .declaration-hint {
        flex-basis: 100%;
        text-align: left;
    }
}

@media (max-width: 576px) {
    .data-panel-toolbar {
        flex-wrap: wrap;
    }

    .data-panel-toolbar .data-panel-search {
        flex-basis: 100%;
    }
}

table.data-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

table.data-table > thead > tr > th {
    background: #f7fafd;
    border-top: 1px solid #e6eef8;
    border-bottom: 1px solid #e6eef8;
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #5b7ba7;
    text-transform: none;
    white-space: nowrap;
}

table.data-table > thead > tr > th:first-child {
    border-left: 1px solid #e6eef8;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 0;
}

table.data-table > thead > tr > th:last-child {
    border-right: 1px solid #e6eef8;
    border-top-right-radius: 9px;
    text-align: right;
}

table.data-table > tbody > tr > td {
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid #eef3fa;
    vertical-align: middle;
    color: #253d63;
    box-shadow: none;
}

table.data-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

table.data-table > tbody > tr:hover > td {
    background: #f8fbff;
}

.data-table .data-table-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.data-table .data-table-thumb {
    width: 62px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2eaf5;
    background: #f2f6fc;
    flex: 0 0 auto;
}

.data-table .data-table-title a {
    color: #1f7ae0;
    font-weight: 600;
}

.data-table .data-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.data-table .data-table-actions .btn {
    border-radius: 8px;
    border: 1px solid #dbe6f4;
    background: #fff;
    color: #33507d;
    font-weight: 600;
    padding: 0.4rem 0.95rem;
}

.data-table .data-table-actions .btn:hover {
    background: #f2f7fd;
}

.data-table .data-table-actions .btn-icon {
    width: 38px;
    padding: 0.4rem 0;
    text-align: center;
}

.data-table .data-table-empty td,
.data-table > tbody > tr > td.dt-empty {
    padding: 2.25rem 0.9rem;
    text-align: center;
    color: #5b7ba7;
}

/* DataTables.net integration
 *---------------------------------*/

.data-panel .dt-container .dt-layout-row {
    margin: 0;
}

.data-panel .dt-container .dt-layout-row:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
}

.data-panel .dt-container .dt-info {
    color: #5b7ba7;
    font-size: 0.95rem;
    padding: 0;
    margin: 0;
}

.data-panel .dt-container .dt-paging .pagination {
    margin: 0;
    gap: 0.4rem;
}

.data-panel .dt-container .dt-paging .page-link {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #dbe6f4;
    background: #fff;
    color: #33507d;
    font-weight: 600;
}

.data-panel .dt-container .dt-paging .page-link:hover {
    background: #f2f7fd;
}

.data-panel .dt-container .dt-paging .page-item.active .page-link {
    background: #1f7ae0;
    border-color: #1f7ae0;
    color: #fff;
}

.data-panel .dt-container .dt-paging .page-item.disabled .page-link {
    opacity: 0.5;
    background: #fff;
    color: #33507d;
}

.data-table.dataTable > thead > tr > th {
    border-bottom: 1px solid #e6eef8;
}

.data-table.dataTable > thead > tr > th.dt-orderable-asc:hover,
.data-table.dataTable > thead > tr > th.dt-orderable-desc:hover {
    background: #eff5fc;
    outline: none;
}

.data-table-details {
    display: none;
}


/* Media queries
 *---------------------------------*/

@media (max-width: 1199px) {
    .dashboard-hero-grid,
    .dashboard-hero-grid.wide-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-card {
        grid-template-columns: auto 1fr;
    }

    .dashboard-hero-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 991px) {
    body {
        padding-top: 56px;
    }

    #navigation {
        width: 100%;
        min-height: 0;
        position: fixed;
        padding: 0;
        top: 0;
        bottom: auto;
        background: transparent;
        box-shadow: none;
        z-index: 1045;
    }

    #navigation .navigation-mobile-bar {
        display: block;
        background: linear-gradient(180deg, #132845 0%, #0e2340 100%);
        box-shadow: 0 2px 14px rgba(10, 27, 51, 0.18);
    }

    #navigation .navigation-mobile-bar-inner {
        min-height: 56px;
    }

    #navigation .navigation-desktop {
        display: none;
    }

    #navigation .navigation-mobile-toggle {
        margin-left: 0;
    }

    #navigation .navigation-offcanvas {
        --bs-offcanvas-width: 100vw;
        background: linear-gradient(180deg, #143059 0%, #0e2340 100%);
    }

    #navigation .navigation-offcanvas-body {
        padding: 1rem 1rem 1.5rem;
    }

    #navigation .navigation-offcanvas .sidebar-nav > li > a,
    #navigation .navigation-offcanvas .nav-logoff-form button {
        font-size: 1rem;
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }

    #navigation .navigation-offcanvas .sidebar-nav-bottom {
        margin-top: 1rem;
    }

    .app-shell,
    #footer {
        margin-left: 0;
    }

    .footer-inner {
        padding: 0.9rem 1rem;
    }

    .app-topbar {
        padding: 0.75rem 1rem;
    }

    .app-content {
        padding: 1rem;
    }

    .dashboard-header {
        flex-direction: column;
        gap: 0.4rem;
    }
}

@media (max-width: 767px), (max-height: 670px) {
    #feedback {
        display: none;
    }

    .toolbar .options {
        margin-top: 10px;
        float: left !important;
    }

    body {
        font-size: 16px !important;
    }

    .app-topbar-search {
        display: none;
    }

    .dashboard-hero-card {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-actions .btn {
        min-width: 0;
        width: 100%;
    }

    .page-header-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-actions > * {
        flex: 1 1 100%;
    }

    .period-picker .form-select {
        width: 100%;
    }

    .data-panel {
        padding: 0.75rem;
    }

    table.data-table thead {
        display: none;
    }

    /* Elke cel een regel: het label (data-label) links, de waarde rechts. Flex, zodat de uitlijning van de
       kolom (text-center/text-end, met !important) de waarde niet uit het midden of naar links trekt. */
    table.data-table > tbody > tr > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 0;
        padding: 0.3rem 0.5rem;
    }

    table.data-table > tbody > tr {
        display: block;
        border-bottom: 1px solid #eef3fa;
        padding: 0.6rem 0;
    }

    table.data-table > tbody > tr > td[data-label]:before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.8rem;
        color: #5b7ba7;
    }

    /* Cellen met alleen een knop of icoon (bv. "Acties") hoeven geen hele regel. */
    .data-table .data-table-actions {
        justify-content: flex-end;
    }
}

/* Entry forms (Nieuw / Wijzig)
 *---------------------------------*/

.entry-form {
    display: block;
    margin-bottom: 2rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.form-grid-single {
    grid-template-columns: minmax(0, 720px);
}

.form-card {
    background: #fff;
    border: 1px solid #e2eaf5;
    border-radius: 14px;
    padding: 1.5rem;
    min-width: 0;
}

.form-card-wide {
    grid-column: 1 / -1;
}

/* Formulier links onder elkaar, bijlagevoorbeeld rechts (Verbruik/Nieuw en Wijzig).
 * Het voorbeeld staat in de markup direct na de eerste kaart, zodat het op smalle
 * schermen onder het bestandsveld komt. */

.form-grid-preview > .form-card {
    grid-column: 1;
}

.form-grid-preview > .attachment-preview {
    grid-column: 2;
    grid-row: 1 / span 3; /* de drie formulierkaarten */
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
}

.attachment-preview > header {
    align-items: center;
}

.attachment-preview > header > div {
    flex: 1 1 auto;
    min-width: 0;
}

.attachment-preview-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-preview-open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9px;
    white-space: nowrap;
}

.attachment-preview-open[hidden] {
    display: none;
}

.attachment-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    border-radius: 10px;
    background: #f4f7fc;
    overflow: hidden;
}

.attachment-preview-frame {
    width: 100%;
    height: calc(100vh - 10rem);
    min-height: 420px;
    border: 0;
    background: #fff;
}

.attachment-preview-image {
    display: block;
    width: 100%;
    max-height: calc(100vh - 10rem);
    object-fit: contain;
}

.attachment-preview-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 320px;
    padding: 2rem 1.5rem;
    border: 2px dashed #d5e1f1;
    border-radius: 10px;
    color: #5b7ba7;
    font-size: 0.9rem;
    text-align: center;
}

.attachment-preview-empty > i {
    font-size: 2.25rem;
    color: #a9bfdd;
}

.attachment-preview-empty p {
    margin: 0;
    max-width: 320px;
}

.form-card > header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.form-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: #eaf1fd;
    color: #1f7ae0;
    font-size: 1.05rem;
}

.form-card > header h5 {
    margin: 0 0 0.15rem;
    font-weight: 700;
    color: #16294a;
}

.form-card > header p {
    margin: 0;
    color: #5b7ba7;
    font-size: 0.85rem;
}

.form-card .form-group {
    margin-bottom: 1rem;
}

.form-card .form-group:last-child {
    margin-bottom: 0;
}

.form-card .control-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: #16294a;
}

.form-card .form-control,
.form-card .form-select {
    border-color: #d7e2f3;
    border-radius: 9px;
    padding: 0.55rem 0.75rem;
    color: #16294a;
}

.form-card .form-control:focus,
.form-card .form-select:focus {
    border-color: #1f7ae0;
    box-shadow: 0 0 0 3px rgba(31, 122, 224, 0.12);
}

.form-card .form-control[readonly] {
    background: #f6f9fd;
    color: #5b7ba7;
}

.form-card .form-control-static {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    background: #f6f9fd;
    color: #16294a;
    font-weight: 500;
    height: auto;
}

.form-card textarea.form-control {
    min-height: 6rem;
}

.form-card .input-group-text {
    background: #eef3fa;
    border-color: #d7e2f3;
    color: #5b7ba7;
    font-size: 0.85rem;
}

.form-card .input-group > .form-control {
    min-width: 0;
}

.form-hint {
    display: block;
    margin-top: 0.35rem;
    line-height: 1.35;
    font-size: 0.8rem;
    color: #5b7ba7;
}

.form-required {
    color: #d64545;
    margin-left: 0.2rem;
}

/* Validation */

.form-card .input-validation-error {
    border-color: #d64545;
}

.form-card .input-validation-error:focus {
    box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12);
}

.field-validation-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #d64545;
}

.field-validation-valid {
    display: none;
}

.form-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: #fbe7e7;
    color: #92303a;
    border: 1px solid #f6d3d3;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.form-alert-icon {
    color: #d64545;
    margin-top: 0.1rem;
}

.form-alert ul {
    margin: 0.35rem 0 0;
    padding-left: 0;
    list-style: none;
}

.form-alert ul li + li {
    margin-top: 0.15rem;
}

.form-alert strong {
    display: block;
}

/* Toggle rows (checkbox with description) */

.form-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    border: 1px solid #e2eaf5;
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    background: #f9fbfe;
}

.form-check-row .form-check-input {
    margin: 0.15rem 0 0;
    flex: 0 0 auto;
}

.form-check-row .form-check-input:checked {
    background-color: #1f7ae0;
    border-color: #1f7ae0;
}

.form-check-text strong {
    display: block;
    color: #16294a;
    font-size: 0.88rem;
    font-weight: 600;
}

.form-check-text .form-hint {
    margin-top: 0.1rem;
}

/* File picker */

.form-file {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.form-file .btn-file {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 9px;
    flex: 0 0 auto;
}

.form-file .btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    cursor: pointer;
    display: block;
}

.form-file .form-control {
    flex: 1 1 auto;
}

/* Tankbon scannen (verbruik.js, initializeReceiptScan) */

.scan-action {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #d7e2f3;
}

.scan-action .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    border-radius: 9px;
    font-weight: 600;
}

.scan-action .form-hint {
    margin-top: 0.15rem;
}

@media (max-width: 575px) {
    .scan-action {
        flex-direction: column;
    }
}

.scan-status {
    margin-top: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d7e2f3;
    border-radius: 10px;
    background: #f6f9fd;
    color: #16294a;
    font-size: 0.88rem;
}

.scan-status p {
    margin: 0;
}

.scan-status p > i {
    margin-right: 0.35rem;
}

.scan-status-loading {
    color: #5b7ba7;
}

.scan-status-success {
    border-color: #cfe8d7;
    background: #eef8f1;
    color: #1f6b3a;
}

.scan-status-error {
    border-color: #f6d3d3;
    background: #fbe7e7;
    color: #92303a;
}

.scan-status-warnings {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    color: #8a5a00;
}

.scan-status-warnings li + li {
    margin-top: 0.2rem;
}

.form-card .form-control.scan-filled,
.form-card .form-select.scan-filled {
    border-color: #7fb2ee;
    background-color: #eef5fe;
}

/* Autocomplete (wwwroot/js/custom/autocomplete.js) */

.autocomplete {
    position: relative;
}

.autocomplete-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 17rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: #fff;
    border: 1px solid #d7e2f3;
    border-radius: 9px;
    box-shadow: 0 12px 28px rgba(22, 41, 74, 0.12);
}

.autocomplete-option {
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    color: #16294a;
    font-size: 0.9rem;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.autocomplete-option strong {
    font-weight: 700;
}

.autocomplete-option:hover,
.autocomplete-option.active {
    background: #eaf1fd;
}

.autocomplete-option.active {
    color: #1f7ae0;
}

/* Type toggle (segmented radio group) */

.form-segments {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.form-segment {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e2eaf5;
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    background: #fff;
    color: #16294a;
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.form-segment input[type="radio"] {
    accent-color: #1f7ae0;
    margin: 0;
}

.form-segment:hover {
    border-color: #bcd4f2;
}

.form-segment.active {
    border-color: #1f7ae0;
    background: #eaf1fd;
    color: #1f4e8c;
}

/* Parts editor (Onderhoud) */

.parts-table-wrapper {
    overflow-x: auto;
}

table.parts-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0 0.4rem;
}

table.parts-table > thead > tr > th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5b7ba7;
    padding: 0 0.35rem 0.25rem;
    border: 0;
    white-space: nowrap;
}

table.parts-table > tbody > tr > td {
    padding: 0 0.35rem;
    border: 0;
    vertical-align: middle;
}

table.parts-table .parts-col-amount {
    width: 6.5rem;
}

table.parts-table .parts-col-price {
    width: 9.5rem;
}

table.parts-table .parts-col-actions {
    width: 3rem;
}

.btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f7ae0;
    text-decoration: none;
}

.btn-add-row:hover {
    text-decoration: underline;
}

/* Action bar */

.form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #e2eaf5;
    border-radius: 14px;
}

.form-actions .form-actions-note {
    margin: 0;
    color: #5b7ba7;
    font-size: 0.85rem;
}

.form-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9px;
    font-weight: 600;
    padding: 0.65rem 1.15rem;
}

.form-actions .btn-primary {
    background: #1f7ae0;
    border-color: #1f7ae0;
}

.form-actions .btn-cancel {
    margin-left: auto;
}

/* Record stepper (previous / next on edit pages) */

.record-stepper {
    display: inline-flex;
    gap: 0.35rem;
}

.record-stepper .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.record-stepper .btn.disabled {
    pointer-events: none;
    opacity: 0.45;
}

@media (max-width: 991px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    /* Het voorbeeld is alleen nuttig naast het formulier; in één kolom verbergen. */
    .form-grid-preview > .attachment-preview {
        display: none;
    }

    .form-card {
        padding: 1.15rem;
    }

    .form-actions {
        padding: 0.85rem 1rem;
    }

    .form-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .form-actions .form-actions-note {
        flex: 1 1 100%;
        order: 3;
    }

    .form-actions .btn-cancel {
        margin-left: 0;
    }
}

@media (max-width: 499px) {
    #edit-pagination ul {
        float: left;
    }
}

/* Gecentreerde berichtkaart: onboarding (Home/RegistreerAuto) en de foutpagina */
.message-panel {
    max-width: 640px;
    margin: 0 auto;
    padding: 2.25rem;
    background: #fff;
    border: 1px solid #e1e9f5;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(20, 40, 80, 0.07);
    text-align: center;
}

.message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: #eaf1fd;
    color: #1f7ae0;
    font-size: 1.6rem;
}

.message-icon.is-error {
    background: #fdeceb;
    color: #c0392b;
}

.message-meta code {
    color: inherit;
    background: transparent;
    padding: 0;
    font-size: inherit;
}

.message-meta {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #eef3fa;
    color: #8a9cb8;
    font-size: 0.8rem;
    word-break: break-all;
}

.message-panel h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #16294a;
    margin: 0 0 0.6rem;
}

.message-intro {
    color: #5b7ba7;
    margin: 0 auto 1.75rem;
    max-width: 32rem;
}

.onboarding-steps {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    text-align: left;
}

.onboarding-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.85rem 0;
    border-top: 1px solid #eef3fa;
}

.onboarding-steps li:first-child {
    border-top: 0;
}

.onboarding-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #1f7ae0;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}

.onboarding-steps strong {
    display: block;
    color: #16294a;
    font-weight: 600;
}

.onboarding-steps span:not(.onboarding-step-number) {
    color: #5b7ba7;
    font-size: 0.92rem;
}

.message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

@media (max-width: 575px) {
    .message-panel {
        padding: 1.5rem 1.25rem;
    }

    .message-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Contactformulier (Home/Contact, ingelogd): honeypot-veld dat alleen bots invullen */
.contact-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Admin/Development: takenlijst en releasebeheer
 *---------------------------------*/
.development-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.development-grid > .card {
    overflow: hidden;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #eef5ff;
    color: #1f7ae0;
    font-size: 0.8rem;
    font-weight: 700;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #7c8ba3;
}

.btn-icon:hover,
.btn-icon:focus-visible {
    background: #eef5ff;
    color: #1f7ae0;
}

.task-add {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e6eef8;
}

.task-add .form-control {
    border-color: #d8e3f2;
    border-radius: 9px;
}

.task-add .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.task-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 520px;
    overflow-y: auto;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem 0.35rem 1.25rem;
    border-bottom: 1px solid #eef3fa;
}

.task-item:last-child {
    border-bottom: 0;
}

.task-item:hover {
    background: #f8fbff;
}

.task-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0.45rem 0;
    cursor: pointer;
}

.task-check .form-check-input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.1rem 0 0;
    cursor: pointer;
}

.task-text {
    color: #17315b;
    overflow-wrap: anywhere;
}

.task-item.is-done .task-text {
    color: #8a9cb8;
    text-decoration: line-through;
}

.task-delete {
    opacity: 0;
}

.task-item:hover .task-delete,
.task-delete:focus-visible {
    opacity: 1;
}

.task-delete:hover {
    background: #fde8ea;
    color: #c83c4b;
}

@media (hover: none) {
    .task-delete {
        opacity: 1;
    }
}

.list-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: #7c8ba3;
}

.list-empty > i {
    font-size: 1.6rem;
    color: #b7c7de;
    margin-bottom: 0.5rem;
}

.list-empty p {
    margin: 0 0 0.75rem;
}

.list-empty p:last-child {
    margin-bottom: 0;
}

.release-admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 640px;
    overflow-y: auto;
}

.release-admin-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0.75rem 1rem 1.25rem;
    border-bottom: 1px solid #eef3fa;
}

.release-admin-item:last-child {
    border-bottom: 0;
}

.release-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 3.75rem;
    width: 3.75rem;
    padding: 0.4rem 0;
    border-radius: 10px;
    background: #f3f7fd;
    line-height: 1.1;
}

.release-date-day {
    font-size: 1.35rem;
    font-weight: 700;
    color: #16294a;
}

.release-date-month {
    font-size: 0.7rem;
    font-weight: 600;
    color: #7c8ba3;
    text-transform: uppercase;
    white-space: nowrap;
}

.release-admin-body {
    flex: 1 1 auto;
    min-width: 0;
}

.release-admin-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.release-admin-heading .activity-result {
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
}

.release-version {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    background: #16294a;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.release-description {
    margin: 0 0 0.35rem;
    color: #3d5a85;
}

.release-notes-toggle summary {
    display: inline-block;
    color: #1f7ae0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.release-notes {
    margin: 0.5rem 0 0;
    padding-left: 1.15rem;
    color: #4a6690;
    font-size: 0.9rem;
}

.release-notes li + li {
    margin-top: 0.2rem;
}

/* Versie/Index: nieuwste versie en tijdlijn met eerdere versies
 *---------------------------------*/
.release-latest {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #d6e6fb;
    border-radius: 14px;
    background: linear-gradient(135deg, #f2f8ff 0%, #ffffff 60%);
    box-shadow: 0 1px 3px rgba(20, 48, 89, 0.05);
}

.release-latest-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.release-latest-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: #1f7ae0;
    color: #fff;
    font-size: 1.2rem;
}

.release-latest-label {
    display: block;
    color: #1f7ae0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.release-latest h2 {
    margin: 0.1rem 0 0.2rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #16294a;
}

.release-latest-header p {
    margin: 0;
    color: #5b7ba7;
}

.release-latest-date {
    margin-left: auto;
    color: #5b7ba7;
    font-size: 0.9rem;
    white-space: nowrap;
}

.release-latest-date i {
    margin-right: 0.3rem;
}

.release-checklist {
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.6rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid #e2eaf5;
}

.release-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #17315b;
}

.release-checklist i {
    margin-top: 0.2rem;
    color: #18a06c;
}

.release-timeline {
    list-style: none;
    margin: 0;
    padding: 1.25rem 1.25rem 0.5rem;
}

.release-timeline-item {
    position: relative;
    padding: 0 0 1.25rem 1.75rem;
}

.release-timeline-item::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: 0.3rem;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid #1f7ae0;
    border-radius: 50%;
    background: #fff;
}

.release-timeline-item::after {
    content: "";
    position: absolute;
    top: 1.35rem;
    bottom: 0.2rem;
    left: calc(0.3rem + 0.35rem - 1px);
    width: 2px;
    background: #e2eaf5;
}

.release-timeline-item:last-child::after {
    display: none;
}

.release-timeline-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
}

.release-timeline-heading strong {
    color: #16294a;
}

.release-timeline-heading time {
    margin-left: auto;
    color: #7c8ba3;
    font-size: 0.85rem;
}

@media (max-width: 991px) {
    .development-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .release-latest {
        padding: 1.15rem;
    }

    .release-latest-header {
        flex-wrap: wrap;
    }

    .release-latest-date {
        flex-basis: 100%;
        margin-left: 0;
    }

    .release-timeline-heading time {
        flex-basis: 100%;
        margin-left: 0;
    }
}

@media (max-width: 991px) {
    .activity-metric-row {
        flex-wrap: wrap;
    }

    .activity-metric-row .activity-metric-card {
        flex: 1 1 calc(50% - 0.85rem);
    }
}

/* KPI-tegels: naast de sidebar is vier naast elkaar al krap, dus eerder twee per rij. */
@media (max-width: 1199px) {
    .kpi-row {
        flex-wrap: wrap;
    }

    .kpi-row .kpi-card {
        flex: 1 1 calc(50% - 1rem);
    }
}

@media (max-width: 575px) {
    .activity-metric-row .activity-metric-card,
    .kpi-row .kpi-card {
        flex-basis: 100%;
    }
}