@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html { margin: 0!important; }

#wpadminbar { display: none; }

:root {
    --bs-font-sans-serif: 'Open Sans', sans-serif;

    --bs-body-bg: #fff;

    --bs-app-sidebar-color: #1e293b;
    --bs-app-sidebar-bg-color: #fff;
    --bs-app-sidebar-active-bg: #eaeef2;    

    --bs-app-border-clr: #e5ebef;

    --bs-root-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);

    --transition-duration: 150ms;
    --transition-timing-function: cubic-bezier(.58,.22,.2,.96);

    --bs-border-radius: .2rem;

    --clr-nieuw: var(--bs-purple);
    --clr-offerte: var(--bs-green);
    --clr-tekenen: var(--bs-orange);
    --clr-inmeten: var(--bs-teal);
    --clr-werkvoorbereiding: var(--bs-blue);
    --clr-werkplaats-montage: var(--bs-pink);
    --clr-opleveren: var(--bs-yellow);

    --clr-success: #23ae73;
    --clr-danger: #f1aeb5;
    --clr-red: #dc3545;
}

/*** ---------- Typography ---------- ***/
.h1, h1 { font-size: 28px; }


/*** ---------- Buttons ---------- ***/
.btn[data-count] { position: relative; }
.btn[data-count]::after { content: attr(data-count); display: inline-block; min-width: 18px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--clr-red); color: #fff; font-size: 10px; line-height: 1.7; position: absolute; right: -5px; top: -5px; }


