/**
 * b3b.vek.dk — reusable component classes.
 * Classes only. No inline styles in HTML.
 */

/* ───── Page-level placeholder ───── */

.b3b-placeholder {
    padding: var(--b3b-space-xl) var(--b3b-space-md);
}
.b3b-placeholder-dl {
    max-width: 500px;
}


/* ───── CMS page wrapper + module spacing ───── */

.cms-page     { padding-bottom: var(--b3b-space-xl); }
.b3b-module   { margin-bottom: var(--b3b-space-lg); }


/* ───── Header + top menu ───── */

/* ───── Header (white band, dark text) ───── */

.b3b-header {
    background: #fff;
    color: var(--b3b-color-text);
    border-bottom: 1px solid var(--b3b-color-border);
    margin-bottom: var(--b3b-space-lg);
}

.b3b-header-inner {
    display: flex;
    align-items: center;
    gap: var(--b3b-space-md);
    min-height: var(--b3b-header-height);
    flex-wrap: wrap;
}

.b3b-header-brand {
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--b3b-color-text);
    text-decoration: none;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.b3b-header-brand:hover { color: var(--b3b-color-text); text-decoration: none; }

.b3b-header-nav {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--b3b-space-md);
}

.b3b-header-auth {
    display: flex;
    align-items: center;
    gap: var(--b3b-space-sm);
    margin-left: auto;
}

.b3b-header-user {
    color: var(--b3b-color-muted);
    font-size: var(--b3b-font-size-sm);
}

/* Mobile hamburger */
.b3b-header-toggle {
    background: none;
    border: 1px solid var(--b3b-color-border);
    border-radius: var(--b3b-radius-sm);
    padding: 6px 10px;
    margin-left: auto;
    cursor: pointer;
}
.b3b-header-toggle-icon,
.b3b-header-toggle-icon::before,
.b3b-header-toggle-icon::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--b3b-color-text);
    position: relative;
}
.b3b-header-toggle-icon::before { content: ""; position: absolute; top: -7px; left: 0; width: 22px; }
.b3b-header-toggle-icon::after  { content: ""; position: absolute; top:  7px; left: 0; width: 22px; }

/* Top menu — dark text, orange on hover/active */
.b3b-topmenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--b3b-space-md);
    flex-wrap: wrap;
}
.b3b-topmenu-item { display: inline-block; }
.b3b-topmenu-link {
    color: var(--b3b-color-text);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    padding: var(--b3b-space-sm) var(--b3b-space-xs);
    border-bottom: 2px solid transparent;
    display: inline-block;
    letter-spacing: 0.02em;
}
.b3b-topmenu-link:hover     { color: var(--b3b-orange); text-decoration: none; }
.b3b-topmenu-link.is-active { color: var(--b3b-orange); border-bottom-color: var(--b3b-orange); }


/* Mobile — menu collapses under brand, toggled by hamburger */
@media (max-width: 767.98px) {
    .b3b-header-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        flex-basis: 100%;
        padding-top: var(--b3b-space-md);
        gap: var(--b3b-space-sm);
    }
    .b3b-header-nav.is-open { display: flex; }
    .b3b-topmenu-list       { flex-direction: column; gap: var(--b3b-space-xs); }
    .b3b-header-auth        { justify-content: flex-end; margin-left: 0; }
}


/* ───── Footer (white background, dark text, three columns) ───── */

.b3b-footer {
    background: #fff;
    color: var(--b3b-color-text);
    border-top: 1px solid var(--b3b-color-border);
    padding: 60px 0 30px;
    margin-top: var(--b3b-space-xl);
    font-size: 14px;
}
.b3b-footer .b3b-footer-col { margin-bottom: var(--b3b-space-md); }
.b3b-footer-title {
    color: var(--b3b-color-text);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 1.5;
}
.b3b-footer-body {
    color: var(--b3b-color-text);
    line-height: 1.6;
    margin: 0;
}
.b3b-footer-body a {
    color: var(--b3b-color-text);
    text-decoration: none;
}
.b3b-footer-body a:hover { color: var(--b3b-orange); }
.b3b-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.b3b-footer-list li     { line-height: 30px; }
.b3b-footer-list a      { color: var(--b3b-color-text); font-size: 14px; text-decoration: none; }
.b3b-footer-list a:hover { color: var(--b3b-orange); }

.b3b-footer-copy {
    border-top: 1px solid var(--b3b-color-border);
    margin-top: var(--b3b-space-lg);
    padding-top: var(--b3b-space-md);
    color: var(--b3b-color-muted);
    font-size: 13px;
}


/* ───── CMS modules ───── */

/* RichText */
.cms-richtext-heading { margin-bottom: var(--b3b-space-md); }
.cms-richtext-body    { line-height: 1.6; }

/* Banner */
.cms-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--b3b-radius-md);
}
.cms-banner-sm { aspect-ratio: 21 / 6; }
.cms-banner-md { aspect-ratio: 21 / 8; }
.cms-banner-lg { aspect-ratio: 16 / 7; }
.cms-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cms-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--b3b-space-lg);
    background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 60%);
    color: #fff;
}
.cms-banner-link { text-decoration: none; color: inherit; display: block; }

/* ProductGrid heading only — cards come from b3b-product-card below */
.cms-productgrid-heading { margin-bottom: var(--b3b-space-md); }


/* ───── Product card (shared: /produkter list + ProductGrid module) ───── */

.b3b-product-card {
    display: block;
    height: 100%;
    border: 1px solid var(--b3b-color-border);
    border-radius: var(--b3b-radius-sm);
    background: var(--b3b-color-bg);
    transition: box-shadow .15s ease, transform .15s ease;
    overflow: hidden;
}
.b3b-product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.b3b-product-card-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    height: 100%;
}
.b3b-product-card-link:hover { text-decoration: none; color: inherit; }

.b3b-product-card-image {
    aspect-ratio: 1 / 1;
    background: var(--b3b-color-bg-alt);
    display: flex; align-items: center; justify-content: center;
}
.b3b-product-card-image img { width: 100%; height: 100%; object-fit: contain; }
.b3b-product-card-noimg {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 8px, #e5e7eb 8px, #e5e7eb 16px);
}

.b3b-product-card-body {
    padding: var(--b3b-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--b3b-space-xs);
    flex: 1;
}

.b3b-product-card-title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.b3b-product-card-meta {
    font-size: var(--b3b-font-size-sm);
    color: var(--b3b-color-muted);
    display: flex;
    gap: var(--b3b-space-sm);
    flex-wrap: wrap;
}
.b3b-product-card-mpn { font-family: monospace; }

