/* =========================================================
   MESSAGE SWIPE (mobil indbakke)
   ========================================================= */
.msg-swipe-list{
    display: none;
}
.msg-swipe-item{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 8px;
    border: 1px solid #e2e8f0;
    touch-action: pan-y;
}
.msg-swipe-action-archive,
.msg-swipe-action-unread{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: #fff;
    font-weight: 600;
    font-size: var(--font-sm);
}
.msg-swipe-action-archive{
    left: 0;
    justify-content: flex-start;
    background: #f59e0b;
    visibility: hidden;
}
.msg-swipe-action-unread{
    right: 0;
    justify-content: flex-end;
    background: #3b82f6;
    visibility: hidden;
}
.msg-swipe-action-unread[hidden]{
    display: none;
}
.msg-swipe-item.swiping-right .msg-swipe-action-archive{ visibility: visible; }
.msg-swipe-item.swiping-left .msg-swipe-action-unread{ visibility: visible; }
.msg-swipe-action-delete{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    color: #fff;
    font-weight: 600;
    font-size: var(--font-sm);
    background: #ef4444;
    visibility: hidden;
}
.msg-swipe-item.swiping-left .msg-swipe-action-delete{ visibility: visible; }
.msg-swipe-content{
    position: relative;
    display: block;
    background: #fff;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease;
    z-index: 1;
}
.msg-swipe-content strong{
    font-size: var(--font-sm);
    color: #0f172a;
    display: block;
}
.msg-swipe-content .muted{
    font-size: var(--font-xs);
    color: #64748b;
    margin-top: 4px;
    display: block;
}
.msg-swipe-content .badge{
    margin-top: 6px;
}
@media (max-width: 900px){
    .msg-swipe-list{
        display: block;
    }
    .msg-desktop-table{
        display: none;
    }
}

/* ── Print-header (skjult normalt, vises kun ved print) ──────── */
.overview-print-header {
    display: none;
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
    @page { size: landscape; margin: 10mm; }

    /* Skjul alt UI der ikke er data */
    .sidebar,
    .topbar,
    .topbar-mobile,
    .mobile-drawer-overlay,
    .mobile-drawer,
    .form-card,
    .overview-period-nav,
    .overview-actions,
    .page-side-nav,
    .app-footer,
    .mobile-menu,
    .install-prompt,
    .notif-bell-wrap,
    .page-head { display: none !important; }

    /* Reset layout — fjern app-shell begrænsninger */
    html, body {
        height: auto !important;
        overflow: visible !important;
    }
    body,
    .app,
    .main,
    #panel-content,
    .content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
    }
    .page-side-layout { display: block !important; }
    .page-side-content { width: 100% !important; padding: 0 !important; }

    /* Print-header */
    .overview-print-header {
        display: block !important;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 2px solid #333;
    }
    .overview-print-title {
        font-size: var(--font-xl);
        font-weight: 700;
        margin-bottom: 4px;
    }
    .overview-print-meta {
        display: flex;
        gap: 24px;
        font-size: var(--font-xs);
        color: #555;
    }

    /* Opsummeringskort: kompakt print-layout */
    .overview-summary-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 12px;
    }
    .overview-summary-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        padding: 8px !important;
        break-inside: avoid;
    }
    .overview-card-header .badge { font-size: 9px !important; padding: 1px 5px !important; }
    .overview-card-title { font-size: var(--font-xs) !important; }
    .overview-card-value { font-size: var(--font-input) !important; }
    .overview-card-count { font-size: var(--font-xs) !important; }
    .overview-card-breakdown { font-size: var(--font-xs) !important; }

    /* Sektionstitler */
    .overview-section-title {
        font-size: var(--font-sm) !important;
        margin-top: 16px !important;
        margin-bottom: 6px !important;
        page-break-after: avoid;
    }

    /* ── Tving responsive-table til normal tabel-layout ──────── */
    .responsive-table {
        font-size: 9px !important;
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
    }
    .responsive-table thead { display: table-header-group !important; }
    .responsive-table thead tr { display: table-row !important; }
    .responsive-table thead th {
        display: table-cell !important;
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-weight: 700 !important;
        font-size: 8px !important;
        padding: 3px 4px !important;
        border: 1px solid #ccc !important;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .responsive-table tbody tr {
        display: table-row !important;
        border-top: none !important;
        padding: 0 !important;
        page-break-inside: avoid;
    }
    .responsive-table tbody td {
        display: table-cell !important;
        position: static !important;
        padding: 2px 4px !important;
        border: 1px solid #ddd !important;
        word-break: normal !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Skjul data-label pseudo-elementer */
    .responsive-table tbody td::before {
        content: none !important;
        display: none !important;
    }
    .table-wrap { overflow: visible !important; }

    /* Overview Status-kolonne i print */
    .overview-table .col-status {
        width: 60px !important;
        text-align: center !important;
    }

    /* Badges */
    .badge {
        font-size: 8px !important;
        padding: 1px 4px !important;
        border: 1px solid #999 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        white-space: nowrap;
    }

    /* Generelt */
    .card { box-shadow: none !important; break-inside: avoid; }
    a[href] { text-decoration: none !important; color: inherit !important; }
}

/* ── Mobile touch target for small buttons ── */
@media (max-width: 1200px) {
    .btn-sm:not(td .btn-sm) {
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* ── Offline banner ── */
.offline-banner {
    position: fixed;
    top: calc(var(--topbar-height, 60px) + var(--safe-top, 0px));
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #ff9500, #ff6f00);
    color: #fff;
    font-size: var(--font-sm);
    font-weight: 600;
    text-align: center;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 9999;
    animation: offlineBannerIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.offline-banner.removing {
    animation: offlineBannerOut 0.25s ease-in forwards;
}
.offline-banner svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
@keyframes offlineBannerIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes offlineBannerOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
}

/* =========================================================
   BOTTOM SHEET — genbrugelig overlay-komponent
========================================================= */
.bottom-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Over ALT (nav 999, modaler 3000, hours-edit 4000) — bund-nav'en lagde
       sig ellers som frosted hvid flade over sheet-footerens Gem-knap */
    z-index: 4090;
    opacity: 0;
    /* EKSPERIMENT (statusbar): INGEN transition — bagtæppet skifter i ét hug
       som det gamle modal-system, der beviseligt aldrig udløser grå stribe.
       Animeret fuldskærms-fade var en hovedmistænkt for iOS' omsampling. */
    -webkit-tap-highlight-color: transparent;
}
.bottom-sheet-overlay.active {
    display: block;
    opacity: 1;
}
.bottom-sheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: var(--card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
    z-index: 4100;
    flex-direction: column;
    transform: translateY(100%);
    /* EKSPERIMENT (statusbar): ingen transitioner — åbn/luk i ét hug som det
       gamle modal-system (se overlay-kommentaren ovenfor) */
    will-change: transform;
    overscroll-behavior: contain;
}
@media (min-width: 768px) {
    .bottom-sheet {
        max-width: 540px;
        max-height: min(80vh, 700px);
        inset: 0;
        margin: auto;
        /* Mockup-tokens (godkendte artifacts): kort m. 1px kant + radius 14 + blød skygge */
        border-radius: 14px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
        /* EKSPERIMENT (statusbar): ingen fade — åbn/luk i ét hug som det gamle
           modal-system (overlay er også uden transition, så luk er stadig ét hug) */
        transform: none;
        opacity: 0;
    }
    .bottom-sheet.active {
        opacity: 1;
    }
    .bottom-sheet-handle {
        display: none;
    }
    .bottom-sheet-overlay {
        cursor: pointer;
    }
}
.bottom-sheet.active {
    display: flex;
    transform: translateY(0);
}
/* Kompakt variant: sheet der sizer til indhold (ikke en hoej, tom boks).
   Mobil: kort bottom-sheet. Desktop: lille centreret kort. */
.bottom-sheet--compact .bottom-sheet-body {
    flex: 0 1 auto;
}
/* Bred variant: store formularer (Opret projekt/kunde) — bredere desktop-kort */
@media (min-width: 768px) {
    .bottom-sheet--wide {
        max-width: 720px;
        max-height: min(85vh, 820px);
    }
}
@media (min-width: 768px) {
    .bottom-sheet.bottom-sheet--compact,
    .bottom-sheet.bottom-sheet--compact.active {
        inset: auto;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        margin: 0;
        transform: translate(-50%, -50%);
        width: min(92vw, 380px);
        max-width: 380px;
        height: auto;
        max-height: min(80vh, 520px);
    }
}
.bottom-sheet-handle {
    width: 36px;
    height: 5px;
    background: var(--border-strong);
    border-radius: 3px;
    margin: 10px auto 0;
    flex-shrink: 0;
    cursor: grab;
}
.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 8px;
    flex-shrink: 0;
}
.bottom-sheet-title {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text);
}
.bottom-sheet-subtitle {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.4;
}
.bottom-sheet-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--muted);
    font-size: var(--font-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    min-width: 44px;
}
.bottom-sheet-close:active {
    background: var(--border);
}
.bottom-sheet-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 20px;
}
/* Feltlabels i sheets: små uppercase (fælles stil). Komponent-labels med egen
   styling (toggle-rækker, medarbejder-chips) er undtaget — de er flex-rækker
   som display:block/uppercase ellers ville ødelægge. */
/* Toggles i sheets: undtaget fra block-reglen nedenfor (den brød flex-
   centreringen så teksten faldt ned i bunden af kontakten) — men de skal
   stadig stå på hver sin linje med sheet-rytmens afstand */
