.card-container { container: card-container / inline-size; } 
.card-groups { display: flex; flex-direction: column; gap: 2rem; }

.card { --bs-card-bg: #fff; --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.25rem; --bs-card-border-color: var(--bs-border-color); 
    .card-header {
        .card-title { font-size: 1rem; margin: 0; }
    }
    .counter { background: var(--bs-gray-200); display: inline-block; padding: 0 0.625rem; border-radius: 5rem; text-align: center; vertical-align: middle; font-size: 0.875rem; color: var(--bs-gray-900); }
    .card-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); padding-bottom: 0; 
        .card-title { display: flex; gap: .5rem; align-items: center; font-size: 0.875rem; font-weight: 600; margin: 0; }
    }

    .card-collapse {
        [data-bs-toggle="collapse"] { text-align: left; line-height: 1.2; font-size: 0.75rem; width: 100%; border-radius: 0; justify-content: space-between;
            .counter { margin-left: auto; background-color: var(--clr-primary); color: #fff; }   
        }
        .collapsing { max-height: 27.5rem!important; transition: none !important; }
        .collapse { height: 27.5rem!important; max-height: 27.5rem!important; 
            .card-body { display: block; height: 27.5rem; overflow: hidden;
                .sortable-list { height: 25rem; overflow-y:auto; }
            }
        }
    }

    /* Variations */
    &.card--login { width: 100%; max-width: 26.25rem; margin: 0 auto; }

    &.card--register { width: 100%; max-width: 26.25rem; margin: 0 auto; }

    &.card--projects { --bs-card-border-width: 1px; --shadow-clr: var(--bs-gray-600); height: 100%; border-top: .35rem solid var(--shadow-clr); 
        .card-title { font-size: 0.875rem; font-weight: 600; margin: 0; }
        ul { padding: 0; margin: 0; min-height: 60px; list-style: none; display: flex; flex-direction: column; gap: 1rem;
            li.project { position: relative; display: block; min-height: fit-content; padding: 12px; background-color: #f5f5f5; border-radius: 5px; border-left: 3px solid var(--shadow-clr); transition-property: color, background-color, border; transition-duration: var(--transition-duration); transition-timing-function: var(--transition-timing-function);
                .project-quote-status { position: absolute; top: 6px; right: 6px; background: #e6e6e6; padding: 1px 5px; border-radius: 5px; }
                .drag-handle { cursor: grab; position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; }
                .project-title { font-size: 16px; font-weight: 600; margin: 0 0 3px 0; }
                .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; }
                .project-customer { font-size: 13px; line-height: 18px; font-weight: 700; }
                .project-reseller { font-size: 11px; line-height: 10px; font-weight: 600; margin-bottom: 5px; }
                .create-date { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; line-height: 18px; font-weight: 400; opacity: .5; 
                    span { display: inline-flex; align-items: center; column-gap: 5px; 
                        .bi { font-size: 12px; }
                    }
                }
                .project-actions { display: block; margin-top: 10px; 
                    div { display: flex; align-items: center; column-gap: 5px; }
                    a { border: none; background: transparent; font-size: 13px; color: var(--bs-primary); }
                }
                .badge { border-radius: 0.313rem; font-size: 0.688rem; position: absolute; top: -.45rem; left: 0.75rem; }
                
                &:hover { background-color: #e8e8e8; }
                &.sortable-ghost { opacity: 1; }
                &.project-hidden { display: none; }
                &.project--reminder-expired { border: 2px solid var(--bs-danger); border-left-width: 3px; background-color: #fef2f2; }


            }
        }
        .card-collapse { border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); overflow: hidden; }
        
        &.is-status-offerte { --shadow-clr: var(--clr-offerte); }
        &.is-status-inmeten { --shadow-clr: var(--clr-inmeten); }
        &.is-status-werkvoorbereiding { --shadow-clr: var(--clr-werkvoorbereiding); }
        &.is-status-werkplaats-montage { --shadow-clr: var(--clr-werkplaats-montage); }
        &.is-status-opleveren { --shadow-clr: var(--clr-opleveren); }
    } 
    &.card--table { overflow: hidden;
        .card-header { background-color: var(--clr-primary-10); padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 
            .card-title { color: var(--bs-body-color); font-size: 1rem; margin: 0; font-weight: 600; }
            .card-description { color: #fff; font-size: 0.875rem; }
        }
        .card-body { padding: 0;
            .table-responsive { margin: -1px;
                table { margin: 0!important; 
                    td { padding: 0.5rem 1rem; }
                }
            }
        }
        .card-footer { padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); background: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    }
    &.card--tasks { display: flex; flex-direction: column; min-height: 100vh;
        .card-title .counter { background-color: var(--bs-primary); color: #fff; }

        .tasks-panel-content { display: flex; flex-direction: column; flex: 1; min-height: 0;
            .tasks-panel-inner { display: flex; flex-direction: column; min-height: 100vh; overflow-y: auto; }
            .tasks-panel-create { border-bottom: 1px solid var(--bs-border-color); padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); box-sizing: border-box; 
                .btn { margin-top: .5rem; }
                textarea { height: 150px; resize: none; }
                select { height: 38px; margin-bottom: 5px; }
            }
            .tasks-panel-tasks { padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); display: flex; flex-direction: column; gap: .5rem; }

            .task-toggle { width: auto; margin: 0 var(--bs-card-spacer-x); position: relative; height: 1.75rem; border-radius: var(--bs-border-radius); background: var(--bs-secondary-bg-subtle); display: flex; align-items: center; cursor: pointer;
                .task-toggle-slider { position: absolute; width: 50%; height: 100%; border-radius: var(--bs-border-radius); background: var(--bs-primary); transition: transform var(--transition-duration) var(--transition-timing-function); }
                &.active .task-toggle-slider { transform: translateX(100%); }
            }

            .task-panel-avatar { background: #d63384; padding: 5px; width: 34px; height: 34px; box-sizing: border-box; flex-shrink: 0; color: #fff; font-size: 12px; line-height: 26px; text-align: center; border-radius: 50%; }

            .tasks-panel-list { border-top: 1px solid var(--bs-border-color); padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); margin-top: var(--bs-card-spacer-y);
                ul { list-style: none; padding: 0; margin: 0;
                    li { position: relative; background: #fff; margin: 10px 0; padding-bottom: 10px; display: flex; align-items: center; border-bottom: 1px dotted #d0d0d0;
                        .task-actions { margin-left: auto; }
                        span { margin-inline: 8px; white-space: pre-wrap; }
                    }                
                }
            }
        }
    } 
    &.card--customers { overflow: hidden;
        .card-header { background-color: var(--clr-primary); padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 
            .card-title { color: #fff; font-size: 1rem; margin: 0; font-weight: 600; }
            .card-description { color: #fff; font-size: 0.875rem; }
        }
        .card-body { padding: 0; }
        .card-footer { padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); background: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    }
    &.card--users { overflow: hidden;
        .card-header { background-color: var(--clr-primary); padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 
            .card-title { color: #fff; font-size: 1rem; margin: 0; font-weight: 600; }
            .card-description { color: #fff; font-size: 0.875rem; }
        }
        .card-body { padding: 0;
            .table-responsive { margin: -1px;
                table { margin: 0!important; 
                    td { padding: 0.5rem 1rem; }
                }
            }
        }
        .card-footer { padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); background: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    }
    &.card--customer-orders { overflow: hidden;
        .card-header { background-color: var(--clr-primary); color: #fff; padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); border: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 
            .card-title { font-size: 1rem; margin: 0; font-weight: 600; }
        }
        .card-body { padding: 0; background-color: #fff;
            .card-header { background-color: var(--clr-primary-10); color: var(--clr-primary); border-radius: 0;
                .card-title { font-size: 1rem; }
            }
            .table-responsive { margin: -1px;
                table { margin: 0!important; 
                    td.order-item__total { text-align: right; }
                }
            }
        }
    }
    &.card--materials { overflow: hidden;
        .card-header { background-color: var(--clr-primary); color: #fff; padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); border: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 
            .card-title { font-size: 1rem; margin: 0; font-weight: 600; }
        }
        .card-body { padding: 0; background-color: #fff;
            .table-responsive { margin: -1px;
                table { margin: 0!important; 
                    td.order-item__total { text-align: right; }
                }
            }
        }
    }
    &.card--new-time-entry { overflow: hidden;
        .card-header { background-color: var(--clr-primary-10); padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); border: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 
            .card-title { font-size: 1rem; margin: 0; font-weight: 600; }
        }
        .card-body { 

        }
        .card-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); background-color: #fff;
            #totalHours { font-size: 1rem; font-weight: 600; }
        }
    }
    &.card--time-entries { overflow: hidden;
        .card-header { background-color: var(--clr-primary-10); padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); border: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 
            .card-title { font-size: 1.25rem; margin: 0; font-weight: 600; }
        }
        .card-body { padding: 0;
            table { margin: 0; }
        }
    }
    &.card-project-detail { overflow: hidden;
        .card-header { background-color: var(--clr-primary); color: #fff; padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); border: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; 
            .card-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin: 0; font-weight: 600; }
            .btn { margin: -1rem -.5rem; }
        }
        .card-body {
            + .card-body { border-top: 2px solid var(--bs-border-color); }
        }
    }
    &.card-project-table {
        .card-body { padding: 0;
            .table-responsive { margin: -1px;
                table { margin: 0!important; 
                    td { padding: 0.5rem 1rem; }
                }
            }
        }
    }
    &.card-media-items {
        .media-grid { grid-template-columns: minmax(0, 1fr); 
            .item { aspect-ratio: inherit; flex-direction: row; position: relative; padding: 1rem; align-items: center; gap: 1rem; border: none; background: #f8fafc;
                .delImage { min-width: 24px; min-height: 24px; height: 24px; border-radius: 50%; font-size: 11px; position: absolute; top: 8px; right: 8px; z-index: 2; }

                .item__header { padding: 0; z-index: inherit;
                    a { width: 50px; height: 50px; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; }
                    i.bi-filetype-pdf { font-size: 2rem; }
                }
                > a { position: static; }
                .item__title { z-index: inherit; font-weight: 500; margin: 0; background: transparent; padding: 0; color: var(--bs-body-color); text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.75rem; }

                &.item--media {
                    > a { width: 100%; max-width: 60px;
                        img { width: 100%; height: 100%; max-height: 60px; object-fit: contain; }
                    }
                } 
                &.item--image {
                    .item__header { margin-right: -1rem;
                        > a { display: none; }
                    }
                    > a { width: 50px; height: 50px; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; overflow: hidden;
                        img { width: 100%; height: 100%; object-fit: cover; }
                    }
                }
            }
        }
    }
}

@keyframes counter-flash {
    0% { transform: scale(1); }
    25% { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.3); }
    100% { transform: scale(1); box-shadow: none; }
}

.counter--flash { animation: counter-flash 0.4s ease-out; }

@container card-container (min-width: 40rem) {
    .card { 
        &.card--login { --bs-card-spacer-y: 1.75rem; --bs-card-spacer-x: 1.75rem; }  
        &.card--register { --bs-card-spacer-y: 1.75rem; --bs-card-spacer-x: 1.75rem; }  

        &.card--projects { }
        &.card--tasks { }
    }
}