.b3b-product-card-price {
    margin-top: auto;
    padding-top: var(--b3b-space-sm);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--b3b-color-primary);
}
.b3b-product-card-price-locked a {
    font-size: var(--b3b-font-size-sm);
    font-weight: 400;
    color: var(--b3b-color-muted);
    text-decoration: underline;
}


/* ───── Products index page ───── */

.b3b-products-page { padding-bottom: var(--b3b-space-xl); }

.b3b-products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--b3b-space-md);
    flex-wrap: wrap;
    margin-bottom: var(--b3b-space-md);
}
.b3b-products-search {
    display: flex;
    gap: var(--b3b-space-sm);
    flex: 0 1 480px;
    max-width: 100%;
}
.b3b-products-meta {
    color: var(--b3b-color-muted);
    font-size: var(--b3b-font-size-sm);
    margin-bottom: var(--b3b-space-md);
}
.b3b-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--b3b-space-md);
}
.b3b-products-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--b3b-space-md);
    margin-top: var(--b3b-space-lg);
}
.b3b-products-pagination-current { color: var(--b3b-color-muted); }


/* ───── Product detail ───── */

.b3b-product-detail { padding-bottom: var(--b3b-space-xl); }

.b3b-backlink {
    display: inline-block;
    margin-bottom: var(--b3b-space-md);
    color: var(--b3b-color-muted);
}
.b3b-backlink:hover { color: var(--b3b-color-primary); }

.b3b-product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--b3b-space-lg);
    align-items: start;
}
@media (max-width: 767.98px) {
    .b3b-product-detail-grid { grid-template-columns: 1fr; }
}

.b3b-product-detail-media {
    background: var(--b3b-color-bg-alt);
    border: 1px solid var(--b3b-color-border);
    border-radius: var(--b3b-radius-md);
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.b3b-product-detail-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.b3b-product-detail-noimg {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 12px, #e5e7eb 12px, #e5e7eb 24px);
}

.b3b-product-detail-title { margin-bottom: var(--b3b-space-md); }
.b3b-product-detail-meta  { margin-bottom: var(--b3b-space-lg); }
.b3b-product-detail-meta dt {
    font-weight: 500;
    color: var(--b3b-color-muted);
    float: left;
    width: 110px;
}
.b3b-product-detail-meta dd { margin-left: 120px; margin-bottom: var(--b3b-space-xs); }

.b3b-product-detail-price-block {
    margin-bottom: var(--b3b-space-md);
    padding: var(--b3b-space-md);
    background: var(--b3b-color-bg-alt);
    border-radius: var(--b3b-radius-md);
}
.b3b-product-detail-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--b3b-color-primary);
}
.b3b-product-detail-minorder { color: var(--b3b-color-muted); font-size: var(--b3b-font-size-sm); }
.b3b-product-detail-source   { color: var(--b3b-color-muted); font-size: var(--b3b-font-size-sm); margin-top: var(--b3b-space-xs); }

.b3b-product-detail-short         { margin-bottom: var(--b3b-space-md); line-height: 1.6; }
.b3b-product-detail-description   { margin-top: var(--b3b-space-xl); }
.b3b-product-detail-description-body { line-height: 1.6; }


/* ───── Category cards ───── */

.cms-categorycards-heading { margin-bottom: var(--b3b-space-md); }

.b3b-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: var(--b3b-space-md);
    border: 1px solid var(--b3b-color-border);
    border-radius: var(--b3b-radius-md);
    background: var(--b3b-color-bg);
    color: var(--b3b-color-text);
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
    text-align: center;
}
.b3b-category-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
    color: var(--b3b-color-primary);
    text-decoration: none;
}
.b3b-category-card-image {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 140px;
    margin-bottom: var(--b3b-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--b3b-color-bg-alt);
    border-radius: var(--b3b-radius-sm);
    overflow: hidden;
}
.b3b-category-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.b3b-category-card-title {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
}


/* ───── Supplier variants + VEK alternative (product detail) ───── */

.b3b-supplier-variants { margin-top: var(--b3b-space-xl); }
.b3b-supplier-table th { font-weight: 600; color: var(--b3b-color-muted); }
.b3b-supplier-table tbody tr:first-child td { font-weight: 600; }
.b3b-supplier-table tbody tr:first-child td:nth-child(3) { color: var(--b3b-color-primary); }

.b3b-vek-alternative {
    margin-top: var(--b3b-space-lg);
    padding: var(--b3b-space-lg);
    background: var(--b3b-color-bg-alt);
    border-radius: var(--b3b-radius-md);
    border: 1px dashed var(--b3b-color-border);
}
.b3b-vek-alternative h3 { margin: 0 0 var(--b3b-space-xs); }
.b3b-vek-alternative-card {
    display: flex;
    align-items: baseline;
    gap: var(--b3b-space-md);
    margin-top: var(--b3b-space-sm);
}
.b3b-vek-alternative-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--b3b-color-primary);
}
.b3b-vek-alternative-meta {
    color: var(--b3b-color-muted);
    font-size: var(--b3b-font-size-sm);
}


/* ───── Price-mode toggle (header) ───── */

.b3b-price-toggle { display: inline-flex; }
@media (max-width: 767.98px) {
    .b3b-price-toggle .btn-group { flex-wrap: wrap; }
}


/* ───── Project photo uploader + grid ───── */

.b3b-dropzone {
    position: relative;
    border: 2px dashed var(--b3b-color-border);
    border-radius: 8px;
    padding: 24px;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.b3b-dropzone.is-dragging,
.b3b-dropzone:hover {
    border-color: var(--b3b-color-primary);
    background: #f0f6ff;
}
.b3b-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.b3b-dropzone-text { font-size: 0.9375rem; }
.b3b-dropzone input[type="file"] {
    position: absolute; inset: 0;
    opacity: 0; cursor: pointer; pointer-events: auto;
}
.b3b-dropzone-compact { padding: 10px; background: #fff; }
.b3b-dropzone-compact .b3b-dropzone-text { font-size: 0.825rem; color: var(--b3b-color-muted); }

/* Dropzone locked while no project is picked yet (NyAftale, RedigerAftale,
 * Edit-Task on a loose task). Hides the file input so clicks/drops do
 * nothing, swaps the help text for a warning. */
.b3b-dropzone-locked { display: none; }
.b3b-dropzone.is-locked {
    opacity: 0.6;
    border-style: solid;
    background: #fff8e8;
    border-color: #f1d97f;
    cursor: not-allowed;
}
.b3b-dropzone.is-locked:hover { border-color: #f1d97f; background: #fff8e8; }
.b3b-dropzone.is-locked input[type="file"] { pointer-events: none; }
.b3b-dropzone.is-locked .b3b-dropzone-text,
.b3b-dropzone.is-locked .b3b-dropzone-hint { display: none; }
.b3b-dropzone.is-locked .b3b-dropzone-locked { display: inline; }

/* Upload progress modal items */
.b3b-upload-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--b3b-color-border);
}
.b3b-upload-item:last-child { border-bottom: 0; }
.b3b-upload-thumb {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 4px;
    background: #e9ecef;
}
.b3b-upload-meta { min-width: 0; }
.b3b-upload-name { font-size: 0.875rem; margin-bottom: 4px; word-break: break-word; }

/* Photo grid */
.b3b-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.b3b-photo-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f5f5;
    border: 1px solid var(--b3b-color-border);
}
.b3b-photo-link,
.b3b-photo-link img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}
.b3b-photo-delete {
    position: absolute;
    top: 6px; right: 6px;
    margin: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.b3b-photo-tile:hover .b3b-photo-delete { opacity: 1; }
.b3b-photo-delete .btn {
    padding: 0 6px;
    font-size: 1.1rem;
    line-height: 1.5;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(2px);
}


/* ───── Sagsstyring (calendar + projects) ───── */

.b3b-sag-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--b3b-space-md);
    margin-bottom: var(--b3b-space-md);
    flex-wrap: wrap;
}
.b3b-sag-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.b3b-sag-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: var(--b3b-space-sm);
}