.bottom-sheet-body .form-toggle { display: flex; margin-top: 12px; }
.bottom-sheet-body label:not(.sheet-pill):not(.sw-row):not(.emp-chip):not(.check-item):not(.form-toggle) {
    display: block;
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bottom-sheet-body label:first-child {
    margin-top: 0;
}
/* Formularer i sheets: samme tætte label/felt-rytme som modalerne — den
   globale input{margin-top:6px} lagde sig oven i labelens bund-margin */
.bottom-sheet-body .form-row label { margin: 12px 0 4px; }
.bottom-sheet-body .form-row input,
.bottom-sheet-body .form-row select,
.bottom-sheet-body .form-row textarea { margin-top: 0; }
.bottom-sheet-footer {
    padding: 12px 20px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    gap: 8px;
}
.bottom-sheet-footer .btn {
    flex: 1;
}
.bottom-sheet-footer .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Auto-injiceret Annullér (bottom_sheet.js): kun desktop — på mobil dækker
   X/swipe/overlay, og footeren beholder den fulde primærknap */
.bottom-sheet-cancel { display: none; }
@media (min-width: 768px) {
    .bottom-sheet-cancel { display: inline-flex; }
    /* Mockup-konventionen: kompakte, højrestillede footer-knapper på desktop;
       en evt. Slet-knap skubbes helt til venstre */
    .bottom-sheet-footer { justify-content: flex-end; }
    .bottom-sheet-footer .btn { flex: 0 0 auto; min-width: 110px; }
    .bottom-sheet-footer .btn-danger:first-child { margin-right: auto; }
}
/* hidden-attributten SKAL vinde over .btn's display-regel — ellers vises
   begge mode-knapper samtidig (Opret projekt/Tilføj ordrenummer) */
.bottom-sheet-footer [hidden] {
    display: none !important;
}

/* FAB — Floating Action Button */
.fab {
    position: fixed;
    bottom: calc(var(--tab-bar-height, 82px) + 16px);
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: var(--font-2xl);
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
    cursor: pointer;
    z-index: 100;
    transition: transform var(--duration-fast) var(--ease-ios), box-shadow var(--duration-fast);
    -webkit-tap-highlight-color: transparent;
}
.fab:active {
    transform: scale(0.92);
}
@media (min-width: 769px) {
    .fab { display: none; }
}
@media (max-width: 768px) {
    .page-header .fab-hides-on-mobile {
        display: none !important;
    }
}

/* =========================================================
   PROFILE SUMMARY — opsummering ved standardprofil
========================================================= */
.profile-summary {
    background: #e3fcef;
    border: 1.5px solid var(--success);
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}
.profile-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.profile-summary-icon {
    font-size: var(--font-xl);
    flex-shrink: 0;
}
.profile-summary-name {
    font-weight: 700;
    font-size: var(--font-input);
    color: #00875a;
}
.profile-summary-sub {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}
.profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.profile-summary-cell {
    background: rgba(255, 255, 255, 0.7);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-align: center;
}
.profile-summary-cell-label {
    font-size: var(--font-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.profile-summary-cell-value {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text);
}
.profile-summary-cell-total .profile-summary-cell-value {
    color: #00875a;
}

@media (max-width: 480px) {
    .profile-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .profile-summary-cell-value {
        font-size: var(--font-input);
    }
}

/* =========================================================
   WEEK OVERVIEW — genbrugelig ugeoversigt (tid, korsel, diaeter, udlaeg)
========================================================= */
.week-summary-bar {
    margin: 12px 0 8px;
    background: var(--text);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
.week-summary-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
.week-summary-nav-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.week-summary-nav-btn:active {
    background: rgba(255,255,255,0.25);
}
.week-summary-nav-btn svg {
    width: 16px;
    height: 16px;
}
.week-summary-label {
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.week-summary-range {
    font-size: var(--font-xs);
    font-weight: 400;
    opacity: 0.7;
}
.week-summary-label input[type="date"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.week-summary-total {
    font-size: var(--font-sm);
    font-weight: 700;
}
.week-summary-total small {
    font-weight: 400;
    opacity: 0.7;
    font-size: var(--font-xs);
}

/* Day cards (week overview) — scoped under .day-card-list to avoid dashboard .day-card conflict */
.day-card-list {
    padding: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.day-card-list .day-card {
    background: var(--card);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: transform 0.1s ease;
    border: none;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    min-height: auto;
    position: relative;
    overflow: hidden;
}
.day-card-list .day-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
}
.day-card-list .day-card:active {
    transform: scale(0.98);
}
.day-card-list .day-card--today::before {
    background: var(--primary);
}
.day-card-list .day-card--has-entry::before {
    background: var(--success);
}
.day-card-list .day-card--today.day-card--has-entry::before {
    background: var(--primary);
}
.day-card-list .day-card--empty {
    opacity: 0.55;
}
.day-card-supplements {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.supplement-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    padding: 1px 7px;
    border-radius: 6px;
    line-height: 1.5;
}
.day-card--drive {
    background: var(--card);
    opacity: 0.85;
    cursor: default;
}
.day-card--drive .day-card-day {
    color: var(--muted);
    font-weight: 600;
}
.day-card--drive .day-card-info {
    font-size: 11px;
    color: var(--muted);
}
.day-card--drive .day-card-value {
    color: var(--muted);
    font-size: 13px;
}
.day-card-drive-row {
    border-top: 1px dashed var(--border);
    cursor: default;
}
.day-card-drive-row .day-card-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
}
.day-card-drive-row .day-card-value {
    color: var(--muted);
    font-size: 13px;
}
.day-card-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.day-card-day {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
}
.day-card-date {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text);
}
.day-card-info {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.day-card-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.day-card-value {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--success);
}
.day-card-value--empty {
    color: var(--muted);
    font-weight: 400;
}
.day-card-chevron {
    color: var(--muted);
}
.day-card-chevron svg {
    width: 16px;
    height: 16px;
}

/* Sub-rows for multiple entries per day */
.day-card-list .day-card--multi {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    cursor: default;
}
.day-card-list .day-card--multi:active {
    transform: none;
}
.day-card--multi .day-card-day-header {
    padding: 10px 16px 4px;
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
}
.day-card-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-top: 1px solid var(--border);
}
.day-card-sub-row:first-of-type {
    border-top: none;
}
.day-card-sub-row:active {
    background: var(--bg);
}

/* FAB */
.week-fab {
    position: fixed;
    bottom: calc(var(--tab-bar-height, 82px) + 16px + var(--safe-bottom, 0px));
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.week-fab:active {
    transform: scale(0.9);
}
@media (min-width: 768px) {
    .week-fab {
        bottom: 32px;
        right: 40px;
    }
}
.week-fab svg {
    width: 24px;
    height: 24px;
}

/* ── Bottom sheet form helpers ── */
.sheet-context-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.sheet-context-bar-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sheet-context-bar-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sheet-field-label {
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin-bottom: 4px;
    margin-top: 12px;
}
.sheet-field-label:first-child {
    margin-top: 0;
}

.sheet-day-badge {
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: auto;
}
.sheet-day-badge--weekday {
    background: var(--bg);
    color: var(--muted);
}
.sheet-day-badge--saturday {
    background: #e8f2ff;
    color: var(--primary);
}
.sheet-day-badge--sunday {
    background: #fff3e0;
    color: #e65100;
}
/* Helligdag: arver søndag-farver (orange) */
.sheet-day-badge--holiday {
    position: relative;
}

.sheet-fieldset {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.sheet-fieldset-legend {
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
    margin-bottom: 10px;
}

/* ── Kørselssheet: Til-adresse-forslag (Hjem/projektadresse) ── */
.driving-suggest {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    background: var(--primary-light);
    border: 1.5px dashed rgba(0, 122, 255, 0.45);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    margin-top: 8px;
    cursor: pointer;
    font-family: inherit;
}
.driving-suggest svg {
    flex-shrink: 0;
    color: var(--primary);
}
.driving-suggest .ds-main {
    min-width: 0;
    flex: 1;
}
.driving-suggest .ds-title {
    display: block;
    font-size: 13px;
    font-weight: 650;
    color: var(--text);
}
.driving-suggest .ds-addr {
    display: block;
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.driving-suggest .ds-tag {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--primary);
    background: var(--card);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

/* ── Kørselssheet: "Færdig på projektet?"-boks (kørsel hjem) ── */
.sheet-fieldset.driving-finish {
    background: #fff3e0;
    border-color: #f4d8ac;
}
.driving-finish-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.driving-finish-head input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.driving-finish-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.driving-finish-text {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 3px;
}
.driving-finish-warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    color: #b45309;
    margin-top: 8px;
}
.driving-finish-warn svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.sheet-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sheet-time-grid label.sheet-field-label {
    margin-top: 0;
}
.sheet-time-grid input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text);
    background: var(--card);
    text-align: center;
}
.sheet-time-grid input:focus {
    border-color: var(--primary);
    outline: none;
}
.sheet-time-grid input.is-zero {
    color: var(--muted);
    font-weight: 400;
}
.sheet-time-grid input.input-error {
    border-color: var(--danger, #e74c3c);
    background: #fff5f5;
}
.sheet-time-grid input.input-error:focus {
    border-color: var(--danger, #e74c3c);
}

/* Custom datetime display: pænere visning af dato + tid i to linjer */
.datetime-display-wrapper {
    position: relative;
    width: 100%;
    height: 56px;
}
.sheet-time-grid .datetime-display-wrapper input.datetime-native,
.datetime-display-wrapper input.datetime-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    z-index: 2;
    font-size: 16px; /* undgå iOS auto-zoom ved fokus */
    text-align: left;
}
.datetime-display {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    pointer-events: none;
    transition: border-color 0.15s ease;
    padding: 4px 6px;
    box-sizing: border-box;
    overflow: hidden;
}
.datetime-display-wrapper .datetime-native:focus + .datetime-display {
    border-color: var(--primary);
}
.datetime-display-date {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text);
    white-space: nowrap;
}
.datetime-display-time {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--muted);
    white-space: nowrap;
}
.datetime-display.is-empty .datetime-display-date {
    color: var(--muted);
    font-weight: 500;
}
.datetime-display.is-empty .datetime-display-time {
    display: none;
}

.autofill-hint {
    font-size: 0.75em;
    color: var(--text-muted, #9ca3af);
    margin-left: 0.4em;
    font-style: italic;
    font-weight: 400;
}

.field-max-error {
    font-size: 11px;
    color: var(--danger, #e74c3c);
    margin-top: 2px;
    font-weight: 500;
}

.sheet-total-bar {
    background: var(--primary-light);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sheet-total-bar-label {
    font-size: var(--font-xs);
    color: var(--primary);
    font-weight: 500;
}
.sheet-total-bar-value {
    font-size: var(--font-input);
    font-weight: 700;
    color: var(--primary);
}

/* ── Pill toggles (kost/logi i diæt bottom sheet) ─────────── */
.sheet-pill-group {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.sheet-pill-group .sheet-pill {
    flex: 1;
    min-width: 0;
}
.sheet-pill {
    position: relative;
    cursor: pointer;
    margin: 0;
    display: flex;
    height: 50px;
}
.sheet-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.sheet-pill-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 0 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--card);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
}
.sheet-pill-label::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--border);
    flex-shrink: 0;
}
.sheet-pill input:checked + .sheet-pill-label {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}
.sheet-pill input:checked + .sheet-pill-label::before {
    background: var(--primary);
}

.sheet-profile-card {
    background: #e3fcef;
    border: 1.5px solid var(--success);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.sheet-profile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sheet-profile-header svg {
    color: var(--success);
    flex-shrink: 0;
}
.sheet-profile-name {
    font-weight: 700;
    font-size: var(--font-body);
    color: #16a34a;
}
.sheet-profile-sub {
    font-size: var(--font-xs);
    color: var(--text-secondary);
}
.sheet-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.sheet-profile-cell {
    background: rgba(255,255,255,0.7);
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
}
.sheet-profile-cell-label {
    font-size: var(--font-xs);
    color: var(--muted);
    text-transform: uppercase;
}
.sheet-profile-cell-value {
    font-size: var(--font-input);
    font-weight: 700;
}
.sheet-profile-cell--total .sheet-profile-cell-value {
    color: var(--success);
}

.sheet-approved-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #dcfce7;
    border: 1.5px solid var(--success);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.sheet-approved-banner svg {
    flex-shrink: 0;
    color: var(--success);
}
.sheet-approved-banner-text {
    font-weight: 700;
    font-size: var(--font-sm);
    color: #16a34a;
}
.sheet-approved-banner-sub {
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.sheet-error {
    background: #ffebe6;
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: 500;
    margin-bottom: 12px;
    display: none;
}
.sheet-error.visible {
    display: block;
}

/* ── Sheet file area ──────────────────────── */
.sheet-file-area {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    overflow: hidden;
}
.sheet-file-existing {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.sheet-file-existing-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    width: 100%;
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.sheet-file-existing-icon {
    flex-shrink: 0;
    display: flex;
}
.sheet-file-existing-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sheet-file-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    transition: background 0.15s;
}
.sheet-file-upload:active {
    background: var(--hover-bg, rgba(0,0,0,0.03));
}
.sheet-file-upload-text {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sheet-file-new {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--primary-light, #eef4ff);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
}
.sheet-file-new-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.sheet-file-new-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px;
    color: var(--muted);
    cursor: pointer;
    display: flex;
}

/* ── File lightbox ────────────────────────── */
.file-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.file-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
}
.file-lightbox-close {
    position: absolute;
    top: max(env(safe-area-inset-top, 12px), 12px);
    right: 12px;
    z-index: 2;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}
.file-lightbox-content {
    position: relative;
    z-index: 1;
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.file-lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
}

/* =========================================================
   MESSAGE TABLE
========================================================= */
.msg-channels { display:flex; gap:5px; align-items:center; }
.msg-channels svg { color:#6b7280; }
.msg-channels svg[data-active] { color:#2563eb; }
.messages-list-table { table-layout: auto !important; }
.messages-list-table .col-msg-date  { width:1px; white-space:nowrap; }
.messages-list-table .col-msg-ch    { width:1px; white-space:nowrap; }
.messages-list-table .col-msg-read  { width:1px; white-space:nowrap; text-align:center; }
@media (max-width: 1200px) {
    .messages-list-table .col-msg-read { text-align:left; }
    .messages-list-table .col-actions  { display:none; }
}

/* =========================================================
   BILLING PROFILES
========================================================= */
.billing-profile-list{
    display:grid;
    gap:12px;
    margin-top:16px;
}
.billing-block-row{
    border:1px solid #e6e6e6;
    border-radius:10px;
    padding:12px;
    margin-top:12px;
    background:#fff;
}
.billing-block-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.billing-days{
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}

/* ── Badge actions: popover, bottom sheet, modal (admin_overview) ───── */
.badge-clickable {
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.badge-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.badge-clickable:active {
    transform: translateY(0);
}

.badge-popover {
    position: absolute;
    z-index: 3500;
    min-width: 180px;
    max-width: 320px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}
.badge-popover-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 7px;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    transition: background 0.1s ease;
}
.badge-popover-action:hover {
    background: var(--bg);
}
.badge-popover-action[data-action="approve"] {
    color: var(--success);
}
.badge-popover-action[data-action="reject"] {
    color: var(--danger);
}
.badge-popover-action[data-action="modify"] {
    color: var(--primary);
}
.badge-popover-action[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.badge-popover-action:focus-visible,
.badge-popover-reject-actions button:focus-visible,
.badge-popover-confirm-actions button:focus-visible,
.badge-actions-modal-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.badge-popover-reject-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    min-width: 260px;
}
.badge-popover-reject-form label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.badge-popover-reject-form textarea {
    min-height: 70px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}
.badge-popover-reject-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.badge-popover-reject-actions button {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.badge-popover-reject-actions button[type="submit"] {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.badge-popover-reject-actions button[type="submit"][disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.badge-popover-error {
    color: var(--danger);
    font-size: 12px;
    padding: 4px 8px;
}

.badge-popover-confirm {
    padding: 12px;
    min-width: 280px;
}
.badge-popover-confirm-title {
    font-weight: 600;
    margin-bottom: 6px;
}
.badge-popover-confirm-body {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
    line-height: 1.4;
}
.badge-popover-confirm-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.badge-popover-confirm-actions button {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.badge-popover-confirm-actions button[type="submit"] {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* History modal — overlay layer over admin_overview */
.badge-actions-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 4500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.badge-actions-modal {
    background: var(--card);
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.badge-actions-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.badge-actions-modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.badge-actions-modal-close {
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--muted);
}
.badge-actions-modal-close:hover {
    background: var(--bg);
}
.badge-actions-modal-body {
    overflow-y: auto;
    padding: 16px 18px;
    flex: 1;
}

/* Inline kopier-knap — bruges ved felter med data-copy */
.btn-copy-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--muted, #888);
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.btn-copy-inline:hover,
.btn-copy-inline:focus {
    background: var(--bg-hover, #f0f0f0);
    color: var(--primary, #0066cc);
    outline: none;
}
.btn-copy-inline:active {
    transform: scale(0.94);
}
.btn-copy-inline svg {
    display: block;
}
.copy-cell {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* =========================================================
   LØNSEDDEL — medarbejder lønside (employee_salary.php)
   ========================================================= */

/* Manglende utility-klasser brugt af lønside */
.text-right { text-align: right; }

.badge-success { background: var(--success); }
.badge-warning { background: var(--warning); }

.alert-info {
    background: rgba(0, 122, 255, 0.08);
    color: #004fa3;
    border: 1px solid rgba(0, 122, 255, 0.18);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
}

/* Deaktiveret pil-knap i periode-navigering */
.cal-month-btn--disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Periode-navigeringsrække */
.period-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Synlig knap-ring på periode-pilene (så de ikke ligner bar tekst) */
.period-nav .cal-month-btn {
    border: 1px solid var(--border, #d8dde6);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.period-nav .cal-month-btn:hover {
    background: rgba(0, 122, 255, 0.06);
}

.period-nav-label {
    flex: 1;
    min-height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text);
    text-align: center;
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-ios);
    line-height: 1.3;
}

.period-nav-label:hover {
    background: rgba(0, 122, 255, 0.06);
}

.period-nav-label:active {
    background: rgba(0, 122, 255, 0.10);
}

/* Periode-liste (dropdown) */
[data-period-list] {
    margin-top: 6px;
    background: var(--card, #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

.period-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text);
    font-size: var(--font-sm);
    border-bottom: 1px solid var(--border);
    transition: background var(--duration-fast) var(--ease-ios);
    min-height: 48px;
}

.period-list-item:last-child {
    border-bottom: none;
}

.period-list-item:hover {
    background: rgba(0, 122, 255, 0.04);
}

.period-list-item:active {
    background: rgba(0, 122, 255, 0.08);
}

.period-list-item--active {
    background: rgba(0, 122, 255, 0.06);
    font-weight: 600;
}

.period-list-date {
    flex: 1 1 auto;
    font-weight: 500;
    color: var(--text);
}

.period-list-payout {
    flex: 0 0 100%;
    font-size: var(--font-xs);
    color: var(--muted);
    margin-top: -4px;
}

/* Sub-tab segmented control (iOS-stil) */
.sub-tab-bar {
    display: flex;
    background: rgba(118, 118, 128, 0.12);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}

.sub-tab-btn {
    flex: 1;
    min-height: 36px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-ios),
                color var(--duration-fast) var(--ease-ios),
                box-shadow var(--duration-fast) var(--ease-ios);
    line-height: 1.3;
    white-space: nowrap;
}

.sub-tab-btn:active {
    transform: scale(0.97);
}

.sub-tab-btn.on {
    background: var(--card, #fff);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

/* Estimat-forbehold på lønseddel */
.salary-estimate-note {
    margin-bottom: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 159, 10, 0.10);
    border: 0.5px solid rgba(255, 159, 10, 0.30);
    color: var(--muted);
    font-size: var(--font-sm);
    line-height: 1.4;
}

.salary-estimate-note strong {
    color: var(--text);
}

/* Status + udbetalingsdato under periode-vælgeren (pille, centreret) */
.salary-period-payout {
    margin: 10px 0 0;
    text-align: center;
}

.salary-period-payout span {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--font-sm);
    font-weight: 600;
}

/* Foreløbig = orange, Endelig = grøn */
.salary-period-payout--provisional span {
    background: rgba(255, 159, 10, 0.12);
    color: #b26a00;
}

.salary-period-payout--final span {
    background: rgba(52, 199, 89, 0.14);
    color: #1f7a37;
}

/* Mobiljusteringer for lønseddel */
@media (max-width: 1200px) {
    .period-nav-label {
        font-size: var(--font-sm);
    }

    [data-period-list] {
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
    }

    .sub-tab-bar {
        background: rgba(118, 118, 128, 0.12);
    }

    .sub-tab-btn.on {
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    }

    .alert-info {
        border-radius: 14px;
        border: none;
        background: rgba(0, 122, 255, 0.09);
    }
}

/* Projekt-liste: kolonnerne styres af <colgroup> i admin_project_list.php.
   Headere må ikke bryde linjen; lange adresser/placeringer brækker pænt i body. */
.project-list-table thead th {
    white-space: nowrap;
}
.project-list-table tbody td {
    word-break: break-word;
}

/* Samlet overblik: små pill-chips til projekt-status-filter
   (Alle / Aktive / Afsluttet / Arkiveret) — sidder efter projekt-dropdownen. */
.overview-project-status-filter {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}
.overview-project-status-filter .chip {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0, 122, 255, 0.06);
    color: var(--primary, #007aff);
    border: 1px solid rgba(0, 122, 255, 0.20);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.overview-project-status-filter .chip:hover {
    background: rgba(0, 122, 255, 0.12);
    border-color: rgba(0, 122, 255, 0.32);
}
.overview-project-status-filter .chip.active {
    background: var(--primary, #007aff);
    color: #fff;
    border-color: var(--primary, #007aff);
}
.overview-project-status-filter .chip:focus-visible {
    outline: 2px solid rgba(0, 122, 255, 0.45);
    outline-offset: 2px;
}

/* Mobil: chips wrapper pænt og får lidt større tap-area (men beholder chip-look) */
@media (max-width: 1200px) {
    .overview-project-status-filter {
        gap: 6px;
        margin-top: 6px;
    }
    .overview-project-status-filter .chip {
        padding: 7px 14px;
        font-size: 13px;
        min-height: 34px;
    }
}

/* ── Sverige-modul: taeller-meter, dokument-sektioner, tur-liste ───── */
.sweden-meter { display: inline-flex; align-items: center; gap: 8px; }
.sweden-bar { width: 64px; height: 6px; border-radius: 3px; background: var(--border, #e5e8ec); overflow: hidden; flex: 0 0 auto; }
.sweden-bar i { display: block; height: 100%; border-radius: 3px; }
.sweden-bar-ok i { background: #34c759; }
.sweden-bar-warn i { background: #ffcc00; }
.sweden-bar-alert i { background: #ff3b30; }
.sweden-counts { display: flex; gap: 10px; margin-bottom: 14px; }
.sweden-count { flex: 1; border: 1px solid var(--border, #e5e8ec); border-radius: 10px; padding: 8px 12px; }
.sweden-count .sweden-count-n { font-size: 18px; font-weight: 800; }
.sweden-count .sweden-count-l { font-size: 11px; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: .3px; }
.sweden-trip-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--border, #eef0f3); cursor: pointer; }
.sweden-trip-row:last-child { border-bottom: none; }
.sweden-doc-section { border: 1px solid var(--border, #e5e8ec); border-radius: 12px; padding: 11px 12px; margin-bottom: 10px; }
.sweden-doc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sweden-doc-file { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-subtle, #fafbfc); border: 1px solid var(--border, #e8ebef); border-radius: 8px; margin-top: 8px; font-size: 13px; }
.sweden-doc-meta { font-size: 12px; color: var(--muted, #6b7280); }
.sweden-upload-label { margin-top: 8px; }
.sweden-warn-note { font-size: 12px; color: #9a6b00; margin-top: 4px; }

/* Sverige-oversigt: kolonnebredder (overstyrer pending-table-generikken) —
   taeller-kolonnerne faar luft, Status skubbes helt til hoejre */
/* Udland-tabellen kører på register-stilen (.doc-table) — kun bredder/nowrap her */
.sweden-table th { white-space: nowrap; }
.sweden-table th:nth-child(1),
.sweden-table td:nth-child(1) { width: 200px; }
.sweden-table th:nth-child(2),
.sweden-table td:nth-child(2) { width: 230px; }
.sweden-table th:nth-child(3),
.sweden-table td:nth-child(3) { width: 230px; }
.sweden-table th:nth-child(4),
.sweden-table td:nth-child(4) { width: 150px; }
.sweden-table th:nth-child(5),
.sweden-table td:nth-child(5) { width: auto; }
.sweden-table th:nth-child(6),
.sweden-table td:nth-child(6) { width: 140px; text-align: right; }
.sweden-table-head { display: flex; justify-content: flex-start; margin-bottom: 8px; }

/* Udland-modul: lande-faner (samme udtryk som customer-edit-tabs, men synlige paa mobil) */
.sweden-country-tabs { display: flex; gap: 4px; flex-wrap: wrap; background: #eceef2; padding: 5px; border-radius: 12px; margin-bottom: 4px; }
.sweden-country-tabs button { border: 0; background: transparent; padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; color: #475569; cursor: pointer; }
.sweden-country-tabs button.is-active { background: #fff; color: var(--text, #0f1419); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Bredde-politik (masterplan designregel 9): data-lister og faneprofiler
   udvider sig ALTID automatisk til den tilgængelige bredde, op til ét
   fast loft (~2300px) — derover centreres med luft. Dashboards capper IKKE.
   (Bemærk: .content har egne trin (1600/1800/2200/2600), så på mindre
   skærme er det .content, der reelt begrænser.) */
.module-max { max-width: 2300px; margin-left: auto; margin-right: auto; }

/* Faneprofil (etape 3): toolbar over fanerne — mobil bruger topbar i stedet */
.profile-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0; }
@media (max-width: 767px) { .profile-toolbar { display: none; } }

/* Faneprofil (etape 3b, prototypens udtryk): lille tilbage-link + header-kort */
.backlink-sm { display: inline-flex; align-items: center; gap: 4px; color: #2a5db0; font-weight: 650; font-size: 13px; text-decoration: none; margin: 10px 0 2px; }
.backlink-sm:hover { text-decoration: underline; }
@media (max-width: 767px) { .backlink-sm { display: none; } }

.profile-head-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.phc-avatar { width: 52px; height: 52px; border-radius: 50%; background: #dfe6f2; color: #2a5db0; font-weight: 750; font-size: 17px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 52px; }
.phc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.phc-meta { flex: 1; min-width: 160px; }
.phc-name { font-weight: 750; font-size: 17px; }
.phc-sub { font-size: 12.5px; color: #708090; margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.phc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) { .phc-actions { display: none; } }

/* Projektside: projektnr som "avatar"-brik i profilhovedet */
.phc-projno { min-width: 56px; height: 56px; border-radius: 14px; background: #e8effc; color: #2a5db0; font-weight: 750; font-size: 13.5px; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* Nøgletals-flise: undertal (fx timefordeling på projektsiden) */
.stat-tile .st-sub { font-size: 11px; color: #8a97a5; margin-top: 4px; line-height: 1.5; }

/* Timefordeling: inline prik-liste på desktop, læsbare label/tal-rækker på mobil */
.stat-tile .st-sub-rows { display: none; }
@media (max-width: 767px) {
    .stat-tile .st-sub-inline { display: none; }
    .stat-tile .st-sub-rows { display: block; margin-top: 7px; }
    /* Flisen med fordeling fylder hele bredden, så rækkerne kan trække vejret */
    .stat-tile:has(.st-sub-rows) { grid-column: 1 / -1; }
    .stat-tile .st-sub-rows .sr { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: #708090; padding: 3px 0; border-bottom: 1px solid #f0f2f6; }
    .stat-tile .st-sub-rows .sr:last-child { border-bottom: 0; padding-bottom: 0; }
    .stat-tile .st-sub-rows .sr b { color: var(--text, #0f1419); font-variant-numeric: tabular-nums; font-weight: 650; }
}

/* ── Projekt-økonomi: kort på Overblik (3 segmenter + fordelings-bar) ── */
.eco-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 0; margin-top: 10px; }
.eco-grid-1 { grid-template-columns: 1fr; }
.eco-seg { padding: 2px 18px 2px 0; border-right: 1px solid #eef1f6; }
.eco-seg + .eco-seg { padding-left: 18px; }
.eco-seg:last-child { border-right: 0; }
.eco-seg .lbl { display: block; font-size: 11px; color: #708090; text-transform: uppercase; letter-spacing: .04em; }
.eco-seg .val { display: block; font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; margin-top: 3px; }
.eco-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-top: 13px; background: #eef1f6; }
.eco-bar .eb-cost { background: #c3cddc; }
.eco-bar .eb-db { background: #1e9e57; }
.eco-legend { display: flex; gap: 16px; align-items: center; margin-top: 7px; font-size: 11.5px; color: #708090; flex-wrap: wrap; }
.eco-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
@media (max-width: 767px) {
    /* Mobil: segmenterne som rækker (label venstre, tal højre) — mockup-udtrykket */
    .eco-grid { grid-template-columns: 1fr; }
    .eco-seg { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-right: 0; border-bottom: 1px solid #f0f2f6; padding: 10px 0; }
    .eco-seg:last-child { border-bottom: 0; }
    .eco-seg + .eco-seg { padding-left: 0; }
    .eco-seg .val { margin-top: 0; font-size: 14px; }
}

/* Økonomi-fanens mobil-rækker (desktop-tabellen skjules via .cert-table-wrap) */
.eco-mob { display: none; }
@media (max-width: 767px) { .eco-mob { display: block; margin-top: 4px; } }

/* Sum-række i register-tabeller (økonomi/arkiv) */
.doc-table tfoot td { padding: 11px 14px; font-size: 13px; font-weight: 750; background: #fafbfc; border-top: 1px solid #e7eaf0; }

/* Tal-kolonners overskrifter skal følge indholdet mod højre —
   .doc-table thead th (0,2,1) slog ellers .text-right (0,1,0) */
.doc-table thead th.text-right { text-align: right; }

/* Projektnr-brik i arkiv-tabellen */
.projno { display: inline-flex; align-items: center; background: #e8effc; color: #2a5db0; font-weight: 750; font-size: 12px; border-radius: 8px; padding: 4px 9px; font-variant-numeric: tabular-nums; margin-right: 9px; }

/* Registreringstabellernes Godkend-kolonne: altid yderst til højre m. fast bredde */
.project-reg-table th.reg-approve-col,
.project-reg-table td:last-child { text-align: right; width: 110px; }
.project-reg-table td:last-child .badge { white-space: nowrap; }

/* Projektside: registreringer som kort på mobil (desktop-tabellen skjules
   via .cert-table-wrap). Godkend/afvis ligger direkte på kortet. */
.reg-mob-cards { display: none; }
.reg-mob-card { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(15, 20, 26, .06); }
.reg-mob-card .r1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.reg-mob-card .ttl { font-weight: 700; font-size: 13.5px; }
.reg-mob-card .sub2 { font-size: 12px; color: #708090; margin-top: 2px; }
@media (max-width: 767px) {
    /* 14px-standarden gælder også kort-containere (samme luft som .card + .card) */
    .reg-mob-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
    .stat-tiles { gap: 14px; margin-bottom: 14px; }
    .ov-2col.mt-12 { margin-top: 14px; }
    .ov-2col { gap: 14px; }

    /* Godkend/afvis skal være kompakte kvadrater side om side — mobilens
       generelle .btn-group-regel (wrap + store knapper) må ikke stable dem */
    .btn-group.approval-icon-actions { flex-direction: row; flex-wrap: nowrap; gap: 6px; }
    .btn-group.approval-icon-actions form { flex: 0 0 auto; }
    .btn-group.approval-icon-actions .btn,
    .approval-icon-btn,
    .approval-icon-btn.approval-icon-btn-approve {
        flex: 0 0 auto;
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0;
    }
}

/* ── Kundeprofil: Indstillinger som switch-rækker m. autosave ── */
.sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
@media (max-width: 767px) { .sw-grid { grid-template-columns: 1fr; } }
/* NB: .sw-row er ofte et <label> — den globale label-regel (uppercase, graa,
   margin-top:14px i forms.css) skal nulstilles, ellers ser raekkerne
   "raabende" ud og faar ekstra luft */
.sw-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; margin: 0; border-bottom: 1px solid #f0f2f6; font-size: 13.5px; font-weight: 600; color: var(--text, #0f1419); text-transform: none; letter-spacing: normal; cursor: pointer; }
.sw-hint { display: block; font-weight: 400; color: #708090; font-size: 11.5px; margin-top: 1px; }
.save-flash { font-size: 11.5px; color: #1e7c45; font-weight: 700; opacity: 0; transition: opacity .2s; display: inline-flex; align-items: center; gap: 4px; }
.save-flash.show { opacity: 1; }
.save-flash.is-error { color: #c03b2d; }

/* Dag-badges i lister (standardprofiler m.fl.) — den gamle .profile-day-badge
   er scopet til .profile-toggle-accordionen og rammer ikke de nye rækker */
.day-badge { display: inline-flex; align-items: center; background: #eef0f4; color: #5a6a7a; border-radius: 6px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; }


/* Klikbare mc-item-rækker (prisaftaler/profiler åbner modal).
   Ingen negative margins: hover-markeringen skal flugte med indholdet og
   have kortets fulde padding som luft til kanten. */
.mc-click { cursor: pointer; border-radius: 8px; }
.mc-click:hover { background: #f7f9fc; box-shadow: 0 0 0 6px #f7f9fc; }

/* Profil-/aftale-rækker: badges på samme linje til højre på desktop
   (dage · skillelinje · hold-chip), på mobil egen række under teksten
   med hold-chippen skubbet yderst til højre */
.prof-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.prof-main { min-width: 0; }
.prof-badges { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.prof-div { width: 1px; height: 16px; background: #e3e7ee; margin: 0 6px; }
@media (max-width: 767px) {
    .prof-row { display: block; }
    .prof-badges { margin-top: 7px; justify-content: flex-start; }
    .prof-div { flex: 1; width: auto; height: 0; background: transparent; margin: 0; }
}

/* Prisaftale-editor: kompakte blok-rækker (details) */
.blok-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.blok-item { border: 1px solid #e7eaf0; border-radius: 10px; background: #fbfcfe; margin-top: 8px; }
.blok-item summary.blok-sum { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.blok-item summary.blok-sum::-webkit-details-marker { display: none; }
.blok-item[open] { border-color: #b9c6dd; background: #fff; }
.blok-title { font-weight: 700; font-size: 13px; }
.blok-sub { display: block; font-size: 11.5px; color: #708090; margin-top: 2px; }
.blok-price { font-weight: 750; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blok-fields { padding: 4px 12px 12px; border-top: 1px solid #eef1f6; }

/* Periode-/hotel-fold-ud i medarbejder-modalen: Slet venstre, Gem højre */
.pe-row-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f6; }
.pe-sections .blok-head h5 { font-size: 13.5px; font-weight: 750; }
.pe-sections .blok-head + .blok-item,
.pe-sections .blok-item + .blok-item { margin-top: 8px; }

/* Modal-bund: Slet venstre, Gem højre. På mobil (bottom sheet) er den STICKY i
   sheet'ens scroll-område, så Gem/Opret altid er synlig. (Den "forsvundne"
   Gem-knap skyldtes 100vh-højden på modal-box — sheet'ens bund lå under
   skærmkanten; det er fixet med dvh i mobile_app.css. Fixed-varianten gav en
   løsrevet knap-linje oven på backdroppen — brug ALDRIG fixed her.) */
.modal-footer-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #eef0f4; }
@media (max-width: 767px) {
    .project-employee-modal .modal-footer-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 2;
    }
}

/* Udgifts-/registrerings-modalen (hours-edit): luft som de øvrige sheets */
.hours-edit-modal .hours-edit-modal-body { padding: 18px 20px; }
@media (max-width: 1200px) {
    .hours-edit-modal .hours-edit-modal-body { padding: 16px 18px calc(env(safe-area-inset-bottom, 0px) + 18px); }
    .hours-edit-modal .hours-edit-modal-head { padding-top: 2px; }
}

/* Billy-mapping i register-stil m. gruppe-rækker og Kilde-chips */
.billy-mapping-table .billy-group-row td { background: #f6f8fb; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8a97a5; font-weight: 750; padding: 7px 14px; }
.billy-mapping-table .billy-select-cell select { width: 100%; max-width: 320px; }

/* Billy-mapping mobil: gruppe-kort m. mc-item-rækker (skjult på desktop) */
.billy-mob-cards { display: none; }
.billy-mob-select { margin-top: 7px; }
.billy-mob-select select { width: 100%; border: 1px solid #cfd6e0; border-radius: 8px; padding: 9px 10px; font-size: 13px; font-family: inherit; background: #fff; }

/* Kort-header (titel venstre, handling højre) + certifikat-registrets tabel */
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
@media (max-width: 767px) { .cert-table-wrap { display: none; } }

/* Register-sider (Certifikater/Dokumenter): topline med titel + primær handling */
.reg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.reg-head h2 { font-size: 22px; font-weight: 750; letter-spacing: -0.01em; }

/* Sektionstitel + handling INDE i doc-table-boksen (Projektstyring m.fl.) —
   lægges i thead th[colspan], så hele sektionen bliver én hvid boks */
.tbl-box-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* Overskriften over mobil-kortene: følger cert-table-wrap-breakpointet (767px),
   IKKE .mobile-only (1200px) — ellers dobbelt titel mellem 768-1200px */
.reg-head.reg-head-mobile { display: none; }
@media (max-width: 767px) { .reg-head.reg-head-mobile { display: flex; } }

/* ═══ Projektsidens medarbejder-/økonomi-rækker på mobil ═══ */
/* Hotel-kolonnen: højrestillet ved siden af perioderne på desktop,
   egen venstrestillet linje under perioderne på mobil */
.pe-side { text-align: right; }
@media (max-width: 767px) {
    .pe-side { flex-basis: 100%; text-align: left; }
    .pe-period-line { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; padding: 3px 0; }
    .pe-period-line .pe-tag, .pe-hotel-line .pe-tag { margin-left: 0; }
    /* Status-badges i registrerings-kortene: ens størrelse, ingen ombrydning */
    .reg-mob-card .badge { white-space: nowrap; flex: 0 0 auto; }
    /* Økonomi-rækker: margin-chippen står fast ude til højre */
    .eco-mob .r1 { flex-wrap: nowrap; }
    .eco-mob .chip { flex: 0 0 auto; white-space: nowrap; }
}

/* ═══ Projektstyring på mobil: sektion som ÉN boks med klikbare rækker ═══ */
.mc-link { display: block; color: inherit; text-decoration: none; }
.mc-link:hover { text-decoration: none; color: inherit; }
@media (max-width: 767px) {
    .proj-mob-box { margin-top: 14px; }
    .proj-mob-box .r1 { flex-wrap: nowrap; align-items: flex-start; }
    .proj-mob-box .chip { flex: 0 0 auto; white-space: nowrap; }
}

/* ═══ Dokument-registrets rækker: chip ved titlen (desktop), øverst til højre (mobil) ═══ */
.doc-row-head { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767px) {
    .doc-row-head { display: flex; justify-content: space-between; width: 100%; }
    .doc-row-actions { flex-basis: 100%; justify-content: flex-start; margin-top: 6px; }
}

/* ═══ Godkendelser (appr-): værktøjslinje, projekt-bokse, bulk-bar ═══ */
.appr-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.appr-filter-fields { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; }
.appr-filter-fields select { max-width: 240px; width: auto; }
.appr-reset { color: #2a5db0; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.appr-filter-open { display: none; }
/* Periode-chip i sidehovedet — åbner filter-modalen */
.appr-period-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: #1c2733; background: #fff; border: 1px solid #cfd6e0; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-family: inherit; white-space: nowrap; font-variant-numeric: tabular-nums; }
.appr-period-chip svg { color: #708090; }
.appr-status-seg { margin: 0 0 0 auto; }
.appr-status-seg a { text-decoration: none; }

/* Godkend/afvis-ikonknapper: kvadrater, centreret med rækketeksten
   (40px-reglerne i tables.css er scoped til projektsidens tabeller —
   dette er den generelle base, bl.a. til Godkendelser) */
.approval-icon-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin: 0; vertical-align: middle; line-height: 0; }
/* min-height: 0 er nødvendig — .btn/.btn-sm har global min-height 44/36px,
   som ellers gør kvadraterne høje og smalle og rækkerne unødigt høje */
.approval-icon-actions .approval-icon-btn { width: 30px; min-width: 30px; height: 28px; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }

/* Kompakte rækker: .doc-table.appr-table for at slå .doc-table tbody td
   (samme specificitet, senere i filen — derfor dobbelt-klassen) */
.doc-table.appr-table tbody td { padding-top: 5px; padding-bottom: 5px; }
.doc-table.appr-table tbody td:nth-child(2) { white-space: nowrap; }

.appr-box-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.appr-box-sub { color: #8a97a5; font-weight: 500; }
.appr-table .appr-route { max-width: 320px; }
.appr-cb { width: 17px; height: 17px; accent-color: #2a5db0; cursor: pointer; }
.appr-rej-cell { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.appr-rej-reason { font-size: 12px; color: #708090; max-width: 260px; }

/* Flydende bulk-bar (desktop) — dukker op når rækker er valgt */
.appr-bulkbar { position: sticky; bottom: 14px; z-index: 40; display: flex; justify-content: center; margin-top: 16px; }
.appr-bulkbar[hidden] { display: none; }
.appr-bulk-inner { background: #101828; color: #fff; border-radius: 999px; padding: 8px 12px 8px 18px; display: flex; align-items: center; gap: 11px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-size: 13.5px; font-weight: 600; }
.appr-bulk-inner .btn { border-radius: 999px; }
.appr-bulk-clear { background: none; border: 0; color: #9aa6b5; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }

@media (max-width: 767px) {
    .appr-filter-fields { display: none; }
    .appr-filter-open { display: inline-flex; }
    .appr-period-chip { display: inline-flex; }
    .appr-status-seg { margin-left: auto; }
    .appr-bulkbar { display: none; }
    /* luft så indholdet ikke gemmer sig bag den faste bulk-bar i bunden */
    form[data-approval-form="true"] { padding-bottom: 74px; }
}

/* ═══ Oplysningsskema-wizard (itw-) — offentlig side, mobil-først ═══ */
.itw { max-width: 640px; margin: 0 auto; padding: 0 4px; }
.itw-head { text-align: center; margin-top: 14px; }
.itw-head h2 { margin: 0 0 4px; font-size: 20px; font-weight: 750; letter-spacing: -0.01em; }
.itw-head .muted { font-size: 13px; }
.itw-steps { display: flex; gap: 6px; justify-content: center; margin: 14px 0 16px; }
.itw-steps span { width: 34px; height: 5px; border-radius: 99px; background: #d5dbe3; }
.itw-steps span.done { background: #1e9e57; }
.itw-steps span.cur { background: #2a5db0; }
.itw-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, .06); padding: 20px 22px; }
.itw-card h3 { margin: 0 0 2px; font-size: 16px; font-weight: 750; }
.itw-sub { color: #708090; font-size: 12.5px; margin-bottom: 10px; }
.itw-sect { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: #97a2b0; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e7eaf0; }
.itw-foot { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 30px; }
.itw-foot .btn { padding: 11px 22px; }
.itw-seg { display: flex; background: #eef1f5; border-radius: 10px; padding: 4px; gap: 4px; max-width: 320px; }
.itw-seg label { flex: 1; margin: 0; cursor: pointer; }
.itw-seg input { position: absolute; opacity: 0; pointer-events: none; }
.itw-seg span { display: block; text-align: center; font-size: 13px; font-weight: 650; padding: 8px; border-radius: 7px; color: #5c6773; text-transform: none; letter-spacing: 0; }
.itw-seg label:has(input:checked) span { background: #fff; color: #1c2733; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.itw-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.itw-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 999px; border: 1.5px solid #cfd6e0; background: #fff; color: #3c4652; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; }
.itw-chip input { position: absolute; opacity: 0; pointer-events: none; }
.itw-chip .ic-check { display: none; align-items: center; color: #1d4fc4; }
.itw-chip:has(input:checked) { border-color: #2a5db0; background: #e8effa; color: #1d4fc4; }
.itw-chip:has(input:checked) .ic-check { display: inline-flex; }
.itw-course-panel { background: #fafbfc; border: 1px solid #e7eaf0; border-radius: 11px; padding: 4px 14px 12px; margin-top: 10px; }
/* Telefon med fast +45-prefix — margin nulstilles på inputtet, ellers
   bliver prefix-boksen (der strækker til rækkens fulde højde) højere */
.itw-phone { display: flex; align-items: stretch; margin-top: 6px; }
.itw-phone-cc { display: inline-flex; align-items: center; padding: 0 12px; background: #eef1f5; border: 1px solid #cfd6e0; border-right: 0; border-radius: 10px 0 0 10px; font-size: 13.5px; font-weight: 650; color: #5a6a7a; flex: 0 0 auto; }
.itw-phone input { border-radius: 0 10px 10px 0 !important; margin: 0 !important; min-width: 0; flex: 1; }
/* Fil-felter som stiplede upload-bokse (JS bygger boksen, inputtet skjules) */
.itw-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.itw-up { border: 1.5px dashed #b9c3d0; border-radius: 11px; padding: 16px; text-align: center; color: #5c6773; font-size: 13px; background: #fafbfc; cursor: pointer; margin-top: 10px; }
.itw-up b { color: #2a5db0; font-weight: 650; }
.itw-up:hover { border-color: #2a5db0; }
.itw-up.has-file { border-style: solid; border-color: #1e9e57; background: #e7f6ec; }
.itw-up.has-file b { color: #127a3c; }
.itw-nolic { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: #5a6a7a; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.itw-nolic input { width: 16px; height: 16px; accent-color: #2a5db0; margin: 0; }
.itw-svp-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 4px; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; color: inherit; }
.itw-svp-toggle-row strong { font-size: 13.5px; }
.itw-svp-panel { background: #fafbfc; border: 1px solid #e7eaf0; border-radius: 12px; padding: 14px 16px; margin-top: 10px; }
.itw-consent { display: flex; gap: 10px; align-items: flex-start; background: #fafbfc; border: 1px solid #e7eaf0; border-radius: 11px; padding: 12px 14px; margin-top: 14px; font-size: 12.5px; color: #5c6773; line-height: 1.5; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.itw-consent input { width: 17px; height: 17px; margin-top: 1px; accent-color: #1e9e57; flex: 0 0 auto; }
.itw-summary { margin-top: 6px; }
.itw-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid #f0f2f6; }
.itw-sum-row:last-child { border-bottom: 0; }
.itw-sum-row .isl { color: #708090; flex: 0 0 auto; }
.itw-sum-row .isv { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.itw-done { max-width: 560px; margin: 40px auto; padding: 0 14px; }
.itw-done-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 26px; text-align: center; box-shadow: 0 2px 10px rgba(15, 23, 42, .06); }
.itw-done-card h2 { margin: 10px 0 6px; font-size: 19px; }
@media (max-width: 767px) {
    .itw-card { padding: 16px; }
    .itw-foot { position: sticky; bottom: 0; background: #f2f2f7; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); margin-bottom: 0; }
    .itw-foot .btn:last-child { flex: 1; }
}

/* Svejsepas-guiden (animeret trin-demo, deles med mockup-udtrykket) */
.svp-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }
.svp-demo { margin-top: 12px; }
.svp-browser { border: 1px solid #d7dde6; border-radius: 10px; overflow: hidden; background: #fff; max-width: 520px; }
.svp-top { background: #2d3b4e; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; font-size: 12px; }
.svp-menu { display: flex; gap: 14px; }
.svp-menu span { opacity: .85; }
.svp-menu .svp-mi { color: #3bd48f; font-weight: 650; opacity: 1; }
.svp-brand { font-weight: 700; font-size: 13.5px; }
.svp-body { padding: 12px 16px 14px; }
.svp-h { font-weight: 750; font-size: 15px; margin-bottom: 8px; }
.svp-frow { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.svp-lbl { font-size: 11px; color: #5a6a7a; font-weight: 650; text-transform: none; letter-spacing: 0; }
.svp-inp { border: 1px solid #cfd6e0; border-radius: 6px; padding: 7px 10px; font-size: 12.5px; background: #fff; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.svp-inp.svp-dis { background: #eef1f5; color: #8a97a5; }
.svp-cc { background: #eef1f5; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 650; color: #5a6a7a; }
.svp-gem { margin-top: 12px; background: #2d3b4e; color: #fff; border: 0; border-radius: 6px; padding: 7px 18px; font-size: 12.5px; font-weight: 650; font-family: inherit; }
.svp-saved { margin-left: 8px; }
.svp-caret { width: 1.5px; height: 14px; background: #2a5db0; display: none; }
.svp-hl, [data-svp-hl].svp-hl { outline: 2.5px solid #2a5db0; outline-offset: 2px; border-radius: 6px; box-shadow: 0 0 0 5px rgba(42, 93, 176, .15); }
.svp-cap { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: #5a6a7a; font-weight: 600; }
.svp-dots { display: flex; gap: 5px; }
.svp-dots span { width: 20px; height: 4px; border-radius: 99px; background: #d5dbe3; }
.svp-dots span.on { background: #2a5db0; }

/* Ansøgninger: initial-avatar */
.appl-avatar { width: 36px; height: 36px; border-radius: 10px; background: #e8effa; color: #2a5db0; font-weight: 750; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Udsend oplysningsskema-modal: link-rækker */
.intake-lr .ilr { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f0f2f6; flex-wrap: wrap; }
.intake-lr .ilr:last-child { border-bottom: 0; }
.ilr-main { flex: 1; min-width: 0; }
.ilr-mail { font-weight: 650; font-size: 13.5px; overflow-wrap: anywhere; display: block; }
.ilr-sub { color: #708090; font-size: 12px; margin-top: 2px; display: block; }
.ilr-act { display: flex; gap: 6px; }

/* ═══ Opret projekt-modal (pc-) ═══ */
.pc-seg { display: flex; background: #eef1f5; border-radius: 11px; padding: 4px; gap: 4px; margin-top: 4px; }
.pc-seg button { flex: 1; text-align: center; font-size: 13px; font-weight: 650; padding: 8px 10px; border-radius: 8px; color: #5c6773; border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.pc-seg button.is-active { background: #fff; color: var(--text, #0f1419); box-shadow: 0 1px 3px rgba(15, 20, 26, .12); }
.pc-seg button[disabled] { opacity: .45; cursor: default; }
.pc-seg .pc-seg-sub { display: block; font-size: 11px; font-weight: 500; color: #97a2b0; margin-top: 1px; }
.pc-seg button.is-active .pc-seg-sub { color: #708090; }

.pc-sect { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: #97a2b0; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e7eaf0; }
.pc-sect-soft { font-weight: 500; text-transform: none; letter-spacing: 0; }

.pc-status-auto { display: flex; align-items: center; gap: 9px; background: #fafbfc; border: 1px solid #e7eaf0; border-radius: 10px; padding: 10px 13px; margin-top: 10px; font-size: 12.5px; color: #5c6773; line-height: 1.45; }
.pc-status-auto .chip { flex: 0 0 auto; }
.pc-status-auto a { color: #2563eb; font-weight: 600; text-decoration: none; }

.pc-inherit { background: #fafbfc; border: 1px solid #e7eaf0; border-radius: 11px; padding: 12px 14px; margin-top: 12px; }
.pc-inherit .pi-title { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.pc-inherit .pi-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid #f0f2f6; }
.pc-inherit .pi-row:last-child { border-bottom: 0; }
.pc-inherit .pi-l { color: #708090; flex: 0 0 auto; }
.pc-inherit .pi-v { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.pc-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #127a3c; font-weight: 600; }
.pc-taken { font-size: 12px; color: #b3261e; font-weight: 600; }

/* Bemanding-chips: checkbox skjult, valgt = blå m. flueben (ren CSS via :has) */
.emp-pick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; max-height: 148px; overflow-y: auto; }
.emp-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1.5px solid #cfd6e0; background: #fff; color: #3c4652; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; }
.emp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.emp-chip .ec-check { display: none; align-items: center; color: #1d4fc4; }
.emp-chip:has(input:checked) { border-color: #2563eb; background: #eaf0fe; color: #1d4fc4; }
.emp-chip:has(input:checked) .ec-check { display: inline-flex; }
.reg-filter-card { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 0; }
.reg-hint { font-size: 12px; color: #97a2b0; margin: 10px 2px 0; }

/* Kolonnebredder så registret fordeler sig som mockuppen (ikke "organisk") */
.cert-register-table th:first-child { width: 26%; }
.cert-register-table th { width: auto; }
.cert-register-table td, .cert-register-table th { white-space: nowrap; }

/* details-summary stylet som knap (upload/historik uden ekstra JS) */
details.cert-inline-details > summary { list-style: none; display: inline-flex; cursor: pointer; }
details.cert-inline-details > summary::-webkit-details-marker { display: none; }
.cert-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.cert-actions > details { display: inline-block; }
.cert-actions > details[open] { flex-basis: 100%; }
.cert-card .card-head h3 { font-size: 15.5px; }

/* Certifikat-kort: kompakt betegnelse + dato-grid (mockup-designet) */
.cert-short { font-weight: 650; font-size: 13px; color: #2a5db0; margin-top: 1px; }
.cert-desig { font-size: 12px; color: #8a97a6; margin-top: 4px; word-break: break-word; }
.cert-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 12px; margin-top: 10px;
    background: #f8fafc; border-radius: 10px; padding: 9px 11px; }
.cert-meta-grid .k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: #8a97a6; font-weight: 700; }
.cert-meta-grid .v { display: block; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.course-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 767px) {
    .cert-card .card-head { align-items: flex-start; }
    .cert-meta-grid { grid-template-columns: 1fr 1fr; }
    /* Handlinger: primær i fuld bredde, sekundære i 2-kolonne grid */
    .cert-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .cert-actions .btn { white-space: normal; padding: 8px 6px; font-size: 12.5px; justify-content: center; text-align: center; }
    .cert-actions .btn-primary { grid-column: 1 / -1; }
    .cert-actions > details { grid-column: 1 / -1; }
    .course-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .course-actions .btn { justify-content: center; text-align: center; }
    .course-item .r1 { flex-wrap: wrap; }
}

/* Enkel tabel inde i kort (kunde-udsendelse): dæmpede headers, tynde linjer */
.kv-plain-table { width: 100%; border-collapse: collapse; }
.kv-plain-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #708090; font-weight: 650; padding: 8px 10px; background: #fafbfc; border-bottom: 1px solid #edf0f4; }
.kv-plain-table td { padding: 10px; border-bottom: 1px solid #f0f2f6; font-size: 13.5px; vertical-align: middle; }
.kv-plain-table tr:last-child td { border-bottom: 0; }
.only-mobile-block { display: none; }
@media (max-width: 767px) { .only-mobile-block { display: block; } }

/* Kundeprofilens Overblik: to kort side om side, stakker på mobil */
.ov-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 767px) { .ov-2col { grid-template-columns: 1fr; } }

/* Kundelisten: avatar (logo eller initialer) */
.cust-cell { display: flex; align-items: center; gap: 11px; }
.cust-avatar { width: 36px; min-width: 36px; height: 36px; border-radius: 10px; background: #e8effa; color: #2a5db0;
    font-weight: 750; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center;
    letter-spacing: .02em; overflow: hidden; flex-shrink: 0; }
.cust-avatar.has-logo { background: #fff; border: 1px solid #e7eaf0; }
.cust-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Dokument-registret: Smart upload + Manuel indtastning side om side (stakker på mobil) */
.doc-top-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 767px) { .doc-top-grid { grid-template-columns: 1fr; } }

/* Dokumenttyper-editoren: én ryddelig række pr. type (register-stil) */
.doctype-head,
.doctype-row { display: grid; grid-template-columns: 1fr 160px 92px 92px 64px; gap: 10px; align-items: center; }
.doctype-head { padding: 8px 0; border-bottom: 1px solid #edf0f4; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #708090; font-weight: 650; }
.doctype-head .txt-center { text-align: center; }
.doctype-row { padding: 10px 0; border-bottom: 1px solid #f0f2f6; }
.doctype-row:last-of-type { border-bottom: 0; }
.doctype-cb { justify-self: center; margin: 0; }
.doctype-cb-label { display: none; }
@media (max-width: 767px) {
    .doctype-head { display: none; }
    .doctype-head + .doctype-row { border-top: 1px solid #edf0f4; }
    .doctype-row { grid-template-columns: 1fr 1fr; }
    .doctype-row > div:first-child { grid-column: 1 / -1; }
    .doctype-cb { justify-self: start; }
    .doctype-cb-label { display: inline; }
}

/* Kompakte liste-rækker i kort (mobil-varianter af brede tabeller) */
.mc-item { border-bottom: 1px solid #f0f2f6; padding: 10px 0; }
.mc-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.mc-item .r1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-item .ttl { font-weight: 700; font-size: 13.5px; }
.mc-item .sub2 { font-size: 12px; color: #708090; margin-top: 2px; }

/* Rediger pr. fane (etape 4): .pe-editing på panelet skjuler læse-blokke og viser formular */
.pe-form { display: none; }
[data-tab-panel].pe-editing .pe-form { display: block; }
[data-tab-panel].pe-editing .pe-read { display: none !important; }
.pe-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 10px; }

/* Key-value-tabeller på profilen: dæmpet label venstre, fed værdi højre */
.kv-table { width: 100%; border-collapse: collapse; }
.kv-table thead th { text-align: left; font-size: 15px; font-weight: 700; color: var(--text, #0f1419); background: transparent; border-bottom: 0; padding: 2px 0 10px; }
.kv-table td { padding: 9px 0; border-bottom: 1px solid #f0f2f6; font-size: 13.5px; }
.kv-table tr:last-child td { border-bottom: 0; }
.kv-table td:first-child { color: #708090; }
.kv-table td:first-child strong { font-weight: 500; color: #708090; }
.kv-table td:last-child { text-align: right; font-weight: 600; }
.kv-table .w-240 { width: auto; }

/* Nøgletals-fliser (Overblik-fanen; genbruges af registrene i etape 6/7) */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 14px; }
.stat-tile { background: #fff; border-radius: 12px; padding: 13px 16px; box-shadow: 0 1px 2px rgba(15, 20, 26, .06); }
.stat-tile .st-num { font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; }
.stat-tile .st-lbl { font-size: 11px; color: #708090; margin-top: 2px; }
.stat-tile.warn .st-num { color: #b97a10; }
.stat-tile.crit .st-num { color: #c03b2d; }

/* Bærbar-bredde (≤1440px): kompaktere faste kolonner, så den fleksible
   certifikat-kolonne ikke klemmes */
@media (min-width: 1201px) and (max-width: 1440px) {
    .employee-table th.col-name { width: 165px; }
    .employee-table th.col-email { width: 205px; }
    .employee-table th.col-phone { width: 105px; }
    .employee-table th.col-documents { width: 140px; }
}

/* Medarbejderliste + profilens dokument-tabel: tabel i prototypens udtryk —
   hvidt kort, dæmpede uppercase-headers, mørke navne (ikke blå links), hover-række */
.doc-table {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 1px 2px rgba(15, 20, 26, .06);
}
.doc-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #708090;
    font-weight: 650;
    background: #fafbfc;
    border-bottom: 1px solid #edf0f4;
    padding: 10px 14px;
    text-align: left;
}
.doc-table thead tr:first-child th[colspan] {
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text, #0f1419);
    font-weight: 700;
    background: #fff;
    border-bottom: 0;
    padding: 14px 16px 4px;
}
.doc-table tbody td { padding: 11px 14px; border-bottom: 1px solid #f0f2f6; vertical-align: middle; font-size: 13px; }
.doc-table tbody tr:last-child td { border-bottom: 0; }

.employee-list-table {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 1px 2px rgba(15, 20, 26, .06);
}
.employee-list-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #708090;
    font-weight: 650;
    background: #fafbfc;
    border-bottom: 1px solid #edf0f4;
    padding: 10px 14px;
}
.employee-list-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f2f6;
    vertical-align: middle;
}
.employee-list-table tbody tr:last-child td { border-bottom: 0; }
.employee-list-table tbody tr:hover td { background: #f6f9ff; }
.employee-list-table td[data-label="Navn"] a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}
.employee-list-table td[data-label="Navn"] a:hover { text-decoration: underline; }
.employee-list-table .cell-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.employee-list-table .chip { font-size: 11px; padding: 2px 9px; }
.employee-list-table td[data-label="Dokumenter"],
.employee-list-table td[data-label="Status"] { white-space: nowrap; }

/* Medarbejderliste: toplinje med søgning + handlinger (masterplan etape 2) */
.employee-list-toolbar { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; flex-wrap: wrap; }
.employee-list-toolbar .elt-search { flex: 1 1 220px; max-width: 420px; margin: 0; }
.employee-list-toolbar .elt-search input { width: 100%; }
@media (max-width: 767px) {
    .employee-list-toolbar .elt-search { flex-basis: 100%; max-width: none; order: -1; }
    .employee-list-toolbar [data-mobile-hide="true"] { display: none; }
}
.mlc-badge--missing { background: #fbe6e3; color: #c03b2d; }

/* ═══ Projekt-dokumentation (fane på projektsiden + kundeside) ═══ */
.pd-strip { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff;
    border: 1px solid #e7eaf0; border-radius: 12px; padding: 10px 14px; }
.pd-strip .pd-grow { flex: 1; }
.pd-sharedhint { background: #fafbfc; border: 1px solid #e7eaf0; border-radius: 10px; padding: 11px 13px;
    font-size: 12.5px; color: #5c6773; line-height: 1.5; margin-top: 10px; display: flex; gap: 8px;
    align-items: center; flex-wrap: wrap; }
.pd-hintbox { background: #fafbfc; border: 1px solid #e7eaf0; border-radius: 10px; padding: 11px 13px;
    font-size: 12.5px; color: #5c6773; line-height: 1.5; margin-top: 12px; }

/* Medarbejder-boks med dokument-rækker */
.pd-empbox { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; overflow: hidden; margin-top: 14px; }
.pd-ebhead { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid #edf0f4; background: #fafbfc; }
.pd-avatar { width: 34px; height: 34px; border-radius: 10px; background: #e8effa; color: #2a5db0; font-weight: 750;
    font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-ebmeta { min-width: 0; }
.pd-ebname { display: block; font-weight: 700; font-size: 14px; }
.pd-ebsub { display: block; color: #5a6a7a; font-size: 12px; }
.pd-ebright { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.pd-row { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #f0f2f6; font-size: 13px; }
.pd-row:last-child { border-bottom: 0; }
.pd-row-missing { background: #fffdfa; }
.pd-cb { width: 16px; height: 16px; accent-color: #2a5db0; cursor: pointer; flex-shrink: 0; margin: 0; }
.pd-cb:disabled { cursor: default; opacity: .45; }
.pd-rowtxt { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.pd-rowsub { display: block; font-weight: 500; color: #8a97a5; font-size: 11.5px; }
.pd-row .chip { flex-shrink: 0; }
.pd-row .btn { min-height: 0; flex-shrink: 0; }

/* Bulk-bar (mørk pille, sticky i bunden) */
.pd-bulkbar { position: sticky; bottom: 14px; display: flex; justify-content: center; margin-top: 16px; z-index: 30; }
.pd-bulkbar[hidden] { display: none; }
.pd-bulkinner { background: #101828; color: #fff; border-radius: 999px; padding: 8px 12px 8px 18px; display: flex;
    align-items: center; gap: 11px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-size: 13.5px; font-weight: 600; }
.pd-bulkinner .btn { border-radius: 999px; min-height: 0; }

/* Krav-modal: krav-rækker */
.pd-reqhead { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: #5a6a7a; margin: 14px 0 3px; }
.pd-reqrow { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid #f0f2f6; font-size: 13px; }
.pd-reqrow:last-of-type { border-bottom: 0; }
.pd-reqpick { cursor: pointer; }
.pd-reqtxt { flex: 1; min-width: 0; font-weight: 600; }
.pd-hintpick { display: flex; gap: 10px; align-items: flex-start; background: #fafbfc; border: 1px solid #e7eaf0;
    border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: #5c6773; line-height: 1.5; margin-top: 12px; cursor: pointer; }
.pd-hintpick .pd-cb { margin-top: 1px; }

/* Omfang-segment i del-modalen */
.pd-seg { display: flex; background: #eef1f5; border-radius: 10px; padding: 4px; gap: 4px; }
.pd-seg button { flex: 1; border: 0; background: transparent; font-family: inherit; font-size: 13px; font-weight: 650;
    color: #5a6a7a; padding: 8px; border-radius: 7px; cursor: pointer; min-height: 0; }
.pd-seg button.on { background: #fff; color: #1c2733; box-shadow: 0 1px 2px rgba(15, 23, 42, .10); }

/* ═══ Viderefaktureres-udgift: struktureret formular (desktop + bottom sheet) ═══ */
/* Beholder 2 kolonner OGSÅ på mobil — felterne er korte (dato/uge/select/tal),
   og 1 kolonne gjorde sheet'en dobbelt så høj */
.pt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pt-seg { display: flex; background: #eef1f5; border-radius: 10px; padding: 4px; gap: 4px; margin: 6px 0 2px; }
.pt-seg > label { flex: 1; margin: 0; position: relative; display: block; text-transform: none; letter-spacing: 0; }
.pt-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pt-seg .pt-seg-btn { display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 650; color: #5a6a7a; padding: 8px 6px; border-radius: 7px; cursor: pointer;
    text-align: center; line-height: 1.25; min-height: 40px; }
.pt-seg input:checked + .pt-seg-btn { background: #fff; color: #1c2733; box-shadow: 0 1px 2px rgba(15, 23, 42, .10); }
.pt-seg .pt-seg-sub { display: block; font-size: 10.5px; font-weight: 500; color: #8a97a5; }
.pt-check { display: flex; gap: 10px; align-items: flex-start; background: #fafbfc; border: 1px solid #e7eaf0;
    border-radius: 10px; padding: 11px 13px; margin-top: 14px; cursor: pointer; font-size: 13px; font-weight: 600;
    text-transform: none; letter-spacing: 0; color: inherit; }
.pt-check input { width: 16px; height: 16px; accent-color: #2a5db0; margin: 1px 0 0; flex-shrink: 0; }
.pt-check .sub { display: block; font-weight: 500; color: #8a97a5; font-size: 11.5px; margin-top: 2px; }
.pt-upload { position: relative; border: 1.5px dashed #cfd6e0; border-radius: 12px; padding: 15px 14px;
    text-align: center; color: #5a6a7a; font-size: 13px; font-weight: 650; background: #fafbfc; margin-top: 6px; cursor: pointer; }
.pt-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.pt-upload .pt-upload-hint { display: block; font-weight: 500; color: #8a97a5; font-size: 11.5px; margin-top: 3px; }
.pt-upload.has-files { border-color: #1e9e57; color: #127a3c; background: #f2faf5; }
.pt-actions { display: flex; gap: 10px; margin-top: 18px; }
.pt-actions .btn-success { flex: 1; padding: 12px 14px; }
@media (max-width: 640px) {
    .pt-actions { flex-wrap: wrap; }
    .pt-actions .btn-success { flex-basis: 100%; order: -1; }
}

/* Mobil: strip-knapper i fuld bredde, rækker ombryder pænt */
@media (max-width: 767px) {
    .pd-strip { padding: 9px 12px; }
    .pd-strip .btn { flex: 1 1 auto; justify-content: center; }
    .pd-strip .pd-grow { flex-basis: 100%; }
    .pd-ebhead { padding: 11px 14px; }
    .pd-row { padding: 9px 14px; flex-wrap: wrap; }
    .pd-rowtxt { flex-basis: 55%; }
    .pd-bulkbar { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Indstillings-kort-grid (Timetyper m.fl. — mockup-normen: kort m. chips) ── */
.set-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 1100px) { .set-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .set-card-grid { grid-template-columns: 1fr; } }
.set-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); padding: 13px 14px; display: flex; flex-direction: column; gap: 9px; cursor: pointer; }
.set-card:focus-visible { outline: 2px solid #2a5db0; outline-offset: 2px; }
.set-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.set-card-top .ttl { font-weight: 750; font-size: 13.5px; }
.set-card-top .code { display: block; color: #5a6a7a; font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-top: 1px; }
.set-card-pencil { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e7eaf0; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #5a6a7a; flex: 0 0 auto; }
.set-card-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.set-card-actions { display: flex; gap: 6px; align-items: center; margin-top: auto; padding-top: 9px; border-top: 1px dashed #e7eaf0; }
.set-card-actions form { margin: 0; }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Én-linjes undertekst i lister (fx tidsprofilernes kunde-opremsning):
   må ALDRIG bryde til to linjer — afkortes med ellipsis. Kræver min-width:0
   på flex-forælderen (.prof-main). */
.sub2--oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Kræver handling": dokumentmangler som én linje pr. medarbejder m. chips */
.pd-miss-list { margin-top: 8px; border-top: 1px dashed #e7eaf0; padding-top: 4px; }
.pd-miss-row { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.pd-miss-name { font-weight: 650; font-size: 12.5px; flex: 0 0 160px; padding-top: 2px; }
.pd-miss-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
@media (max-width: 700px) {
    .pd-miss-row { flex-direction: column; gap: 3px; }
    .pd-miss-name { flex-basis: auto; }
}

/* Gruppe-overskrifter i tidsprofil-listen: medlemmer stilles op under deres
   gruppe, resten under "Uden gruppe" */
.tp-group-head { display: flex; align-items: center; gap: 8px; margin: 18px 0 2px; padding-bottom: 6px; border-bottom: 1px solid #e7eaf0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5a6a7a; }
.tp-group-head .chip { text-transform: none; letter-spacing: 0; }

/* =========================================================
   MEDARBEJDER-OVERBLIK — dashboard-fanen (mockup-normen)
   ========================================================= */
.ov-wrap { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

/* Klikbare nøgletal-fliser */
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ov-tile { position: relative; text-align: left; background: #fff; border: 1px solid rgba(60,60,67,.14); border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 0 1px rgba(0,0,0,.05); padding: 13px 15px; cursor: pointer; font: inherit; color: inherit; transition: box-shadow .15s, transform .15s; }
.ov-tile:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); transform: translateY(-1px); }
.ov-tile.warn { border-color: rgba(178,106,0,.35); }
.ov-tile.crit { border-color: rgba(192,57,43,.4); }
.ov-st-lbl { font-size: 11.5px; font-weight: 600; color: #6d6d72; text-transform: uppercase; letter-spacing: .04em; }
.ov-st-num { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.ov-st-sub { font-size: 11.5px; color: #8e8e93; margin-top: 3px; }
.ov-st-sub.warn { color: #b26a00; font-weight: 600; }
.ov-st-sub.crit { color: #c0392b; font-weight: 600; }
.ov-st-sub.ok { color: #1d9a53; font-weight: 600; }
.ov-tile .ov-go { position: absolute; top: 12px; right: 12px; color: #c3c7cf; }

/* To-spaltet dashboard */
.ov-grid { display: grid; grid-template-columns: 1fr 420px; gap: 14px; align-items: start; }
.ov-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ov-h3 { font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.ov-h3 .ov-hi { color: var(--primary, #2a5db0); flex: none; }
.ov-link { border: none; background: none; padding: 0; color: var(--primary, #2a5db0); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.ov-link:hover { text-decoration: underline; }

/* Kræver handling — linje pr. emne */
.ov-act-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid #eef0f4; }
.ov-act-row:first-of-type { border-top: none; margin-top: 4px; }
.ov-act-txt { font-size: 13px; flex: 1; min-width: 0; }
.ov-act-txt .sub { display: block; font-size: 11.5px; color: #8e8e93; margin-top: 1px; }
.ov-act-open { border: none; background: none; color: var(--primary, #2a5db0); font-size: 12.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; padding: 0; }

/* Projekt-rækker */
.ov-proj-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid #eef0f4; }
.ov-proj-row:first-of-type { border-top: none; margin-top: 4px; }
.ov-proj-main { flex: 1; min-width: 0; }
.ov-proj-no { color: var(--primary, #2a5db0); font-weight: 700; font-size: 13px; text-decoration: none; }
.ov-proj-no:hover { text-decoration: underline; }
.ov-proj-who { font-size: 12px; color: #6d6d72; }
.ov-proj-sub { font-size: 12px; color: #6d6d72; margin-top: 3px; }
.ov-proj-period { font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.ov-proj-period .muted-sm { display: block; font-size: 11px; color: #8e8e93; font-weight: 500; }

/* Booking-rækker */
.ov-book-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid #eef0f4; font-size: 12.5px; }
.ov-book-row:first-of-type { border-top: none; margin-top: 4px; }
.ov-book-date { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; width: 104px; flex: none; }
.ov-book-what { flex: 1; min-width: 0; }
.ov-book-what .sub { color: #8e8e93; font-size: 11.5px; display: block; }

/* Kontakt-rækker m. kopier */
.ov-kv-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #eef0f4; font-size: 13px; }
.ov-kv-row:first-of-type { border-top: none; margin-top: 2px; }
.ov-kv-lbl { color: #6d6d72; width: 72px; flex: none; font-size: 12.5px; }
.ov-kv-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* Frist-rækker */
.ov-due-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid #eef0f4; }
.ov-due-row:first-of-type { border-top: none; margin-top: 2px; }
.ov-due-date { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; width: 70px; flex: none; padding-top: 1px; }
.ov-due-date.soon { color: #b26a00; }
.ov-due-txt { font-size: 12.5px; flex: 1; min-width: 0; }
.ov-due-txt .sub { display: block; color: #8e8e93; font-size: 11.5px; margin-top: 1px; }

/* Udleverings-linjer */
.ov-uds-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid #eef0f4; font-size: 13px; }
.ov-uds-line:first-of-type { border-top: none; margin-top: 2px; }
.ov-uds-lbl { color: #6d6d72; font-size: 12.5px; flex: none; }
.ov-uds-val { font-weight: 600; text-align: right; min-width: 0; }

/* Timebank-mini */
.ov-tb-mini { display: flex; align-items: baseline; gap: 8px; padding-top: 4px; }
.ov-tb-num { font-size: 26px; font-weight: 800; color: #1d9a53; font-variant-numeric: tabular-nums; }
.ov-tb-sub { font-size: 12px; color: #6d6d72; }

@media (max-width: 1100px) {
    .ov-grid { grid-template-columns: 1fr 340px; }
}

/* Under 900px: én spalte i mockup-prioriteret rækkefølge —
   Kræver handling(1), fliser(2), Projekter(3), Bookinger(4),
   Frister(5), Kontakt(6), Udleveringer(7), Timebank(8) */
@media (max-width: 900px) {
    .ov-grid, .ov-col { display: contents; }
    .ov-wrap > .ov-tiles { order: 2; }
    .ov-o1 { order: 1; }
    .ov-o3 { order: 3; }
    .ov-o4 { order: 4; }
    .ov-o5 { order: 5; }
    .ov-o6 { order: 6; }
    .ov-o7 { order: 7; }
    .ov-o8 { order: 8; }
}
@media (max-width: 767px) {
    .ov-tiles { grid-template-columns: 1fr 1fr; }
    .ov-wrap .card { margin-top: 0 !important; }
    .ov-book-date { width: 88px; }
}

/* =========================================================
   PROJEKT-FAKTURERING — uge-status på Økonomi-fanen + handling
   ========================================================= */
.inv-progress { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.inv-bar { flex: 1; height: 8px; border-radius: 999px; background: #edeff4; overflow: hidden; display: flex; }
.inv-bar .fill { background: #1d9a53; }
.inv-bar .miss { background: #f0b154; }
.inv-progress .txt { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.doc-table tr.inv-row-miss td { background: #fffaf2; }

/* Uge-chips i Kræver handling */
.inv-wk-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }

/* Mobil-kortliste (tabellen er skjult under 768px) */
.inv-m-wk { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid #f0f2f6; }
.inv-m-wk:first-of-type { border-top: none; }
.inv-m-main { flex: 1; min-width: 0; }
.inv-m-ttl { font-weight: 700; font-size: 13px; }
.inv-m-sub { font-size: 11.5px; color: #8e8e93; margin-top: 1px; }

/* Projektstyring: Aktive/Kommende-tabellerne deler kolonnebredder,
   så indholdet står på linje på tværs af de to bokse (kun desktop —
   på mobil er tabellerne skjult til fordel for kortlisten) */
.po-align { table-layout: fixed; }
.po-align .po-c1 { width: 11%; }
.po-align .po-c2 { width: 28%; }
.po-align .po-c3 { width: 21%; }
.po-align .po-c4 { width: 17%; }
.po-align .po-c5 { width: 9%; }
.po-align .po-c6 { width: 14%; }

/* Kunde-præfiks foran projektnummer-felter (fast chip — kun tallene redigeres) */
.pfx-wrap { display: flex; align-items: stretch; }
.pfx-wrap .pfx-chip { display: inline-flex; align-items: center; padding: 0 10px; background: #eef2f8; border: 1px solid rgba(60,60,67,.22); border-right: none; border-radius: 9px 0 0 9px; font-weight: 700; font-size: 13px; color: #2a5db0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pfx-wrap .pfx-chip[hidden] { display: none; }
.pfx-wrap .pfx-chip:not([hidden]) + input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pfx-wrap input { flex: 1; min-width: 0; }

/* Telefonnumre som klik-for-at-ringe-links */
.tel-link { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.tel-link:hover { color: var(--primary, #2a5db0); text-decoration: underline; }

/* =========================================================
   UGE-VÆLGER (Tid/Kørsel/Diæter/Udlæg + medarbejder-dashboard)
   Desktop-designløft: hvidt pille-kort m. bløde pileknapper.
   Mobil (<768px) beholder sit eksisterende udtryk i mobile.css.
   ========================================================= */
@media (min-width: 768px) {
    .week-bar { margin: 14px 0 18px; }
    .week-bar .week-nav {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #fff;
        border: 1px solid rgba(60,60,67,.14);
        border-radius: 12px;
        padding: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 0 1px rgba(0,0,0,.05);
        margin: 0;
        flex-wrap: nowrap;
    }
    .week-bar .cal-month-btn {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #f2f4f8;
        color: var(--primary, #2a5db0);
    }
    .week-bar .cal-month-btn:hover { background: #e8effa; }
    .week-bar .week-label-mobile {
        font-weight: 700;
        font-size: 13.5px;
        padding: 0 14px;
        display: inline-flex;
        gap: 7px;
        align-items: baseline;
        white-space: nowrap;
    }
    .week-bar .week-label-mobile .week-label-range {
        color: #8e8e93;
        font-weight: 500;
        font-size: 12.5px;
    }
}

/* =========================================================
   BESKEDSYSTEM-REDESIGN 2026-08-27
   Faner + registerstil + tråde (chat) + Ny besked-sheet.
   Mobil/desktop-skift genbruger .msg-swipe-list / .msg-desktop-table
   (900px-brydningen øverst i denne fil).
========================================================= */

/* Værktøjslinje: søgning + periode.
   OBS: forms.css sætter globalt input/select til width:100% + margin-top:6px —
   det tvang rækken til at wrappe i fuld bredde (Kims fund 27-08), så begge
   overstyres her med højere specificitet. */
.msg-toolbar { display: flex; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; align-items: center; }
.msg-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #dbe1ea; border-radius: 10px; padding: 8px 12px; flex: 1 1 220px; min-width: 180px; color: #8a97a5; }
.msg-toolbar .msg-search input { width: auto; border: 0; outline: 0; box-shadow: none; font-size: 13px; flex: 1; background: transparent; color: var(--text, #0f1419); font-family: inherit; min-width: 0; margin-top: 0; padding: 0; }
.msg-toolbar .msg-search input:focus { border: 0; box-shadow: none; }
.msg-toolbar .msg-period { width: auto; flex: 0 0 auto; margin-top: 0; background-color: #fff; border: 1.5px solid #dbe1ea; border-radius: 10px; padding: 8px 36px 8px 12px; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text, #0f1419); }
.msg-toolbar .msg-search-btn { flex: 0 0 auto; }
/* Mobil: søgefeltet på egen række — periode- og sorteringsvælgeren deler
   rækken nedenunder 50/50 (Kims ønske 31-08) */
@media (max-width: 900px) {
    .msg-toolbar .msg-search { flex: 1 1 100%; }
    .msg-toolbar .msg-period { flex: 1 1 0; min-width: 0; }
}

/* Handlings-knapper i registret: forms på række, samme højde, luft imellem
   (Kims fund 27-08: Arkivér/Slet lå for tæt og flugtede ikke vandret) */
.msg-row-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.msg-row-actions form { margin: 0; display: flex; }
.msg-row-actions .btn { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }

/* Register-celler */
.msg-cell-main { font-weight: 650; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.msg-cell-sub { font-size: 12px; color: #8a97a5; margin-top: 2px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.msg-row-unread td:first-child { box-shadow: inset 3px 0 0 #2a5db0; }
.msg-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: #2a5db0; margin-right: 7px; vertical-align: middle; flex-shrink: 0; }
.msg-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.msg-card-top strong { display: flex; align-items: center; min-width: 0; }
.msg-card-actions { display: flex; gap: 8px; margin-top: 9px; }

/* FAB: bruger appens standard-.fab (Kims fund 27-08 — egen variant sad forkert
   ift. bundfanerne). Admin-mobil har ingen FAB; dér ejer topbarens +-knap
   oprettelsen (mobile_header_menu.js). */

/* Tråd (chat) */
/* Fuld bredde som resten af admin (Kims regel: aldrig låst maks-bredde) */
.msg-thread-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); overflow: hidden; }
.msg-thread-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; background: #f7f9fc; max-height: 62vh; overflow-y: auto; }
.msg-day-sep { align-self: center; font-size: 11px; font-weight: 650; color: #8a97a5; background: #eceef2; border-radius: 999px; padding: 3px 12px; margin: 10px 0 12px; }
.msg-bub { max-width: 80%; border-radius: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.msg-bub.me { align-self: flex-end; background: #e8effa; border: 1px solid #d9e5f7; border-bottom-right-radius: 4px; }
.msg-bub.them { align-self: flex-start; background: #fff; border: 1px solid #e7eaf0; border-bottom-left-radius: 4px; }
.msg-bub-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #2a5db0; margin-bottom: 5px; }
.msg-bub-meta { font-size: 10.5px; color: #8a97a5; margin: 4px 4px 10px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.msg-bub-meta.me { align-self: flex-end; }
.msg-bub-meta.them { align-self: flex-start; }
.msg-seen { color: #2a5db0; display: inline-flex; }
.msg-attach { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e7eaf0; border-radius: 10px; padding: 6px 11px; font-size: 12.5px; font-weight: 650; color: #2a5db0; margin-top: 8px; text-decoration: none; }
.msg-attach:hover { background: #f4f7fc; }

/* Composer */
.msg-composer { display: flex; align-items: flex-end; gap: 9px; padding: 12px 14px; border-top: 1px solid #f0f2f6; background: #fff; }
.msg-composer-field { flex: 1; background: #f4f6fa; border: 1px solid #e2e7ef; border-radius: 14px; padding: 10px 14px; font-size: 13.5px; min-height: 40px; max-height: 140px; resize: none; font-family: inherit; outline: none; color: var(--text, #0f1419); }
.msg-composer-field:focus { border-color: #b9cdf0; }
.msg-composer-attach { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 1px solid #dbe1ea; background: #fff; color: #5a6a7a; flex-shrink: 0; cursor: pointer; }
.msg-composer-attach input[type="file"] { display: none; }
.msg-composer-attach.has-file { border-color: #1e9e57; color: #1e9e57; background: #e7f6ec; }
.msg-composer-send { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 0; background: #1d4ed8; color: #fff; flex-shrink: 0; cursor: pointer; }
.msg-composer-note { font-size: 11px; color: #8a97a5; padding: 0 16px 12px; background: #fff; }

/* Udsendelses-visning */
.msg-view-body { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

/* Ny besked-sheeten */
.msg-emp-list { border: 1px solid #e5e7eb; border-radius: 10px; max-height: 200px; overflow-y: auto; padding: 6px 0; background: #fff; }
/* Gruppe-overskrift i liste (Aktive / Ikke påbegyndt — Kims fund 01-09:
   native select-popup m. optgroups kunne ikke scrolle i desktop-PWA'en,
   så projektvalg bruger appens egen liste i stedet) */
.msg-list-group { padding: 8px 14px 3px; font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: #8a97a5; }
.msg-emp-list label { display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer; font-weight: normal; margin: 0; }
.msg-sched-grid { display: flex; gap: 10px; margin-top: 8px; }
.msg-sched-grid .form-control { flex: 1; min-width: 0; }

/* Admin-badge i burger-menuen */
.msg-drawer-badge { margin-left: auto; background: #e11d48; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; }

/* Sheet-forms (Kims fund 27-08: Ny besked-indholdet væltede ud af kortet):
   .bottom-sheet er flex-kolonne m. max-højde, men i formular-sheets ligger
   body+footer inde i <form>, som ikke deltog i flex-layoutet og derfor
   voksede ud over kortet. Formen gøres til flex-kolonne m. min-height:0, så
   .bottom-sheet-body's egen scroll tager over; overflow:hidden klipper alt
   til de runde hjørner. Gælder ALLE sheets (korte forms påvirkes ikke). */
.bottom-sheet { overflow: hidden; }
.bottom-sheet > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Tråd-visning på mobil = FULDSKÆRMS-CHAT (Kims krav 27-08): topbaren beholder
   logoet — emnet står som kompakt overskrift LIGE UNDER topbaren
   (.msg-thread-title-mobile). Den store overskrift, Tilbage-knappen og
   bundmenuen skjules, og kortet fylder resten af skærmen kant til kant med
   composeren i bunden (over home-indikatoren). */
.mobile-topbar-title { color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw; display: block; text-align: center; }
.msg-thread-title-mobile { display: none; }
@media (max-width: 900px) {
    .msg-thread-title-mobile { display: block; padding: 11px 16px; background: #fff; border-bottom: 1px solid #f0f2f6; flex-shrink: 0; }
    .msg-thread-title-mobile .mttm-t { font-weight: 750; font-size: 14.5px; line-height: 1.3; }
    .msg-thread-title-mobile .mttm-s { font-size: 11.5px; color: #8a97a5; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* iOS-body-lås: tastatur-panorering kunne efterlade DOKUMENTET forskudt,
       så composeren "fulgte med op i beskeden" (Kims fund 27/28-08). Med body
       position:fixed kan dokumentet slet ikke scrolle — kun selve samtalen
       (.msg-thread-body) scroller, og composeren bliver i bunden. */
    body.msg-thread-page { position: fixed; inset: 0; width: 100%; overflow: hidden; }
    body.msg-thread-page .mobile-menu { display: none !important; }
    body.msg-thread-page .page-header,
    body.msg-thread-page .page-head,
    body.msg-thread-page .message-back-button { display: none !important; }
    /* Kortet skal fylde PRÆCIS resten af skærmen med composeren låst i bunden.
       Ingen viewport-beregning (den fejlede når fx simulerings-baren tog højde
       i toppen) — i stedet flex-fill hele kæden .main > .content > kort, da
       .app allerede er højde-styret (100dvh, minus impersonation-bar). */
    body.msg-thread-page .main {
        padding: calc(var(--topbar-height, 60px) + var(--safe-top, 0px)) 0 0 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    body.msg-thread-page .main > .content {
        flex: 1;
        min-height: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    body.msg-thread-page .msg-thread-card {
        margin: 0;
        border: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    body.msg-thread-page .msg-thread-body { flex: 1; min-height: 0; max-height: none; overscroll-behavior: contain; }
    /* Composeren er LÅST til bunden præcis som appens bundmenu (position:
       fixed — Kims fund 27-08: i flow'et kunne den scrolle med, når iOS
       flyttede dokumentet for tastaturet). messages_page.js løfter den over
       tastaturet via visualViewport, så man kan se hvad man skriver.
       Safe-area-luft i bunden som bundmenuen (min. 18px). */
    body.msg-thread-page .msg-composer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: #fff;
        border-top: 1px solid #f0f2f6;
        padding-bottom: max(18px, calc(14px + env(safe-area-inset-bottom, 0px)));
        will-change: transform;
    }
    /* Plads i bunden af samtalen så sidste boble ikke gemmer sig bag feltet.
       104px er kun STARTVÆRDI — messages_page.js holder paddingen lig
       composerens faktiske højde via ResizeObserver (Kims fund 31-08:
       App/SMS-rækken gjorde composeren højere end de 104px, så meta-linjen
       under sidste boble kunne ikke scrolles frem). */
    body.msg-thread-page .msg-thread-body { padding-bottom: 104px; }
    body.msg-thread-page .alert { margin: 12px 14px; flex-shrink: 0; }
    /* Flex-kæden .content → kort skal være UBRUDT for at kortet kan fylde
       skærmen og .msg-thread-body scrolle (Kims fund 31-08: SMS-tråden kunne
       slet ikke scrolle). Admin-tråden ligger i page_layout_start-wrapperne
       (.page-side-layout > .page-side-content) + data-standalone-thread-
       markøren. IKKE display:contents (v207-forsøget): iOS/WebKit lagde
       først børnene ind i flex-layoutet efter en senere DOM-mutation — Kims
       fund: scroll virkede først efter et tryk på App/SMS (fix-ved-reflow).
       I stedet gøres hver wrapper til sin egen flex-fill-kolonne, så kæden
       er ubrudt med almindelig nestet flex. !important: .page-side-layout
       har display:block !important på mobil. Medarbejder-siden har ingen
       wrappere og rammes ikke. */
    body.msg-thread-page .page-side-layout,
    body.msg-thread-page .page-side-content,
    body.msg-thread-page [data-standalone-thread] {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        padding: 0 !important;
        width: 100% !important;
        max-width: none;
        gap: 0;
    }
    /* App/SMS-vælgeren på egen række OVER skrivefeltet (Kims fund 31-08:
       i composer-rækken klemte den skrivefeltet næsten væk) */
    body.msg-thread-page .msg-composer { flex-wrap: wrap; }
    body.msg-thread-page .msg-composer .msg-via-seg { order: -1; flex: 1 1 100%; width: 100%; }
}

/* Booking-besked hvor arbejdet siden er annulleret (kalender-rækken slettet) */
.msg-booking-gone { margin-top: 10px; font-size: 12px; color: #8a97a5; font-style: italic; }

/* ── Kanaler + interne tråde (etape 5) ─────────────────────────────────
   Intern = GUL + LÅS overalt (forvekslingssikring — Kims krav). */
.comm-avatar-channel { background: #e8effa; color: #2a5db0; }
.comm-avatar-internal { background: #fff3cd; color: #8a6d1a; }
.comm-type-ic--channel { background: #e8effa; color: #2a5db0; }
.comm-type-ic--internal { background: #fff3cd; color: #8a6d1a; }
.comm-badge-internal { display: inline-flex; align-items: center; gap: 3px; background: #fff3cd; color: #8a6d1a; border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 1px 8px; vertical-align: 1px; }
.msg-thread-card.comm-internal { border-top: 3px solid #e7c04a; }
.comm-bub-sender { font-size: 11px; font-weight: 750; color: #2a5db0; margin-bottom: 3px; }
.comm-internal .comm-bub-sender { color: #8a6d1a; }
.comm-mention { background: #e8effa; color: #2a5db0; border-radius: 6px; padding: 0 3px; font-weight: 650; }
.comm-internal .comm-mention { background: #fff3cd; color: #8a6d1a; }
.comm-pinned { display: flex; align-items: flex-start; gap: 8px; padding: 9px 16px; background: #fffbe8; border-bottom: 1px solid #f2e6b8; color: #6b5a1c; font-size: 12.5px; }
.comm-pinned-body { flex: 1; min-width: 0; }
.comm-pinned .msg-icon-btn { flex-shrink: 0; }
.comm-locked-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #f0f2f6; background: #fafbfd; color: #8a97a5; font-size: 12.5px; }
.comm-members { border-bottom: 1px solid #f0f2f6; background: #fafbfd; padding: 6px 16px; font-size: 12px; color: #5a6a7a; }
.comm-members summary { cursor: pointer; font-weight: 650; }
.comm-members-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; }
.comm-member { background: #eef1f6; border-radius: 999px; padding: 2px 9px; display: inline-flex; align-items: center; gap: 4px; }
.comm-member.is-muted { opacity: .75; }
.comm-member.is-left { opacity: .55; text-decoration: line-through; }
.comm-member em { color: #8a97a5; font-style: normal; }
.comm-pin-form { display: inline; margin: 0; }
.comm-pin-btn { border: 0; background: transparent; color: #c3ccd6; cursor: pointer; padding: 0 2px; vertical-align: -1px; }
.comm-pin-btn:hover { color: #2a5db0; }
.comm-pinned-tag { color: #b45309; display: inline-flex; align-items: center; gap: 2px; }
/* @-autocomplete-popover forankres i composeren (mobil: composeren er fixed) */
.msg-composer { position: relative; }
.comm-mention-pop { position: absolute; bottom: calc(100% + 6px); left: 14px; background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); padding: 4px; display: flex; flex-direction: column; min-width: 200px; max-width: 90%; z-index: 1200; }
.comm-mention-opt { text-align: left; border: 0; background: transparent; padding: 8px 11px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; }
.comm-mention-opt.is-active, .comm-mention-opt:hover { background: #e8effa; color: #2a5db0; }

/* ── Udsendelses-visning: designløft (godkendt mockup ace79f67) ─────────
   Midterkolonne + besked-kort m. afsender-hoved/status-fod + modtager-
   register m. initial-brikker og tråd-kolonne. */
/* Udsendelses-visningen kører FULD bredde som resten af admin (Kims regel
   28-08: aldrig låst maks-bredde på admin-sider — bærbar/wide/ultrawide). */
.msg-view-col { width: 100%; }
.msgv-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); overflow: hidden; }
.msgv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #f0f2f6; background: #fafbfd; }
.msgv-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.msgv-ic { width: 36px; height: 36px; border-radius: 999px; background: #e8effa; color: #2a5db0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msgv-n { font-weight: 750; font-size: 13.5px; }
.msgv-m { font-size: 11.5px; color: #8a97a5; margin-top: 1px; }
.msgv-body { padding: 18px 20px; font-size: 14px; line-height: 1.65; }
.msgv-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #f0f2f6; background: #fafbfd; flex-wrap: wrap; }
.msgv-sec-head { display: flex; align-items: center; gap: 9px; margin: 22px 0 10px; }
.msgv-sec-head h3 { margin: 0; font-size: 15px; font-weight: 750; }
.msgv-emp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.msgv-avatar { width: 30px; height: 30px; border-radius: 999px; background: #e8effa; color: #2a5db0; font-weight: 750; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msgv-emp-n { font-weight: 650; }
.msgv-emp-no { font-size: 11.5px; color: #8a97a5; }
.msgv-mail { color: #5a6a7a; }
.msgv-st-time { font-size: 11px; color: #8a97a5; margin-top: 2px; }
.msgv-thread-cell { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.msgv-chev { color: #c3ccd6; font-size: 18px; line-height: 1; }
.msgv-hint { font-size: 12px; color: #8a97a5; margin: 8px 2px 0; }

/* ── Besked-designløft runde 2 (mockup cb25e7cb) ────────────────────── */
/* Type-brik i oversigts- og arkivrækker: megafon/send = udsendelse fra
   kontoret, kalender = system-besked, warn-farvet = annulleret arbejde */
.msg-type-ic { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg-type-ic--send { background: #e8effa; color: #2a5db0; }
.msg-type-ic--sys { background: #eef1f6; color: #5a6a7a; }
.msg-type-ic--cancel { background: #fff3e0; color: #b45309; }
.msg-subj { display: flex; align-items: center; gap: 11px; min-width: 0; }

/* Stille ikon-handlinger i rækkerne — farve KUN ved hover (aldrig en mur
   af røde knapper) */
.msg-icon-btn { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #8a97a5; cursor: pointer; padding: 0; }
.msg-icon-btn:hover { background: #eef1f6; color: var(--text, #0f1419); }
.msg-icon-btn--danger:hover { background: #fdeaea; color: #b91c1c; }

/* Mobil-kort: emne med type-brik */
.msg-card-emne { display: flex; align-items: center; gap: 10px; min-width: 0; }
.msg-card-emne .msg-type-ic { width: 28px; height: 28px; }
.msg-card-emne strong { min-width: 0; }

/* Modtager-registret i visningen: læste får grå brik, ulæste beholder blå
   brik + fed; "Åbn tråd" vises kun ved hover (desktop) — chevron altid */
.msgv-avatar.is-read { background: #eef1f6; color: #8a97a5; }
.msg-row-unread .msgv-emp-n { font-weight: 750; }
.msgv-open { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 650; color: #2a5db0; opacity: 0; transition: opacity .12s; white-space: nowrap; }

/* ── Master-detail-hub /admin/messages (etape 4, prototype 0dfd5460) ── */
/* Liste-kolonnen skalerer med skærmen (Kims ønske 31-08 — fast 420px var
   for smalt og voksede ikke med på wide/ultrawide): min. 440px på bærbar,
   ~1/3 skærmbredde, loft 620px på ultrawide. */
.msg-hub { display: grid; grid-template-columns: clamp(440px, 32vw, 620px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.msg-hub-list { min-width: 0; }
/* Detaljekolonnen er sin egen scroll-container (Kims fund 31-08: sticky uden
   egen scroll = lange udsendelser m. mange modtagere kunne aldrig nå bunden —
   kun listen rullede). */
.msg-hub-detail { min-width: 0; position: sticky; top: 82px; max-height: calc(100vh - 96px); overflow-y: auto; }
.msg-hub-detail .msg-view-col { width: 100%; }
.msg-hub-detail .msg-thread-card { margin-top: 0; }
.mh-chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 10px; }
.mh-chips a { display: inline-flex; align-items: center; gap: 6px; background: #eef1f6; color: #5a6a7a; border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 650; text-decoration: none; }
.mh-chips a.on { background: var(--text, #0f1419); color: #fff; }
.mh-chip-count { background: #fff3e0; color: #b45309; font-size: 10.5px; font-weight: 750; border-radius: 999px; padding: 0 6px; }
.mh-chips a.on .mh-chip-count { background: rgba(255, 255, 255, .22); color: #fff; }
.mh-chip-count--neu { background: #dde3ec; color: #5a6a7a; }
.mh-list { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.mh-row { display: flex; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #f0f2f6; align-items: flex-start; }
.mh-row:last-child { border-bottom: 0; }
.mh-row:hover { background: #f7f9fc; }
.mh-row.sel { background: #f0f5fd; box-shadow: inset 3px 0 0 #2a5db0; }
.mh-main { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; color: inherit; text-decoration: none; }
.mh-main:hover { text-decoration: none; color: inherit; }
.mh-body { flex: 1; min-width: 0; }
.mh-top { display: flex; gap: 8px; align-items: baseline; }
.mh-t { font-weight: 700; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-no { font-weight: 500; color: #8a97a5; font-size: 12px; }
.mh-time { font-size: 11px; color: #8a97a5; flex-shrink: 0; white-space: nowrap; }
.mh-sub { font-size: 12px; color: #8a97a5; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-sub svg { display: inline; vertical-align: -1px; }
.mh-flags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.mh-badge { background: #1d4ed8; color: #fff; font-size: 10.5px; font-weight: 750; border-radius: 999px; padding: 1px 7px; flex-shrink: 0; margin-top: 3px; }
.mh-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
.mh-actions form { margin: 0; display: flex; }
.mh-empty { padding: 26px 16px; text-align: center; color: #8a97a5; font-size: 12.5px; }
.mh-placeholder { background: #fff; border: 1px dashed #dbe1ea; border-radius: 14px; padding: 60px 20px; text-align: center; color: #8a97a5; font-size: 13px; }
.mh-placeholder svg { margin: 0 auto; }
.msgv-hub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.msgv-hub-head h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.msgv-hub-head .mvh-m { font-size: 12px; color: #8a97a5; margin-top: 2px; }
.msgv-hub-head .mvh-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 1023px) {
    .msg-hub { display: block; }
    .msg-hub-detail { display: none; }
    .msg-hub.has-sel .msg-hub-list { display: none; }
    .msg-hub.has-sel .msg-hub-detail { display: block; position: static; }
}

/* App/SMS-vælger i tråd-composeren (etape 3) */
.msg-composer .msg-via-seg { flex: 0 0 auto; margin: 0; }
.msg-composer .msg-via-seg button { padding: 6px 12px; font-size: 12px; }
.msg-composer-attach.is-disabled { opacity: .35; pointer-events: none; }

/* SMS-mærke på tråd-indlæg (Relatel — via_sms=1) */
.msg-sms-tag { display: inline-flex; align-items: center; background: #eef1f6; color: #5a6a7a; border-radius: 999px; font-size: 10px; font-weight: 750; letter-spacing: .3px; padding: 1px 7px; vertical-align: 1px; }

/* Vedhæftningsliste i Ny besked-sheeten (redigering af planlagt) */
.msg-att-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 6px; color: var(--text, #0f1419); }
.msg-att-row .msg-att-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-att-row input[type="checkbox"] { width: 15px; height: 15px; margin: 0; flex-shrink: 0; }
@media (hover: hover) { .msg-register-table tr:hover .msgv-open { opacity: 1; } }
@media (hover: none) { .msgv-open { display: none; } }

/* ── Tråd-hoved i kortet + bredere kort (Kims designfund 28-08) ─────────
   Standard-side-overskriften skjules på ALLE bredder for tråd-sider —
   kortet bærer selv sit hoved (avatar, navn/emne, kontekst, handling),
   som i mockup'et. */
body.msg-thread-page .page-head,
body.msg-thread-page .page-header,
body.msg-thread-page .message-back-button { display: none !important; }
.msg-thread-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #f0f2f6; background: #fff; flex-shrink: 0; }
.msg-thread-back { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #5a6a7a; flex-shrink: 0; }
.msg-thread-back:hover { background: #f2f4f8; }
.msg-thread-avatar { width: 36px; height: 36px; font-size: 12.5px; }
.msg-thread-avatar-office svg { display: block; }
.mth-who { min-width: 0; flex: 1; }
.mth-n { font-weight: 750; font-size: 14.5px; line-height: 1.3; }
.mth-no { font-weight: 500; color: #8a97a5; font-size: 12.5px; }
.mth-s { font-size: 11.5px; color: #8a97a5; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mth-actions { flex-shrink: 0; }
@media (max-width: 900px) {
    .msg-thread-back { display: none; } /* topbaren har tilbage-pilen på mobil */
    .mth-actions { display: none; }     /* holdes kompakt — Se medarbejder er desktop */
}

/* ── Kundeportalens designløft 02-09: sum-strimmel (Variant B) + eksport i sidehovedet ── */
.cust-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cust-head-grow { flex: 1; min-width: 220px; }
.cust-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Hvid fylde (btn-outline er transparent i appen) + luft mellem ikon og tekst */
.cust-head-actions .btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; }
.cust-head-actions .btn:hover { background: #f1f5f9; }
.cust-toggle-on { border-color: #2a5db0 !important; background: #e8effa !important; color: #2a5db0 !important; }

/* Fælles periode-vælger (én fra/til-knap m. flatpickr-range som admin) */
.cust-period-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 11px 14px;
    border: 1.5px solid var(--border, #dfe4ec);
    border-radius: var(--radius-sm, 9px);
    background: #fff;
    color: var(--text, #1c2733);
    font-size: var(--font-input, 14px);
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.cust-period-btn svg { flex: none; color: #6d7683; }
.cust-period-btn:hover { border-color: #b9c3d2; }

/* .form-card.cust-strip: dobbelt klasse så padding:0 vinder over
   forms.css' .form-card { padding:20px } (indlæses senere i kaskaden) */
.form-card.cust-strip,
.cust-strip { display: flex; align-items: stretch; padding: 0; overflow: hidden; }
.cust-strip-cell { flex: 1; min-width: 0; padding: 12px 16px; border-right: 1px solid #e7eaf0; }
.cust-strip-cell:last-child { border-right: 0; }
.cust-strip-cell.is-hl { background: #e8effa; }
.cust-strip-cell.is-hl .cust-strip-num { color: #2a5db0; }
.cust-strip-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #8a8f98; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-strip-num { font-size: 19px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cust-strip-num small { font-size: 12px; font-weight: 650; color: #5a6a7a; }
.cust-strip-chips { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.cust-strip-chips .badge { font-size: 11px; }
@media (max-width: 767px) {
    /* Ingen vandret scroll på mobil: cellerne ombrydes til to kolonner */
    .cust-strip { flex-wrap: wrap; }
    .cust-strip-cell { flex: 1 1 42%; border-bottom: 1px solid #f0f2f6; }
    .cust-strip-cell:nth-child(even) { border-right: 0; }
    .cust-strip-cell:nth-last-child(-n+2) { border-bottom: 0; }
    .cust-strip-num { font-size: 17px; }
}

/* Trin 2: registerstil på kundens tabeller (enhedssider + Godkend) */
.customer-list-table thead th,
.customer-approval-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #7c8794;
    font-weight: 750;
    background: #fafbfd;
    white-space: nowrap;
}
@media (min-width: 768px) {
    /* Talkolonner højrestilles m. tabular-nums — kun desktop; på mobil er
       rækkerne kort m. data-labels, hvor venstrestilling er rigtig */
    .customer-list-table th.num,
    .customer-list-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
}

/* Trin 2: medarbejderprofilen (kundeportalen) — kort m. uppercase labels + chips */
.cev-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #8a8f98; font-weight: 750; }
.cev-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }