/* =========================================================
   INSTALL PROMPT
========================================================= */
.install-prompt{
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    width: min(360px, 92vw);
    display: none;
    z-index: 4000;
    pointer-events: none;
}
.install-prompt.is-open{
    display: block;
}
.install-card{
    width: 100%;
    background: var(--primary);
    color: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.25);
    text-align: left;
    position: relative;
    pointer-events: auto;
}
.install-card::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: var(--primary) transparent transparent transparent;
}
.install-title{
    font-size: var(--font-input);
    font-weight: 700;
}
.install-text{
    margin-top: 6px;
    font-size: var(--font-sm);
    line-height: 1.4;
}
.install-ios-hint{
    margin-top: 8px;
    font-size: var(--font-sm);
    color: rgba(255,255,255,0.9);
}
.install-ios-hint .install-icon{
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    margin: 0 2px;
}
.install-actions{
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.install-actions .btn{
    flex: 1 1 0;
    min-height: 36px;
    padding: 8px 10px;
}
.install-actions .btn.btn-outline{
    border-color: rgba(255,255,255,0.7);
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.install-actions .btn.btn-primary{
    background: #fff;
    color: #0f172a;
}

/* Engangs-banner: aktivér push-notifikationer (vises kun når tilladelse ikke er afgjort) */
.push-enable-banner{
    position: fixed;
    left: 50%;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(380px, 92vw);
    display: none;
    z-index: 4000;
    pointer-events: none;
}
.push-enable-banner.is-open{ display: block; }
.push-enable-card{
    position: relative;
    background: var(--primary);
    color: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.25);
    pointer-events: auto;
}
.push-enable-title{
    font-size: var(--font-input);
    font-weight: 700;
}
.push-enable-text{
    margin-top: 6px;
    font-size: var(--font-sm);
    line-height: 1.4;
    color: rgba(255,255,255,0.95);
}
.push-enable-actions{
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}
.push-enable-yes{
    background: #fff;
    color: var(--primary, #2563EB);
    border: 0;
    border-radius: 10px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: var(--font-input);
    cursor: pointer;
}
.push-enable-close{
    position: absolute;
    top: 4px;
    right: 8px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    opacity: 0.85;
    padding: 4px 6px;
    cursor: pointer;
}

/* =========================================================
   PAGE HEAD
========================================================= */
.page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 0;
    margin-bottom: 12px;
}
.page-head-icon{
    display:inline-flex;
    align-items:center;
    margin-right:8px;
}
.page-head-center{ align-items:center; }
.page-title{ margin:0; }
.page-subtitle{
    margin:6px 0 0;
    color: var(--muted);
}
.muted{ color: var(--muted); }
.muted-sm{ font-size: var(--font-xs); }
.text-12{ font-size: 12px; }
.text-13{ font-size: var(--font-sm); }
.nowrap{ white-space:nowrap; }
.ws-normal{ white-space:normal; }
.pre-wrap{ white-space:pre-wrap; }
.hidden{ display:none !important; }
.inline{ display:inline; }
.text-center{ text-align:center; }
.text-red{ color: var(--danger); }
.text-green{ color: var(--success); }
.text-666{ color:#666; }

.content > .page-head:first-child{
    margin-top: 0;
}
.content > :first-child{
    margin-top: 0;
}
.content > :last-child{
    margin-bottom: 0;
}

.page-head .btn-group{
    margin-top: 0;
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.page-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.page-actions > *{
    min-width: 0;
}
.page-actions .btn{
    margin-left: auto;
}

/* =========================================================
   APPROVAL TABLE (desktop alignment)
========================================================= */
@media (min-width: 1201px) {
    .approval-table{
        table-layout: fixed;
    }
    .approval-table th:first-child,
    .approval-table td:first-child{
        width: 36px;
        text-align: center;
    }
    .approval-table th:nth-child(2),
    .approval-table td:nth-child(2){
        width: 110px;
    }
    .approval-table th:nth-child(3),
    .approval-table td:nth-child(3){
        width: 160px;
    }
    .approval-table th:nth-child(4),
    .approval-table td:nth-child(4){
        width: 190px;
    }
    .approval-table th:nth-child(5),
    .approval-table td:nth-child(5){
        width: 150px;
    }
    .approval-table input[type="checkbox"]{
        width: 16px;
        height: 16px;
        transform: none;
        margin: 0;
    }
}

.approval-table tbody tr.approval-project-divider td{
    border-top: 3px solid #94a3b8;
}

.customer-list-table tbody tr.approval-project-divider td{
    border-top: 3px solid #94a3b8;
}

.approval-table td.approval-status-cell{
    white-space: nowrap;
    min-width: 120px;
}

.approval-table td.approval-status-cell .badge{
    display: inline-flex;
    white-space: nowrap;
}

@media (min-width: 1201px) {
    .approval-table th:last-child,
    .approval-table td:last-child{
        width: 140px;
    }
}

@media (min-width: 1201px) {
    .approval-table.customer-approval-table th:nth-child(3),
    .approval-table.customer-approval-table td:nth-child(3){
        width: 170px;
    }
    .approval-table.customer-approval-table th:nth-child(4),
    .approval-table.customer-approval-table td:nth-child(4){
        width: 230px;
    }
    .approval-table.customer-approval-hours-table th.time-type-col-night-18-22,
    .approval-table.customer-approval-hours-table th.time-type-col-night-22-06{
        white-space: nowrap;
    }
}

@media (min-width: 1201px) {
    /* Fast bredde på checkbox/dato/projekt/medarbejder + status, resten auto-fordeles */
    .approval-table.customer-approval-table th:nth-child(n+5):not(:last-child),
    .approval-table.customer-approval-table td:nth-child(n+5):not(:last-child){
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .approval-table.customer-approval-hours-table th.time-type-col,
    .approval-table.customer-approval-hours-table td.time-type-col{
        width: auto !important;
    }
}

.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.gap-8{ gap:8px; }
.gap-4{ gap:4px; }
.gap-10{ gap:10px; }
.gap-12{ gap:12px; }
.gap-14{ gap:14px; }

/* ── Approval: Kompakte mobil-kort ──────────────────────────── */
.approval-mobile-cards { display: none; }

@media (max-width: 768px) {
    .approval-mobile-cards { display: block; }
    .approval-table-wrap { display: none !important; }
    .approval-mobile-hide { display: none !important; }
}

.approval-project-group {
    background: var(--primary-light, #e8f2ff);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    margin-bottom: 6px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text);
}
.approval-project-group .apg-no {
    color: var(--primary);
    font-weight: 700;
}
.approval-compact-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.approval-compact-card .acc-check {
    margin-top: 2px;
    flex-shrink: 0;
}
.approval-compact-card .acc-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}
.approval-compact-card .acc-body {
    flex: 1;
    min-width: 0;
}
.approval-compact-card .acc-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.approval-compact-card .acc-employee {
    font-weight: 600;
    font-size: var(--font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.approval-compact-card .acc-date {
    font-size: var(--font-xs);
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.approval-compact-card .acc-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.approval-compact-card .acc-chip {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text);
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 6px;
}
.approval-compact-card .acc-chip .acc-cl {
    color: var(--muted);
    font-weight: 500;
}
.approval-compact-card .acc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}
.approval-compact-card .acc-total-label {
    font-size: var(--font-xs);
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.approval-compact-card .acc-total-value {
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text);
}

/* Collapsible filter */
.approval-filter-bar {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 14px;
    margin-bottom: 12px;
    cursor: pointer;
}
.approval-filter-bar .afb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.approval-filter-bar .afb-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.approval-filter-bar .afb-chevron {
    color: var(--muted);
    font-size: 12px;
    transition: transform var(--duration-fast, 150ms) var(--ease-ios, ease);
}
.approval-filter-bar.open .afb-chevron {
    transform: rotate(180deg);
}
.approval-filter-bar .afb-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.approval-filter-bar.open .afb-chips {
    display: none;
}
.approval-filter-bar .afb-chip {
    font-size: var(--font-xs);
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.approval-filter-bar .afb-body {
    display: none;
    margin-top: 10px;
}
.approval-filter-bar.open .afb-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.approval-filter-bar .afb-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Sticky approval actions */
.approval-sticky-bar {
    display: none;
}
@media (max-width: 768px) {
    .approval-sticky-bar {
        display: flex;
        position: fixed;
        bottom: var(--tab-bar-height, 82px);
        left: 0;
        right: 0;
        background: var(--card);
        border-top: 1px solid var(--border);
        padding: 10px 14px;
        gap: 8px;
        justify-content: center;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
        z-index: 50;
    }
}

.inline-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.status-row{
    margin-top:10px;
    color: var(--muted);
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

/* Godkend/afvis: kompakte kvadratiske knapper side om side (mockup-udtrykket) */
.approval-icon-actions{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
}

.approval-icon-actions form{
    margin: 0;
    display: inline-flex;
}

.approval-icon-btn,
.approval-icon-btn.approval-icon-btn-approve{
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-md);
    line-height: 1;
    border-radius: 8px;
}

.grid-2{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
}
.grid-3{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px;
}
.grid-2 > *,
.grid-3 > *{
    min-width: 0;
}
/* Som .grid-2, men BLIVER 2 kolonner på mobil (små felter: datoer, timetal) —
   mobile.css kollapser .grid-2/.grid-3 til 1 kolonne, denne undtages bevidst */
.grid-2-m{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
}
.grid-2-m > *{ min-width: 0; }
.grid{ display:grid; }

.mt-4{ margin-top:4px; }
.mt-6{ margin-top:6px; }
.mt-8{ margin-top:8px; }
.mt-10{ margin-top:10px; }
.mt-12{ margin-top:12px; }
.mt-14{ margin-top:14px; }
.mt-16{ margin-top:16px; }
.mt-18{ margin-top:18px; }
.mt-20{ margin-top:20px; }
.mt-24{ margin-top:24px; }
.mb-8{ margin-bottom:8px; }
.mb-10{ margin-bottom:10px; }
.mb-12{ margin-bottom:12px; }
.mb-20{ margin-bottom:20px; }
.mb-24{ margin-bottom:24px; }
.m-0{ margin:0; }
.p-16{ padding:16px; }
.btn-pad-8-10{ padding:8px 10px; }
.pl-8{ padding-left:8px; }
.pr-8{ padding-right:8px; }
.pt-16{ padding-top:16px; }
.pb-16{ padding-bottom:16px; }
.pb-20{ padding-bottom:20px; }
.pb-25{ padding-bottom:25px; }
.w-30p{ width:30%; }
.w-40p{ width:40%; }
.w-70{ width:70px; }
.w-80{ width:80px; }
.w-110{ width:110px; }
.w-140{ width:140px; }
.w-240{ width:240px; }
.w-400{ width:400px; }

/* =========================================================
   ADMIN DASHBOARD
========================================================= */
.admin-dashboard-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 0;
}
.admin-kpi{
    display:flex;
    flex-direction:column;
    gap: 6px;
}
.admin-kpi h3{
    margin: 0;
    font-size: var(--font-input);
}
.admin-kpi .kpi-value{
    font-size: var(--font-2xl);
    font-weight: 800;
    color: #0f172a;
}
.admin-kpi .kpi-sub{
    color: var(--muted);
    font-size: var(--font-sm);
}
.admin-kpi .kpi-actions{
    margin-top: 8px;
}
.pending-list{
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.pending-list li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 10px;
}
.pending-list .label{
    font-weight: 600;
    color: #0f172a;
}
.dashboard-section{
    margin-top: 24px;
}

.desktop-only{ display:block; }
.mobile-only{ display:none; }

@media (max-width: 1200px){
    .desktop-only{ display:none; }
    .mobile-only{ display:block; }
    .page-actions .btn{
        margin-left: 0;
    }
}

/* =========================================================
   WEEK CALENDAR (employee dashboard)
========================================================= */
.week-nav{
    display:flex;
    gap: 10px;
    align-items:center;
    margin: 12px 0 16px;
    flex-wrap:wrap;
}

.week-calendar{
    display:grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}

.day-card{
    background:#fff;
    padding: 12px;
    border-radius: 14px;
    min-height: 140px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border-radius: 10px;
    font-size: var(--font-sm);
    text-decoration:none;
    color:#0f172a;
}
.item.hours      { background: rgba(0,122,255,0.08);  color: #0055cc; }
.item.supplement { background: rgba(0,122,255,0.05);  color: #3377bb; margin-top: 4px; }
.item.diet       { background: rgba(255,149,0,0.10);  color: #c47a00; }
.item.km         { background: rgba(52,199,89,0.10);  color: #248a3d; }
.item.outlay     { background: rgba(88,86,214,0.10);  color: #4040b0; }
.item-text{
    flex: 1 1 auto;
    min-width: 0;
}
.item-lock{
    font-size: var(--font-xs);
    opacity: 0.85;
    justify-content:flex-end;
}
/* =========================================================
   DIET CALENDAR (employee diets page)
========================================================= */
.diet-calendar{
    display:grid;
    gap: 12px;
    margin-top: 16px;
}
.diet-card{
    background:#fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.diet-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* =========================================================
   CALENDAR
========================================================= */
.calendar-wrap{
    margin-top: 16px;
    position: relative;
}
.calendar-legend{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--font-sm);
    color: #475569;
}
.calendar-month-title{
    margin-top: 10px;
    font-weight: 700;
    font-size: var(--font-input);
    color: #0f172a;
    text-align: center;
}
.legend-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    margin-right: 6px;
}
.legend-work{ background: #93c5fd; }
.legend-leave{ background: #fca5a5; }
.legend-sickness{ background: #d97706; }
.legend-free{ background: #e2e8f0; }

.calendar-grid{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.calendar-weekdays{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
    font-size: var(--font-xs);
    font-weight: 600;
    color: #64748b;
    text-transform: none;
}
.calendar-weekdays.calendar-with-weeks,
.calendar-grid.calendar-with-weeks{
    grid-template-columns: 46px repeat(7, minmax(0, 1fr));
}
.calendar-weekday.week-number,
.calendar-week-number{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-xs);
    color: #64748b;
}
.calendar-week-number{
    background: transparent;
    border-radius: 0;
    border: none;
    padding: 0;
}
.calendar-weekday{
    text-align: center;
}
.calendar-weekday .weekday-short{ display: none; }
.calendar-actions-desktop{ display: flex; }
.calendar-actions-mobile{ display: none; }
.calendar-day{
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.calendar-day.outside{
    opacity: 0.4;
}
.calendar-day .day-number{
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}
.calendar-day.today .day-number{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid #2563eb;
    color: #2563eb;
    background: #fff;
    box-sizing: border-box;
}
.calendar-day .status{
    font-size: var(--font-xs);
    font-weight: 600;
    color: #475569;
}
.calendar-day .day-note{
    font-size: var(--font-xs);
    font-weight: 400;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
.calendar-day-popup{
    position: absolute;
    display: none;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    font-size: var(--font-sm);
    color: #334155;
    z-index: 20;
    pointer-events: none;
    max-width: 240px;
    white-space: normal;
}
.calendar-day-popup::before,
.calendar-day-popup::after{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-color: transparent;
}
.calendar-day-popup::before{
    bottom: -7px;
    border-width: 7px 7px 0 7px;
    border-top-color: #e2e8f0;
}
.calendar-day-popup::after{
    bottom: -6px;
    border-width: 6px 6px 0 6px;
    border-top-color: #ffffff;
}
.calendar-day-popup.is-open{
    display: block;
}
.calendar-day-popup strong{
    color: #0f172a;
}

/* ── Generel CSS-only tooltip via [data-tip] ────────────────── */
[data-tip]{
    position: relative;
    cursor: default;
}
[data-tip]::before,
[data-tip]::after{
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 4400;
}
[data-tip]::before{
    content: attr(data-tip);
    background: #1e293b;
    border-radius: 6px;
    color: #fff;
    font-size: var(--font-xs);
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 9px;
}
[data-tip]::after{
    content: '';
    bottom: calc(100% + 1px);
    border: 5px solid transparent;
    border-top-color: #1e293b;
}
[data-tip]:hover::before,
[data-tip]:hover::after{
    opacity: 1;
}

.calendar-availability .calendar-day{
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: auto;
}

.calendar-employee-list{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calendar-employee{
    border: 1px solid #dbe4f3;
    background: #ffffff;
    color: #0f1b2d;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.85rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05);
    white-space: normal;
    word-break: break-word;
}
.calendar-employee-name-short{
    display: none;
}

.calendar-employee:hover{
    background: #f4f8ff;
}

.calendar-employee.is-booked{
    border-color: #9dbcfb;
    background: #e7f0ff;
    color: #1c4bc3;
}

.calendar-empty{
    font-size: 0.8rem;
    color: #8b95a7;
}

.calendar-employee-popup{
    position: absolute;
    z-index: 5;
    background: #fff;
    border: 1px solid #e4e9f5;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 12px 25px rgba(15, 27, 45, 0.12);
    min-width: 220px;
    max-width: 280px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

.calendar-employee-popup.is-open{
    opacity: 1;
    pointer-events: auto;
}

.calendar-employee-popup-title{
    font-weight: 700;
    margin-bottom: 6px;
}

.calendar-employee-popup-row{
    font-size: 0.9rem;
    color: #2d3b52;
    margin-top: 4px;
}
.calendar-day-detail strong{
    color: #0f172a;
}
.calendar-day.work{
    border-color: #93c5fd;
    background: #eff6ff;
}
.calendar-day.leave{
    border-color: #fca5a5;
    background: #fff1f2;
}
.calendar-day.sickness{
    border-color: #d97706;
    background: #fef3c7;
}
.calendar-day.free{
    border-color: #e2e8f0;
    background: #f8fafc;
}

/* Overlap — dobbelt-farvet diagonal + advarselsikon */
.calendar-day.overlap{
    border-color: #f59e0b;
    border-width: 2px;
    position: relative;
}
.calendar-day.overlap-leave-work{
    background: linear-gradient(135deg, #eff6ff 50%, #fff1f2 50%);
}
.calendar-day.overlap-sickness-work{
    background: linear-gradient(135deg, #eff6ff 50%, #fef3c7 50%);
}
.calendar-day.overlap-leave-sickness{
    background: linear-gradient(135deg, #fff1f2 50%, #fef3c7 50%);
}
.calendar-day.overlap-leave-sickness-work{
    background: linear-gradient(135deg, #eff6ff 33%, #fff1f2 33%, #fff1f2 66%, #fef3c7 66%);
}
.day-overlap-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    color: #d97706;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 1;
}
@media(max-width:768px){
    .day-overlap-icon{ font-size: var(--font-xs); }
}

/* Swimlane overlap */
.swimlane-cell.swimlane-overlap{
    position: relative;
    border: 2px solid #f59e0b;
}
.swimlane-cell.swimlane-overlap-booked-leave{
    background: linear-gradient(135deg, #c7d2fe 50%, #fecdd3 50%);
}
.swimlane-cell.swimlane-overlap-booked-sickness{
    background: linear-gradient(135deg, #c7d2fe 50%, #fde68a 50%);
}
.swimlane-cell.swimlane-overlap-leave-sickness{
    background: linear-gradient(135deg, #fecdd3 50%, #fde68a 50%);
}
.swimlane-cell.swimlane-overlap::after{
    content: '\26A0';
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: var(--font-xs);
    color: #d97706;
    line-height: 1;
}

/* Overlap picker popup */
.overlap-picker{
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    min-width: 200px;
    max-width: 300px;
    padding: 8px 0;
}
.overlap-picker.is-open{ display: block; }
.overlap-picker-title{
    padding: 6px 14px 4px;
    font-size: var(--font-xs);
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
}
.overlap-picker-btn{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: var(--font-sm);
    color: #1f2937;
    cursor: pointer;
    transition: background .15s;
}
.overlap-picker-btn:hover{ background: #f3f4f6; }
.overlap-picker-btn:active{ background: #e5e7eb; }
.overlap-picker-btn-add{
    border-top: 1px solid #e5e7eb;
    color: #2563eb;
    font-weight: 600;
}
.overlap-picker-btn-sub{
    padding-left: 28px;
    font-size: 0.85em;
    color: #4b5563;
}
.overlap-picker-btn-sub:hover{ background: #f9fafb; }
.overlap-picker-dot{
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.1);
}

/* Confirm status icons on calendar days */
.day-confirm-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 1;
}
@media(max-width:768px){
    .day-confirm-icon svg{ width: 11px; height: 11px; }
}

/* Swimlane confirm status */
.swimlane-cell.swimlane-confirmed{
    position: relative;
}
.swimlane-cell.swimlane-confirmed::before{
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
}
.swimlane-cell.swimlane-pending{
    position: relative;
}
.swimlane-cell.swimlane-pending::before{
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d97706;
}

/* Booking confirm section in message view */
.booking-confirm-section{
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}
.booking-confirmed-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    color: #16a34a;
    font-size: var(--font-sm);
    font-weight: 500;
}

/* =========================================================
   SIMULER MEDARBEJDER (impersonation)
========================================================= */
:root {
    --impersonation-bar-height: 44px;
}

.impersonation-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--impersonation-bar-height) + var(--safe-top));
    padding: var(--safe-top) 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #b45309;            /* tydelig advarselsfarve (amber) */
    color: #fff;
    font-size: var(--font-sm);
    z-index: 2100;                  /* over topbar (2000) */
}
.impersonation-bar-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.impersonation-bar-form { margin: 0; }
.impersonation-bar-exit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    cursor: pointer;
}
.impersonation-bar-exit:hover { background: rgba(255, 255, 255, .28); }

/* Skub topbar + app-shell ned så banneret får plads i toppen.
   Banneret ejer safe-area-toppen, derfor fjernes topbarens egen safe-top. */
body.is-impersonating .topbar {
    top: calc(var(--impersonation-bar-height) + var(--safe-top));
    height: var(--topbar-height);
    padding-top: 0;
}
body.is-impersonating .app {
    margin-top: var(--impersonation-bar-height);
    height: calc(100vh - var(--impersonation-bar-height));
    height: calc(100dvh - var(--impersonation-bar-height));
}

/* Sidebar-knap der skal se ud som et sidebar-link */
button.sidebar-link {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

/* Knap-række i simuler-popup */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* Simuler-vælger i bottom sheet (mobil) */
.simulate-sheet-form .form-group { margin-bottom: 16px; }
.simulate-sheet-form select { width: 100%; }
.simulate-sheet-submit { width: 100%; }

/* =========================================================
   FANE-BAR — Redigér kunde (desktop-faner, mobil bruger accordion)
========================================================= */
.customer-edit-tabs { display:flex; gap:4px; flex-wrap:wrap; background:#eceef2; padding:5px; border-radius:12px; margin:0 0 16px; }
.customer-edit-tabs button { border:0; background:transparent; padding:9px 16px; border-radius:8px; font-weight:600; font-size:13px; color:#475569; cursor:pointer; display:flex; align-items:center; gap:7px; }
.customer-edit-tabs button.is-active { background:#fff; color:var(--text,#0f1419); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.customer-edit-tabs .tab-flag { background:var(--warning,#ff9500); color:#fff; font-size:10px; font-weight:700; border-radius:999px; padding:1px 7px; }
.customer-tab-panel { display:none; }
.customer-tab-panel.is-active { display:block; }
/* Fanerne (.page-tabs) styrer panelerne paa baade desktop og mobil.
   Den gamle mobil-regel der viste ALLE paneler stammer fra accordion-aeraen
   og gav stakkede faner paa mobil efter kunde-/projektside-redesignet. */
@media (max-width:767px){ .customer-edit-tabs { display:none; } }

/* =========================================================
   FÆLLES FANEBJÆLKE (.page-tabs) — masterplan etape 1
   Generalisering af .customer-edit-tabs/.sweden-country-tabs.
   VIGTIGT: synlig og vandret scrollbar på mobil (Udlandsdok.-varianten).
   .is-active bruges af page_tabs.js; .active af liveSearchTable.js-filtre.
========================================================= */
/* Standard-luft OVER fanebjælken (Kim: manglede alle steder) og under den */
.page-tabs { display: flex; gap: 4px; background: #eceef2; padding: 5px; border-radius: 12px; margin: 14px 0 16px; }
.page-tabs button,
.page-tabs a { border: 0; background: transparent; padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; color: #475569; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; font-family: inherit; }
.page-tabs button.is-active,
.page-tabs button.active,
.page-tabs a.is-active { background: #fff; color: var(--text, #0f1419); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.page-tabs .pt-count { background: #d6dbe4; color: #475569; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.page-tabs .pt-count--warn { background: var(--warning, #ff9500); color: #fff; }

@media (max-width: 767px) {
    .page-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .page-tabs::-webkit-scrollbar { display: none; }
}