.b3b-sag-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--b3b-space-md);
}
@media (max-width: 991.98px) {
    .b3b-sag-grid { grid-template-columns: 1fr; }
}

.b3b-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
@media (max-width: 991.98px) {
    .b3b-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .b3b-week { grid-template-columns: 1fr; }
}
.b3b-week-col {
    background: #fff;
    border: 1px solid var(--b3b-color-border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-height: 140px;
}
.b3b-week-col.is-today {
    border-color: var(--b3b-color-primary);
    box-shadow: 0 0 0 1px var(--b3b-color-primary);
}
.b3b-week-col-header {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid var(--b3b-color-border);
    font-size: 0.8125rem;
    background: #fafafa;
}
.b3b-week-day { font-weight: 600; }
.b3b-week-date { color: var(--b3b-color-muted); }
.b3b-week-col-body {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.b3b-week-empty { padding: 4px 2px; }

.b3b-event-card { margin: 0; display: block; }
.b3b-event-btn {
    width: 100%;
    background: #e8f1ff;
    border: 1px solid #cfe0ff;
    border-radius: 5px;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1px;
    transition: background 0.12s;
}
.b3b-event-btn:hover { background: #d6e6ff; }
.b3b-event-time  { font-size: 0.7rem;   color: var(--b3b-color-muted); font-weight: 600; }
.b3b-event-title { font-size: 0.875rem; font-weight: 500; }
.b3b-event-project  { color: #2057b6; }
.b3b-event-assigned { font-size: 0.7rem; }
.b3b-event-appointment .b3b-event-btn { background: #fff4dc; border-color: #f5dda5; }
.b3b-event-appointment .b3b-event-btn:hover { background: #ffe7b8; }
.b3b-event-deadline .b3b-event-btn    { background: #fde8e8; border-color: #f5c7c7; }
.b3b-event-deadline .b3b-event-btn:hover { background: #fbd5d5; }
.b3b-event-other .b3b-event-btn       { background: #f0f2f5; border-color: #d9dde3; }

/* Three-zone day column: floating-open (top) → slotted (middle) → floating-done (bottom). */
.b3b-day-zone { display: flex; flex-direction: column; gap: 4px; }
.b3b-day-zone-floating-open {
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--b3b-color-border);
    margin-bottom: 4px;
}
.b3b-day-zone-floating-done {
    padding-top: 4px;
    border-top: 1px dashed var(--b3b-color-border);
    margin-top: 4px;
    opacity: 0.75;
}
.b3b-week-counters {
    display: flex; gap: 6px;
    margin-left: 6px;
    font-size: 0.7rem;
    color: var(--b3b-color-muted);
}
.b3b-week-counter.is-open { color: #b85700; font-weight: 600; }
.b3b-week-counter.is-done { color: #176d38; }

.b3b-task-chip { margin: 0; display: block; }
.b3b-task-chip-btn {
    width: 100%;
    border-radius: 5px;
    padding: 5px 7px;
    text-align: left;
    cursor: pointer;
    display: flex; flex-direction: column;
    gap: 1px;
    border: 1px solid;
    transition: background 0.12s;
}
.b3b-task-chip-time    { font-size: 0.7rem; color: var(--b3b-color-muted); font-weight: 600; }
.b3b-task-chip-title   { font-size: 0.85rem; font-weight: 500; }
.b3b-task-chip-project { color: #2057b6; font-size: 0.7rem; }
.b3b-task-chip-assigned { font-size: 0.7rem; }
.b3b-task-chip-floating-open .b3b-task-chip-btn {
    background: #fff8e8; border-color: #f1d97f;
}
.b3b-task-chip-floating-open .b3b-task-chip-btn:hover { background: #fdedc1; }
.b3b-task-chip-slotted .b3b-task-chip-btn {
    background: #eafbe5; border-color: #b9e6a9;
}
.b3b-task-chip-slotted .b3b-task-chip-btn:hover { background: #d5f5cb; }
.b3b-task-chip-floating-done .b3b-task-chip-btn {
    background: #f0f2f5; border-color: #d9dde3;
    color: var(--b3b-color-muted);
}
.b3b-task-chip-floating-done .b3b-task-chip-title { text-decoration: line-through; }

.b3b-unplanned-card { background: #fff8e8; border-color: #f1d97f; }
.b3b-unplanned-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #f1d97f;
}
.b3b-unplanned-row:last-child { border-bottom: 0; }
.b3b-unplanned-title { font-weight: 500; }

/* ── Date picker (#stdmodal2) ──────────────────────────────────────────── */
.b3b-dt-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--b3b-color-border);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.b3b-dt-trigger:hover { background: #f7f9fc; }
.b3b-dt-trigger-display { font-weight: 500; }
.b3b-dt-trigger-icon { color: var(--b3b-color-muted); font-size: 0.9rem; }

.b3b-dt-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
}
.b3b-dt-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.b3b-dt-title { margin: 0; font-size: 1rem; }

.b3b-dt-grid { display: grid; gap: 8px; }
.b3b-dt-grid-year  { grid-template-columns: repeat(3, 1fr); }
.b3b-dt-grid-month { grid-template-columns: repeat(7, 1fr); }
.b3b-dt-grid-week  { grid-template-columns: repeat(7, 1fr); gap: 6px; }
.b3b-dt-month-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 8px; margin-bottom: 4px;
    font-size: 0.7rem; text-align: center;
    color: var(--b3b-color-muted); font-weight: 600;
}

.b3b-dt-cell {
    background: #fff;
    border: 1px solid var(--b3b-color-border);
    border-radius: 6px;
    padding: 8px;
    font: inherit; text-align: left;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 4px;
    min-height: 80px;
    transition: background 0.1s, border-color 0.1s;
}
.b3b-dt-cell:hover { background: #f0f6ff; border-color: var(--b3b-color-primary); }
.b3b-dt-cell.is-today { border-color: var(--b3b-color-primary); box-shadow: 0 0 0 1px var(--b3b-color-primary); }
.b3b-dt-cell-outside { opacity: 0.4; }

.b3b-dt-cell-month { padding: 12px; min-height: 90px; }
.b3b-dt-cell-week-day { padding: 0; min-height: 110px; overflow: hidden; }

.b3b-dt-cell-day {
    flex-direction: row; align-items: stretch;
    padding: 0; min-height: 56px;
}
.b3b-dt-cell-day .b3b-dt-cell-body {
    flex: 1;
    background: transparent; border: 0; padding: 6px 8px;
    display: flex; flex-direction: column; gap: 2px;
    text-align: left; font: inherit; cursor: pointer;
}
.b3b-dt-cell-day .b3b-dt-cell-pick {
    border: 0; border-left: 1px solid var(--b3b-color-border);
    background: #f7f9fc;
    padding: 0 10px; cursor: pointer;
    color: #176d38; font-weight: 600;
}
.b3b-dt-cell-day .b3b-dt-cell-pick:hover { background: #d3f1e0; }
.b3b-dt-cell-week-day .b3b-dt-cell-body {
    flex: 1; background: transparent; border: 0; padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
    text-align: left; font: inherit; cursor: pointer;
}
.b3b-dt-cell-week-day .b3b-dt-cell-pick {
    width: 100%;
    border: 0; border-top: 1px solid var(--b3b-color-border);
    background: #f7f9fc;
    padding: 6px; cursor: pointer;
    color: #176d38; font-weight: 600;
}
.b3b-dt-cell-week-day .b3b-dt-cell-pick:hover { background: #d3f1e0; }

.b3b-dt-cell-title { font-size: 1rem; font-weight: 600; }
.b3b-dt-cell-sub { font-size: 0.75rem; color: var(--b3b-color-muted); }
.b3b-dt-cell-weekday { font-size: 0.75rem; color: var(--b3b-color-muted); font-weight: 600; }
.b3b-dt-cell-counts { display: flex; gap: 6px; font-size: 0.75rem; flex-wrap: wrap; }
.b3b-dt-count { font-weight: 600; }
.b3b-dt-count-aftaler { color: #2057b6; }
.b3b-dt-count-opgaver { color: #b85700; }

.b3b-dt-busy-0    { background: #fdfdfd; }
.b3b-dt-busy-low  { background: #f3f9f0; }
.b3b-dt-busy-mid  { background: #fff7e6; }
.b3b-dt-busy-high { background: #ffe9e3; }

/* Day view */
.b3b-dt-day-allday { padding: 8px 0 14px; border-bottom: 1px dashed var(--b3b-color-border); margin-bottom: 12px; }
.b3b-dt-day-grid   { display: flex; flex-direction: column; }
.b3b-dt-day-row {
    display: grid; grid-template-columns: 60px 1fr;
    align-items: center; gap: 8px;
    padding: 4px 0;
    border-top: 1px solid #eee;
}
.b3b-dt-day-row:first-child { border-top: 0; }
.b3b-dt-day-time { color: var(--b3b-color-muted); font-weight: 600; font-size: 0.8rem; }
.b3b-dt-day-bands { display: flex; gap: 4px; flex-wrap: wrap; }
.b3b-dt-day-band {
    padding: 3px 8px; border-radius: 4px;
    font-size: 0.78rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}
.b3b-dt-day-band-aftale { background: #e8f1ff; color: #1d4a99; }
.b3b-dt-day-band-opgave { background: #eafbe5; color: #176d38; }
.b3b-dt-day-pick { width: 100%; }
.b3b-dt-day-slot-busy { background: #fafbfc; }

.b3b-loose-list { margin-bottom: 6px; }
.b3b-loose-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: #fff8e8;
    border: 1px solid #f1d97f;
    border-radius: 5px;
}
.b3b-loose-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.b3b-loose-when {
    font-size: 0.7rem;
    color: var(--b3b-color-muted);
    font-weight: 600;
}
.b3b-loose-title {
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b3b-loose-actions {
    display: flex; gap: 4px; flex-shrink: 0;
}

/* /opgaver — column widths + no-wrap action strip */
.b3b-opgaver-table { table-layout: auto; }
.b3b-opgaver-col-sag       { width: 180px; min-width: 140px; }
.b3b-opgaver-col-status    { width: 120px; }
.b3b-opgaver-col-planned   { width: 140px; white-space: nowrap; }
.b3b-opgaver-col-assigned  { width: 140px; }
.b3b-opgaver-col-actions   {
    width: 1%;                  /* shrink-to-fit; nowrap below dictates real width */
    white-space: nowrap;
    text-align: right;
}
.b3b-opgaver-col-title { min-width: 240px; }
.b3b-opgaver-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b3b-opgaver-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.b3b-opgaver-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}
.b3b-opgaver-actions form { margin: 0; }

.b3b-opgaver-sag-link { text-decoration: none; color: inherit; display: inline-block; }
.b3b-opgaver-sag-link:hover { color: var(--b3b-color-primary); }

.b3b-sag-sidebar h2 { margin-bottom: 6px; }
.b3b-sag-list-item { margin-bottom: 4px; }
.b3b-sag-list-link {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border: 1px solid var(--b3b-color-border);
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: background 0.1s;
}
.b3b-sag-list-link:hover { background: #f5f7fa; text-decoration: none; color: inherit; }
.b3b-sag-list-title { font-weight: 500; }

/* Project detail */
.b3b-sag-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--b3b-space-md);
    margin-bottom: var(--b3b-space-md);
    flex-wrap: wrap;
}
.b3b-sag-tabs { margin-bottom: var(--b3b-space-md); }

.b3b-note {
    padding: 8px 0;
    border-bottom: 1px solid var(--b3b-color-border);
}
.b3b-note:last-child { border-bottom: 0; }
.b3b-note-body { margin-bottom: 4px; white-space: pre-wrap; }

.b3b-cal-row { margin: 0; }
.b3b-cal-row-btn {
    display: grid;
    grid-template-columns: 90px 110px 1fr auto;
    gap: var(--b3b-space-sm);
    align-items: center;
    width: 100%;
    background: #fff;
    border: 1px solid var(--b3b-color-border);
    border-radius: 5px;
    padding: 8px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    text-align: left;
}
.b3b-cal-row-btn:hover { background: #f5f7fa; }
.b3b-cal-row-date { font-weight: 600; }
.b3b-cal-row-time { color: var(--b3b-color-muted); }


/* ───── Konto / Mine data page ───── */

.b3b-konto-page h1 { margin-bottom: 4px; }
.b3b-konto-page .text-muted { margin-bottom: var(--b3b-space-md); }

.b3b-konto-card {
    border: 1px solid var(--b3b-color-border);
    border-radius: 8px;
    background: #fff;
    height: 100%;
}
.b3b-konto-dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 4px 12px;
    margin: 0;
    font-size: 0.9375rem;
}
.b3b-konto-dl dt { color: var(--b3b-color-muted); font-weight: 500; }
.b3b-konto-dl dd { margin: 0; word-break: break-word; }

.b3b-konto-member {
    display: flex;
    align-items: center;
    gap: var(--b3b-space-sm);
    padding: 6px 0;
    border-bottom: 1px solid var(--b3b-color-border);
}
.b3b-konto-member:last-child { border-bottom: 0; }
.b3b-konto-member-name  { font-weight: 500; }
.b3b-konto-member-email { margin-left: auto; }

.b3b-supplier-status-list { display: flex; flex-direction: column; gap: 8px; }
.b3b-supplier-status-row {
    display: flex;
    align-items: center;
    gap: var(--b3b-space-sm);
    padding: 6px 0;
}
.b3b-supplier-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 4px 8px;
    background: var(--chip-bg, #666);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 4px;
    letter-spacing: 0.3px;
}
.b3b-supplier-name { font-weight: 500; flex: 1; }


/* ───── Top-level category bar (below header) ───── */

.b3b-categorybar {
    background: var(--b3b-color-primary, #0d6efd);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.b3b-categorybar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;                        /* single row on desktop */
    gap: 0;
    overflow-x: auto;                         /* horizontal scroll if too tight */
}
.b3b-categorybar-item { flex: 1 1 0; min-width: 0; }
@media (max-width: 767.98px) {
    .b3b-categorybar-list { flex-wrap: wrap; overflow-x: visible; }
    .b3b-categorybar-item { flex: 0 0 33.333%; }
}
@media (max-width: 479.98px) {
    .b3b-categorybar-item { flex: 0 0 50%; }
}

.b3b-categorybar-item { display: flex; }
.b3b-categorybar-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 12px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.2px;
    border-right: 1px solid rgba(255,255,255,0.12);
    transition: background 0.15s;
    line-height: 1.2;
}
.b3b-categorybar-link:hover,
.b3b-categorybar-link.is-active {
    background: rgba(0,0,0,0.15);
    color: #fff;
    text-decoration: none;
}


/* ───── Account bar (below category bar, logged-in only) ───── */

.b3b-accountbar {
    background: #1f2d3d;                          /* darker than category bar */
    color: #fff;
}
.b3b-accountbar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
}
.b3b-accountbar-item { display: flex; }
.b3b-accountbar-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background 0.15s;
}
.b3b-accountbar-link:hover,
.b3b-accountbar-link.is-active {
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
}
@media (max-width: 575.98px) {
    .b3b-accountbar-list { flex-wrap: wrap; }
    .b3b-accountbar-item { flex: 0 0 50%; }
    .b3b-accountbar-link { justify-content: center; width: 100%; }
}


/* ───── Category page ───── */

.b3b-breadcrumb {
    font-size: 0.875rem;
    color: var(--b3b-color-muted);
    margin-bottom: var(--b3b-space-sm);
}
.b3b-breadcrumb a { color: var(--b3b-color-muted); text-decoration: none; }
.b3b-breadcrumb a:hover { color: var(--b3b-color-primary); text-decoration: underline; }
.b3b-breadcrumb-sep { margin: 0 6px; }
.b3b-breadcrumb-current { color: var(--b3b-color-text, #222); font-weight: 500; }

.b3b-category-header { display: flex; align-items: baseline; gap: var(--b3b-space-md); margin-bottom: var(--b3b-space-md); flex-wrap: wrap; }
.b3b-category-meta   { color: var(--b3b-color-muted); font-size: 0.875rem; }

.b3b-category-children { margin-bottom: var(--b3b-space-lg); }
.b3b-category-children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--b3b-space-sm);
}

.b3b-products-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--b3b-space-sm);
}
.b3b-products-sort { display: flex; align-items: center; }


/* ───── Product detail hero: VEK price card + add-to-cart ───── */

.b3b-hero-price {
    background: #f7faff;
    border: 1px solid #cfe0ff;
    border-radius: 8px;
    padding: var(--b3b-space-md);
    margin-top: var(--b3b-space-md);
}
.b3b-hero-price-label {
    font-size: 0.875rem;
    color: var(--b3b-color-muted);
    margin-bottom: 2px;
}
.b3b-hero-price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--b3b-color-primary);
    line-height: 1.1;
}
.b3b-hero-price-meta {
    font-size: 0.8125rem;
    color: var(--b3b-color-muted);
    margin-top: 4px;
}
.b3b-hero-atb { margin-top: var(--b3b-space-sm); }
.b3b-hero-atb .b3b-atb-input { width: 100%; max-width: 320px; }


/* ───── Comparison section (2-col distributor cards) ───── */

.b3b-comparison { margin-top: var(--b3b-space-xl); }
.b3b-comparison h2 { margin-bottom: 4px; }

/* Each card is 2/12 of a row (≈16.66%) → 6 cards per row on ≥ md.
   Wraps to fewer per row on smaller viewports. */
.b3b-comparison-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--b3b-space-sm);
    margin-top: var(--b3b-space-sm);
}
@media (max-width: 991.98px) { .b3b-comparison-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767.98px) { .b3b-comparison-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .b3b-comparison-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 359.98px) { .b3b-comparison-grid { grid-template-columns: 1fr; } }

/* Compact vertical card: chip on top, supplier + varenr in middle, price at bottom. */
.b3b-comp-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--b3b-space-sm);
    border: 1px solid var(--b3b-color-border);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-size: 0.8125rem;
}
.b3b-comp-card-logo {
    background: var(--chip-bg, #666);
    color: #fff;
    font-weight: 700;
    padding: 8px 4px;
    border-radius: 4px;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    line-height: 1;
}
.b3b-comp-card-supplier { font-weight: 600; font-size: 0.8125rem; }
.b3b-comp-card-mpn      { font-size: 0.75rem; color: var(--b3b-color-muted); word-break: break-all; }
.b3b-comp-card-min      { font-size: 0.6875rem; }
.b3b-comp-card-price {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--b3b-color-text, #222);
    white-space: nowrap;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid var(--b3b-color-border);
}


/* ───── Stock badges (hero + comparison cards) ───── */

.b3b-stock {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.b3b-stock-ok       { background: #e7f5ec; color: #1a7f3c; }
.b3b-stock-few      { background: #fff4dc; color: #a46200; }
.b3b-stock-out      { background: #fde8e8; color: #a01919; }
.b3b-stock-unknown  { background: #f0f2f5; color: #555; }
.b3b-stock-loading  { background: #f0f4ff; color: #2057b6; }

.b3b-hero-stock { margin-top: 6px; }

.b3b-comp-card-stock   { margin-top: 4px; }
.b3b-comp-card-updated { font-size: 0.6875rem; color: var(--b3b-color-muted); margin-top: 2px; }

.b3b-comp-card.is-loading { opacity: 0.7; transition: opacity 0.2s; }
.b3b-comp-card.is-loading .b3b-comp-card-price { color: var(--b3b-color-muted); }


/* ───── Mini-basket (header) ───── */

.b3b-minibasket {
    display: inline-flex;
    align-items: center;
    gap: var(--b3b-space-xs, 4px);
    padding: 6px 10px;
    border: 1px solid var(--b3b-color-border);
    border-radius: var(--b3b-radius-md, 6px);
    color: var(--b3b-color-text, #222);
    text-decoration: none;
    background: #fff;
    line-height: 1;
}
.b3b-minibasket:hover {
    background: var(--b3b-color-bg-hover, #f5f7fa);
    text-decoration: none;
}
.b3b-minibasket-icon { color: var(--b3b-color-primary); }
.b3b-minibasket-badge {
    background: var(--b3b-color-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 7px;
    min-width: 20px;
    text-align: center;
}
.b3b-minibasket-total { font-size: 0.875rem; font-weight: 600; }
.b3b-minibasket-empty { color: var(--b3b-color-muted); }


/* ───── Add-to-basket inline form (variant table rows) ───── */

.b3b-atb-form { display: inline-block; }
.b3b-atb-input { width: 200px; }
.b3b-atb-qty { max-width: 70px; }
.b3b-atb-btn { white-space: nowrap; }


/* ───── /basket page ───── */

.b3b-basket-page h1 { margin-bottom: var(--b3b-space-lg); }

.b3b-basket-table th,
.b3b-basket-table td { vertical-align: middle; }
.b3b-basket-col-img { width: 90px; }
.b3b-basket-thumb {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: #fafafa;
    border-radius: 4px;
}
.b3b-basket-name { font-weight: 500; color: var(--b3b-color-text, #222); text-decoration: none; }
.b3b-basket-name:hover { text-decoration: underline; }
.b3b-basket-qty-form {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}
.b3b-basket-qty { max-width: 70px; }
.b3b-basket-actions {
    display: flex;
    justify-content: space-between;
    margin-top: var(--b3b-space-lg);
}


/* ───── Search bar (header) + autocomplete dropdown ───── */

.b3b-searchbar {
    position: relative;
    flex: 1 1 280px;
    min-width: 200px;
    max-width: 520px;
    display: flex;
    align-items: stretch;
}
.b3b-searchbar-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 38px;
}
.b3b-searchbar-btn {
    background: var(--b3b-color-primary);
    color: #fff;
    border: 1px solid var(--b3b-color-primary);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 var(--b3b-space-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.b3b-searchbar-btn:hover { filter: brightness(1.05); color: #fff; }

.b3b-searchbar-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--b3b-color-border);
    border-radius: var(--b3b-radius-md, 6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    max-height: 70vh;
    overflow-y: auto;
}
.b3b-search-empty { padding: var(--b3b-space-md); }

.b3b-search-results {
    margin: 0;
    padding: 0;
}
.b3b-search-item + .b3b-search-item {
    border-top: 1px solid var(--b3b-color-border);
}
.b3b-search-link {
    display: flex;
    align-items: center;
    gap: var(--b3b-space-sm);
    padding: var(--b3b-space-sm) var(--b3b-space-md);
    text-decoration: none;
    color: var(--b3b-color-text, #222);
}
.b3b-search-link:hover {
    background: var(--b3b-color-bg-hover, #f5f7fa);
    text-decoration: none;
}
.b3b-search-img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-radius: 4px;
    overflow: hidden;
}
.b3b-search-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.b3b-search-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.b3b-search-name {
    font-weight: 500;
    font-size: 0.925rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b3b-search-meta {
    font-size: var(--b3b-font-size-sm);
    color: var(--b3b-color-muted);
}
.b3b-search-price {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--b3b-color-primary);
    font-size: 0.925rem;
}
.b3b-search-more {
    padding: var(--b3b-space-sm) var(--b3b-space-md);
    border-top: 1px solid var(--b3b-color-border);
    background: #fafafa;
}

@media (max-width: 767.98px) {
    .b3b-searchbar {
        flex: 1 1 100%;
        order: 10;
        max-width: none;
    }
}

/* Active project pill — "Tilbage til sag {title}" in the header */
.b3b-active-pill-wrap {
    display: flex;
    align-items: center;
    gap: var(--b3b-space-xs);
    padding: var(--b3b-space-sm) 0;
}
.b3b-active-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--b3b-space-sm);
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--b3b-color-border);
    border-radius: 999px;
    background: #fffbe7;
    color: var(--b3b-color-text);
    font-size: var(--b3b-font-size-sm);
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.b3b-active-pill:hover {
    background: #fff5c2;
    border-color: var(--b3b-color-accent);
    color: var(--b3b-color-text);
}
.b3b-active-pill-icon {
    font-size: 0.95rem;
}
.b3b-active-pill-label strong {
    color: var(--b3b-color-primary-dark);
    font-weight: 600;
}
.b3b-active-pill-close {
    margin: 0;
    line-height: 0;
}
.b3b-active-pill-close button {
    background: transparent;
    border: 0;
    color: var(--b3b-color-muted);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 var(--b3b-space-xs);
    cursor: pointer;
}
.b3b-active-pill-close button:hover {
    color: var(--b3b-color-text);
}

/* Project number badge — shown next to title in header + lists */
.b3b-sag-num {
    display: inline-block;
    background: var(--b3b-color-bg-alt);
    color: var(--b3b-color-muted);
    padding: 0.1rem 0.5rem;
    border-radius: var(--b3b-radius-sm);
    font-size: 0.85em;
    font-weight: 500;
    margin-right: var(--b3b-space-sm);
    vertical-align: middle;
}
.b3b-sag-list-num {
    font-variant-numeric: tabular-nums;
    color: var(--b3b-color-muted);
}

/* /sager — all-projects list page */
.b3b-sager-page { display: flex; flex-direction: column; gap: var(--b3b-space-md); }
.b3b-sager-filters {
    display: flex;
    align-items: center;
    gap: var(--b3b-space-md);
    flex-wrap: wrap;
}
.b3b-sager-search { max-width: 360px; }
.b3b-sager-table th { font-weight: 600; color: var(--b3b-color-muted); font-size: var(--b3b-font-size-sm); }
.b3b-sager-link { font-weight: 500; }
.b3b-sager-row td:first-child { white-space: nowrap; }

/* Project basket — Tilbud tab */
.b3b-basket-table { font-size: 0.95em; }
.b3b-basket-th-handle { width: 32px; }
.b3b-basket-handle { white-space: nowrap; line-height: 1; }
.b3b-basket-handle .btn-link { color: var(--b3b-color-muted); text-decoration: none; }
.b3b-basket-handle .btn-link:hover { color: var(--b3b-color-primary); }
.b3b-basket-name { font-weight: 500; }
.b3b-basket-actions { white-space: nowrap; }
.b3b-basket-actions .btn { margin-left: 4px; }
.b3b-basket-totals dt { font-weight: 400; }

/* Source badges */
.b3b-source-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.2;
    background: var(--b3b-color-bg-alt);
    color: var(--b3b-color-text);
    border: 1px solid var(--b3b-color-border);
}
.b3b-source-vek    { background: #e6f0fa; color: #003766; border-color: #b8d4ee; }
.b3b-source-ao     { background: #fff3e0; color: #6b3500; border-color: #ffd9a8; }
.b3b-source-bd     { background: #f1e6fa; color: #4a1d80; border-color: #d4baee; }
.b3b-source-sani   { background: #e6faf3; color: #00553f; border-color: #a8e8c8; }
.b3b-source-solar  { background: #fff7d6; color: #6b5400; border-color: #f0e08a; }
.b3b-source-lm     { background: #fde6e6; color: #6b1010; border-color: #f0b8b8; }
.b3b-source-lager  { background: #f5f5f5; color: #404040; border-color: #d0d0d0; }

/* Project basket summary chip on the SagDetail header */
.b3b-sag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--b3b-space-xs);
    padding: 0.25rem 0.7rem;
    background: #e6f4e6;
    color: #1f5d1f;
    border: 1px solid #bdd9bd;
    border-radius: 999px;
    font-size: var(--b3b-font-size-sm);
    text-decoration: none;
    transition: background 0.15s ease;
}
.b3b-sag-chip:hover {
    background: #d3edd3;
    color: #133813;
}

/* Compact "+ Sag" button on supplier comparison cards */
.b3b-tsv-compact { margin-top: var(--b3b-space-sm); }
.b3b-tsv-compact-btn {
    width: 100%;
    font-size: 0.85em;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
}
.b3b-tsv-compact-btn:hover {
    background-color: #198754;
    color: #fff;
}

/* Source badge as a clickable button (used on Tilbud rows) */
button.b3b-source-badge {
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
button.b3b-source-badge:hover { opacity: 0.85; transform: translateY(-1px); }
button.b3b-source-badge:focus { outline: 2px solid var(--b3b-color-primary); outline-offset: 1px; }

/* Supplier-switch modal grid */
.b3b-skift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--b3b-space-sm);
}
.b3b-skift-block {
    display: flex;
    flex-direction: column;
    padding: var(--b3b-space-sm) var(--b3b-space-md);
    border: 1px solid var(--b3b-color-border);
    border-radius: var(--b3b-radius-md);
    background: var(--b3b-color-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.b3b-skift-block:hover {
    border-color: var(--b3b-color-primary);
    box-shadow: 0 1px 4px rgba(0, 75, 141, 0.1);
}
.b3b-skift-block.is-current {
    border-color: var(--b3b-color-accent);
    background: #f6fbef;
}
.b3b-skift-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--b3b-space-xs);
}
.b3b-skift-block-sub { margin-bottom: var(--b3b-space-sm); }
.b3b-skift-block-cost { margin-top: auto; }
.b3b-skift-block-amount {
    font-size: 1.05rem;
    font-weight: 600;
    margin-right: 0.25em;
}

/* Stock badge slot inside supplier-switch blocks */
.b3b-skift-block-stock { margin-bottom: var(--b3b-space-xs); }
.b3b-skift-block-stock .b3b-stock { font-size: 0.78em; }

/* Oversigt — asset summary cards (Tilbud, Ordre) */
.b3b-asset-card .card-body { display: flex; flex-direction: column; }
.b3b-asset-stats {
    display: flex;
    align-items: flex-start;
    gap: var(--b3b-space-md);
}
.b3b-asset-num {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}
.b3b-asset-lbl {
    color: var(--b3b-color-muted);
    margin-left: 0.25em;
}
.b3b-asset-totals { flex: 1; text-align: right; }
.b3b-asset-totals > div + div { margin-top: 2px; }

/* Photo strip on Oversigt */
.b3b-photo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b3b-space-xs);
}
.b3b-photo-strip-item {
    width: 96px;
    height: 96px;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f3f5;
    display: block;
}
.b3b-photo-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.b3b-photo-strip-more {
    width: 96px;
    height: 96px;
    border-radius: 6px;
    background: #eef0f3;
    color: var(--b3b-color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-decoration: none;
}
.b3b-photo-strip-more:hover { background: #e5e8ec; color: var(--b3b-color-text); }

/* /fotos tab — filter pills above the grid */
.b3b-photo-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b3b-space-xs);
}
.b3b-photo-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--b3b-color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--b3b-color-text);
    text-decoration: none;
    font-size: var(--b3b-font-size-sm);
}
.b3b-photo-filter-pill:hover { background: var(--b3b-color-bg-hover, #f5f7fa); color: var(--b3b-color-text); }
.b3b-photo-filter-pill.is-active {
    background: var(--b3b-color-primary);
    border-color: var(--b3b-color-primary);
    color: #fff;
}
.b3b-photo-filter-pill.is-active:hover { background: var(--b3b-color-primary); }
.b3b-photo-filter-count {
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    border-radius: 999px;
    padding: 0 0.5em;
    font-size: 0.75em;
    line-height: 1.6;
    font-weight: 600;
}
.b3b-photo-filter-pill.is-active .b3b-photo-filter-count {
    background: rgba(255, 255, 255, 0.25);
}

/* Owner chip on each photo tile */
.b3b-photo-tile { position: relative; }
.b3b-photo-owner {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.08);
    pointer-events: auto;
}
.b3b-photo-owner:hover { background: #fff; color: #000; }
.b3b-photo-owner-general { background: rgba(255,255,255,0.85); color: #555; }
.b3b-photo-owner-note    { background: #fff5d6; color: #6b5400; border-color: #f0e08a; }
.b3b-photo-owner-event   { background: #e6f4ff; color: #003766; border-color: #b8d4ee; }
.b3b-photo-owner-offer   { background: #e6faf3; color: #00553f; border-color: #a8e8c8; }

/* Photo trigger — wraps the thumbnail in a VisFotoPreform form. The form
   itself is invisible (display:contents) so the button is the layout child. */
.b3b-photo-form { display: contents; }
button.b3b-photo-strip-item,
button.b3b-photo-link {
    border: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
}
button.b3b-photo-strip-item:hover,
button.b3b-photo-link:hover { filter: brightness(0.97); }
button.b3b-photo-strip-item:focus-visible,
button.b3b-photo-link:focus-visible {
    outline: 2px solid var(--b3b-color-primary);
    outline-offset: 2px;
}

/* Photo viewer modal contents */
.b3b-photo-viewer { display: flex; flex-direction: column; }
.b3b-photo-viewer-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 6px;
    background: #f5f5f5;
    align-self: center;
}
.b3b-photo-viewer-name { word-break: break-all; }

/* ─── Project messaging modal (SendProjectMessage) ─────────────────── */
.b3b-msg-recipients {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px;
    padding: 4px;
    background: #fff;
}
.b3b-msg-rcpt-group-label {
    padding: 6px 8px 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}
.b3b-msg-rcpt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 0;
    transition: background-color 0.1s;
}
.b3b-msg-rcpt-row:hover { background-color: #f3f6fa; }
.b3b-msg-rcpt-row input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.b3b-msg-rcpt-radio {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    background: #fff;
    transition: all 0.1s;
}
.b3b-msg-rcpt-row input[type="radio"]:checked + .b3b-msg-rcpt-radio {
    border-color: #0d6efd;
    background: radial-gradient(circle, #0d6efd 0 5px, #fff 6px 100%);
}
.b3b-msg-rcpt-row input[type="radio"]:focus-visible + .b3b-msg-rcpt-radio {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}
.b3b-msg-rcpt-name {
    font-weight: 500;
    color: #212529;
}
.b3b-msg-rcpt-meta {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.b3b-msg-rcpt-chip {
    background: #eef2f7;
    color: #495057;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.72rem;
}
.b3b-msg-rcpt-chip-missing { color: #dc3545; background: #fdebed; }

/* When SMS tab is active, fade rows with no mobile (and vice-versa). */
.b3b-msg-form[data-msg-channel-active="sms"]   .b3b-msg-rcpt-row[data-has-mobile="0"],
.b3b-msg-form[data-msg-channel-active="email"] .b3b-msg-rcpt-row[data-has-email="0"]  {
    opacity: 0.45;
    cursor: not-allowed;
}
.b3b-msg-form[data-msg-channel-active="sms"]   .b3b-msg-rcpt-row[data-has-mobile="0"] input,
.b3b-msg-form[data-msg-channel-active="email"] .b3b-msg-rcpt-row[data-has-email="0"]  input {
    pointer-events: none;
}

/* Project messages log (Oversigt) */
.b3b-msg-log .b3b-msg-log-row {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.b3b-msg-log .b3b-msg-log-row:last-child { border-bottom: 0; }
.b3b-msg-log-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.b3b-msg-log-channel {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.b3b-msg-log-channel-sms   { background: #e8f4ff; color: #0a58ca; }
.b3b-msg-log-channel-email { background: #f0eaff; color: #5b3dbf; }
.b3b-msg-log-to { font-weight: 500; }
.b3b-msg-log-subject { font-weight: 500; margin-bottom: 2px; }
.b3b-msg-log-body { color: #495057; font-size: 0.9rem; white-space: pre-wrap; }

/* ─── Tilbud (offers) list + viewer ──────────────────────────── */
.b3b-tilbud-list { font-size: 0.95rem; }
.b3b-tilbud-status-sent      { background: #cfe2ff; color: #052c65; }
.b3b-tilbud-status-accepted  { background: #d1e7dd; color: #0a3622; }
.b3b-tilbud-status-rejected  { background: #e9ecef; color: #495057; }
.b3b-tilbud-status-converted { background: #cff4fc; color: #055160; }
.b3b-tilbud-notes {
    background: #fbfbfb;
    border-left: 3px solid var(--b3b-orange);
    padding: 8px 12px;
    font-size: 0.92rem;
    margin-bottom: 12px;
}
.b3b-offer-preview tfoot td { font-size: 0.95rem; }

/* Kurv basket-line offer-membership chips */
.b3b-basket-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.b3b-basket-chip {
    font-weight: 500;
    font-size: 0.7rem;
    padding: 2px 6px;
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
}
.b3b-basket-chip-status {
    opacity: 0.85;
    font-weight: 400;
    font-size: 0.65rem;
}
.b3b-offer-row-locked {
    opacity: 0.55;
}
.b3b-tilbud-delete-row {
    border-top: 1px solid var(--b3b-color-border);
    padding-top: 12px;
}

/* Projekt varer — group header per offer (or "Løse varer") */
.b3b-basket-group {
    border: 1px solid var(--b3b-color-border, #dee2e6);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.b3b-basket-group-header {
    padding: 8px 12px;
    background: #f6f7f9;
    border-bottom: 1px solid var(--b3b-color-border, #dee2e6);
    font-size: 0.95rem;
}
.b3b-basket-group .b3b-basket-table { margin-bottom: 0; }

/* OpretTilbud / RedigerTilbud — task picker columns */
.b3b-offer-pick-th { width: 40px; }
.b3b-offer-task-mode  { width: 110px; }
.b3b-offer-task-hours { width: 90px;  }
.b3b-offer-task-rate  { width: 110px; }
.b3b-offer-task-lump  { width: 130px; }
.b3b-offer-task-pick input[disabled],
.b3b-offer-task-edit input[disabled] { background: #f3f4f6; }
.b3b-totals-num { width: 140px; }

/* Opgaver tab — task list */
.b3b-task-table th { font-weight: 600; }
.b3b-task-table .b3b-task-th-handle { width: 36px; }
.b3b-task-handle {
    display: flex; flex-direction: column; gap: 2px; align-items: center;
    line-height: 1;
}
.b3b-task-handle button { font-size: 0.95rem; }
.b3b-task-title { font-weight: 500; }
.b3b-task-row-locked { background: #fafbfc; }
.b3b-task-row-locked .b3b-task-title::after {
    content: " 🔒";
    font-size: 0.75em;
    color: #aaa;
}

/* Send tilbud — fullscreen modal: PDF iframe left, email form right */
.b3b-send-tilbud { min-height: calc(100vh - 8rem); }
.b3b-send-tilbud-preview iframe {
    width: 100%;
    height: calc(100vh - 9rem);
    border: 1px solid var(--b3b-color-border, #dee2e6);
    border-radius: 4px;
    background: #f6f7f9;
}
@media (max-width: 991.98px) {
    .b3b-send-tilbud { min-height: 0; }
    .b3b-send-tilbud-preview iframe { height: 60vh; }
}