/*** ---------- Alerts ---------- ***/
.alert { border: none; }
.alert-info { --bs-alert-bg: #9eeaf9; }
.alert-success { --bs-alert-bg: var(--clr-success); --bs-alert-color: #fff; }
.alert-danger { --bs-alert-bg: var(--clr-danger); }

.pm-header { background-color: #fff; }
.pm-header { display: grid; grid-template-columns: 1fr 53px; }  
.pm-header .pm-sidebar-toggle { display: grid; place-items: center; font-size: 20px; cursor: pointer; }

@media (min-width: 992px) {
    .pm-header { grid-template-columns: 1fr; }
    .pm-header .pm-sidebar-toggle { display: none; }
}

.pm-wrapper { min-height: 100dvh; }
.pm-wrapper .pm-header { border-bottom: 1px solid var(--bs-app-border-clr); }

.pm-sidebar { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: 250px; z-index: 1000; background-color: var(--bs-app-sidebar-bg-color); border-right: 1px solid var(--bs-app-border-clr); transform: translate3d(-100%, 0, 0); transition: transform .25s ease-in-out; }
.pm-sidebar.is-expanded { transform: translate3d(-0, 0, 0); }
.pm-sidebar .pm-sidebar__header { min-height: 60px; display: grid; place-items: center; }
.pm-sidebar .pm-sidebar__body { flex-grow: 1; }
.pm-sidebar .pm-sidebar__footer { padding: 20px; }


.pm-menu { list-style: none; padding: 0 15px; }
.pm-menu ul { padding: 0; background: rgba(255, 255, 255, 0.1); list-style: none; }
.pm-menu li { position: relative; }
.pm-menu li a { font-size: 14px; font-weight: 400; color: var(--bs-app-sidebar-color); display: flex; column-gap: 8px; align-items: center; border-radius: var(--bs-border-radius); padding: 0 20px; min-height: 42px; text-decoration: none; }
.pm-menu li > [data-bs-toggle="collapse"] { color: var(--bs-app-sidebar-color); position: absolute; top: 0; right: 0; border: none; background: transparent; width: 42px; height: 42px; text-align: center; line-height: 38px; }
.pm-menu li.active > a { background-color: var(--bs-app-sidebar-active-bg); }

.pm-main { padding: 16px; position: relative; }

.pm-toolbar { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; padding: 10px 0; background-color: #fff; position: sticky; top: 0; z-index: 2; }
.pm-toolbar .text { margin-right: auto; }
.pm-toolbar h1 { margin: 0; font-weight: 600; }
.pm-toolbar p { margin: 0; }
.pm-toolbar .pm-toolbar__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.pm-toolbar .pm-toolbar__buttons select { width: auto; }
.pm-toolbar .pm-toolbar__buttons .btn { white-space: nowrap; }

.pm-filters { margin-bottom: 20px; }

body.page-template-template-projecten .pm-toolbar { background-color: #eaeef2; }

@media (min-width: 992px) {
    .pm-main { padding: 24px; }
    .pm-page { margin-left: 250px; }
    .pm-header { }
    .pm-wrapper {}
    .pm-sidebar { transform: translate3d(0, 0, 0); transition: none; }
}

/*** ---------- Buttons ---------- ***/
.btn { --bs-btn-border-radius: .2rem; --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: 0.5rem; font-weight: 500; display: inline-flex; align-items: center; column-gap: 10px; }
.btn.btn-sm { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.75rem; }
.btn.btn-lg { --bs-btn-padding-y: 0.75rem; --bs-btn-padding-x: 1.75rem; }
.btn.btn-lg i { font-size: 14px; }
.btn.btn-success { --bs-btn-bg: var(--clr-success); --bs-btn-border-color: var(--clr-success); --bs-btn-hover-bg: var(--clr-success); --bs-btn-hover-border-color: var(--clr-success); }

/*** ---------- Tables ---------- ***/
.table { --bs-table-bg: transparent; --bs-table-striped-bg: #eaeef2; }
.table.table-sortable #drag-handle { cursor: grab; }
.table p { margin: 0; }

.table-striped>tbody>tr.table-primary>* { box-shadow: none; }

.table.table-opleverpunten .opleverpunt__data { display: flex; column-gap: 16px; }
.table.table-opleverpunten a img { width: 10rem; height: auto; }

/*** ---------- Modals ---------- ***/
.modal { }
.modal--delete-item .alert { margin: 0; } 
.modal--delete-item .modal-footer { justify-content: center; }

/*** ---------- Cards ---------- ***/
.card { --bs-card-bg: #fff; --bs-card-spacer-y: .75rem; --bs-card-spacer-x: .75rem; --bs-card-border-radius: 0; }

.card .card-toolbar { padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); padding-bottom: 0; }

.card.card--projects { --bs-card-border-width: 1px; --shadow-clr: var(--bs-gray-600); height: 100%; border: none; border-top: .35rem solid var(--shadow-clr); }
.card.card--projects .card-title { font-size: 16px; font-weight: 500; }
.card.card--projects ul { padding: 0; margin: 0; min-height: 45px; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.card.card--projects ul li.project { position: relative; min-height: 45px; padding: 12px; border: var(--bs-border-width) solid var(--bs-app-border-clr); border-radius: var(--bs-border-radius); transition-property: box-shadow; transition-duration: var(--transition-duration); transition-timing-function: var(--transition-timing-function); }
.card.card--projects ul li.project.project-by--sales { border-color: var(--clr-red); }
.card.card--projects ul li.project.project-by--sales::before { content: 'Project door ontwerper'; display: block; position: absolute; left: 12px; top: .1rem; font-size: 10px; opacity: .75; }
.card.card--projects ul li.project:hover { box-shadow: var(--bs-box-shadow); }
.card.card--projects ul li.project #drag-handle { position: absolute; top: 0; right: 0; width: 24px; height: 24px; display: inline-grid; place-items: center; cursor: grab; z-index: 1; border-left: var(--bs-border-width) solid var(--bs-app-border-clr); border-bottom: var(--bs-border-width) solid var(--bs-app-border-clr); border-bottom-left-radius: var(--bs-border-radius); }
.card.card--projects ul li.project .project-title { font-size: 16px; font-weight: 600; margin: 0 0 3px 0; }
.card.card--projects ul li.project .project-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 18px; font-weight: 400; opacity: .75; }
.card.card--projects ul li.project .project-customer { font-size: 13px; line-height: 18px; font-weight: 700; }
.card.card--projects ul li.project .project-tools { display: flex; flex-wrap: wrap; gap: 5px 10px; font-size: 13px; line-height: 18px; font-weight: 400; opacity: .5; }
.card.card--projects ul li.project .project-tools span { display: inline-flex; align-items: center; column-gap: 5px; }
.card.card--projects ul li.project .project-tools span .bi { font-size: 12px; }
.card.card--projects ul li.project .project-actions { display: flex; justify-content: space-between; }
.card.card--projects ul li.project .project-actions button { border: none; background: transparent; font-size: 13px; color: var(--bs-primary); }
.card.card--projects ul li.project .project-actions button::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.card.card--projects.is-status-nieuw { --shadow-clr: var(--clr-nieuw); }
.card.card--projects.is-status-offerte { --shadow-clr: var(--clr-offerte); }
.card.card--projects.is-status-tekenen { --shadow-clr: var(--clr-tekenen); }
.card.card--projects.is-status-inmeten { --shadow-clr: var(--clr-inmeten); }
.card.card--projects.is-status-werkvoorbereiding { --shadow-clr: var(--clr-werkvoorbereiding); }
.card.card--projects.is-status-werkplaats-montage { --shadow-clr: var(--clr-werkplaats-montage); }
.card.card--projects.is-status-opleveren { --shadow-clr: var(--clr-opleveren); }

.card.card--template .card-footer { border-top: var(--bs-card-border-width) solid var(--bs-card-border-color); }

@media (min-width: 992px) {
    /* .card { --bs-card-spacer-y: 1.5rem; --bs-card-spacer-x: 1.5rem; --bs-card-cap-padding-y: 1.5rem; --bs-card-cap-padding-x: 1.5rem; } */
}

/*** ---------- User ---------- ***/
.user { display: flex; align-items: center; column-gap: 10px; }
.user .user__avatar { width: 32px; height: 32px; border-radius: 50%; background-color: #212529; font-size: 20px; font-weight: 500; color: #fff; text-align: center; line-height: 32px; }

/*** ---------- Tabs ---------- ***/
.nav-tabs { --bs-nav-tabs-link-active-bg: #eaeef2; padding-top: 5px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; }
.nav-tabs .nav-item .nav-link { white-space: nowrap; font-size: 14px; border: none; border-bottom: 2px solid var(--bs-app-border-clr); font-weight: 600; color: var(--bs-app-border-clr); position: relative; padding: 5px 13px; }
.nav-tabs .nav-item.nav-item--nieuw .nav-link { --bs-app-border-clr: var(--clr-nieuw); }
.nav-tabs .nav-item.nav-item--offerte .nav-link { --bs-app-border-clr: var(--clr-offerte); }
.nav-tabs .nav-item.nav-item--tekenen .nav-link { --bs-app-border-clr: var(--clr-tekenen); }
.nav-tabs .nav-item.nav-item--inmeten .nav-link { --bs-app-border-clr: var(--clr-inmeten); }
.nav-tabs .nav-item.nav-item--werkvoorbereiding .nav-link { --bs-app-border-clr: var(--clr-werkvoorbereiding); }
.nav-tabs .nav-item.nav-item--werkplaats-montage .nav-link { --bs-app-border-clr: var(--clr-werkplaats-montage); }
.nav-tabs .nav-item.nav-item--opleveren .nav-link { --bs-app-border-clr: var(--clr-opleveren); }
.nav-tabs .nav-item .nav-link[data-count]::after { content: attr(data-count); display: inline-block; min-width: 18px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--clr-red); color: #fff; font-size: 10px; line-height: 1.7; position: absolute; right: -5px; top: -5px; }

/*** ---------- Materials ---------- ***/
.material-group { padding: 12px; border: var(--bs-border-width) dashed var(--bs-gray-300); border-radius: var(--bs-border-radius); margin: 0 0 12px 0; }

.file-upload-area [type="file"] { opacity: 0; position: absolute; pointer-events: none; }  
.file-upload-area .drop-area { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; border: 2px dashed #dce3ea; background-color: #f9fbfc; padding: 20px; text-align: center; cursor: pointer; margin-top: 15px; border-radius: 5px; }
.file-upload-area .drop-area p { margin: 0; }

.file-upload-area .preview-area { display: flex; flex-wrap: wrap; gap: 10px; }
.file-upload-area .preview-area img { margin: 0; }
.file-upload-area .preview-image { max-width: 100px; margin: 10px; }

.file-upload-area .uploaded-files { --gc: 2; display: grid; grid-template-columns: repeat( var(--gc), minmax(0, 1fr) ); gap: 10px; }
.file-upload-area .uploaded-files > div { border-radius: var(--bs-border-radius); display: flex; align-items: center; justify-content: center; position: relative; border: var(--bs-border-width) solid #dee2e6; padding: 16px; }
.file-upload-area .uploaded-files > div > a > i { font-size: 70px; }
.file-upload-area .uploaded-files button { padding: 4px 7px; opacity: 0; pointer-events: none; position: absolute; top: 12px; right: 12px; transition: opacity var(--transition-duration) var(--transition-timing-function); }
.file-upload-area .uploaded-files > div:hover button { opacity: 1; pointer-events: all; }

@media (min-width: 768px) {
    .file-upload-area .uploaded-files { --gc: 3; } 
}

@media (min-width: 992px) {
    .file-upload-area .uploaded-files { --gc: 4; } 
}

@media (min-width: 1200px) {
    .file-upload-area .uploaded-files { --gc: 5; } 
}

.pm-wrapper--projecten { background-color: #eaeef2; }

.pm-signature { display: flex; flex-direction: column; }
.pm-signature .pm-signature__canvas { max-width: 900px; position: relative; }
.pm-signature .pm-signature__canvas::before { content: ''; display: block; padding-top: 65%; }
.pm-signature .pm-signature__buttons { display: flex; column-gap: 10px; }
.pm-signature canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; cursor: crosshair; border: 2px solid #dce3ea; border-radius: 5px; }


/*** ---------- Template project bewerken ---------- ***/

/* Mobile styling */
@media (max-width: 575.98px) {
    body.page-template-template-project-bewerken .pm-toolbar__buttons { width: 100%; }
    body.page-template-template-project-bewerken .pm-toolbar__buttons .btn.btn-success { width: 100%; }
    body.page-template-template-project-bewerken .pm-toolbar__buttons .btn.btn-danger { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.75rem; }
    body.page-template-template-project-bewerken .pm-toolbar__buttons .form-select { flex-grow: 1; padding: .35rem 1rem; font-size: .875rem; border-radius: var(--bs-border-radius-sm); }

    .table-meter-prices thead { display: none; }
    .table-meter-prices tbody tr { display: flex; flex-wrap: wrap; }
    .table-meter-prices tbody tr td { width: 100%; }

    .table-meter-prices tbody tr td::before { content: attr(data-title); display: block; width: 100%; opacity: .5; }

    .table-offerte-regels thead { display: none; }
    .table-offerte-regels tbody tr { display: flex; flex-wrap: wrap; }
    .table-offerte-regels tbody tr td { width: 100%; }
    .table-offerte-regels tbody tr td::before { content: attr(data-title); display: block; width: 100%; opacity: .5; }
}