/* eigen kleur menubalk */
.custom-navbar {
    background-color: #009FE3; /* Schipper blauw */
    /* #E30613 Schipper Rood */
}

/*tekst kleuren in de menubalk*/
.custom-navbar .navbar-brand,
.custom-navbar .nav-link,
.custom-navbar .btn,
.custom-navbar .bi {
    color: white !important;
}


/* eigen kleur footer */
.custom-footer {
    background-color: #009FE3; /* Schipper blauw */
}

/*icon buttons*/

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.icon-button:hover {
    background-color: #6c757d; /* iets donkerder grijs bij hover */
}

/* Responsive table header labels */

@media (max-width: 576px) {
    th[data-label="Omschrijving"]::before,
    th[data-label="Projectleider"]::before {
        content: attr(data-label-short);
        display: block;
        text-align: left;
        font-weight: bold;
    }

    th[data-label="Omschrijving"],
    th[data-label="Projectleider"] {
        font-size: 0;
        position: relative;
    }

    th[data-label="Omschrijving"]::before,
    th[data-label="Projectleider"]::before {
        font-size: 0.875rem;
        color: inherit;
    }

    /* Ensure table fits screen */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        width: 100% !important;
        table-layout: fixed;
    }
    td, th {
        word-wrap: break-word;
        white-space: normal;
    }

    /* Icon buttons stacked and centered */
    td .icon-button {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 4px 0 !important;
        width: 36px;
        height: 36px;
        border-radius: 6px;
        text-decoration: none;
    }

    td .icon-button i {
        font-size: 1.2rem;
        line-height: 1;
    }
}

@media (max-width: 576px) {
    .desktop-label {
        display: none;
    }

    .mobile-label {
        display: inline;
    }

    .sectionSignatureDesktop {
        display: none;
    }

    .sectionSignatureMobile {
        display: inline;
    }    
}

@media (min-width: 577px) {
    .desktop-label {
        display: inline;
    }

    .mobile-label {
        display: none;
    }

    .sectionSignatureDesktop {
        display: inline;
    }

    .sectionSignatureMobile {
        display: none;
    }    
}