/* =========================================================
   MOBILE MENU
========================================================= */
.topbar-mobile,
.mobile-drawer,
.mobile-drawer-overlay{
    display: none;
}
/* ── iPhone-stil tab bar ────────────────────────────── */
.mobile-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(252, 252, 252, 0.94);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border-top: 0.5px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    min-height: 56px;
    z-index: 999;
}
/* Bund-nav'en ligger UNDER overlay/sheet (z 999 < 4090/4100) og skjules ikke
   længere ved åben sheet — layout-skiftet gav menu-blink og var mistænkt for
   iOS' statusbar-omsampling (sheet-open-klassen er udgået) */
.mobile-menu a {
    color: #8e8e93;
    text-decoration: none;
    font-size: var(--font-xs);
    font-weight: 500;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 4px 6px;
    flex: 1;
    min-width: 0;
    letter-spacing: 0.01em;
    transition: color 150ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu a .tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 28px;
    border-radius: 10px;
    background: transparent;
    transition: background 200ms ease, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mobile-menu a .tab-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}

.mobile-menu .tab-label {
    display: block;
    font-size: var(--font-xs);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
    transition: font-weight 150ms ease, color 150ms ease;
}

.mobile-menu a.active {
    color: #007aff;
}

.mobile-menu a.active .tab-icon {
    background: rgba(0, 122, 255, 0.11);
}

.mobile-menu a.active .tab-label {
    font-weight: 600;
}

.mobile-menu a:active {
    transform: scale(0.90);
}

/* Notifikations-badge */
.tab-badge-wrap {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.tab-badge {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff3b30;
    color: #fff;
    font-size: var(--font-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(249, 249, 249, 0.92);
    line-height: 1;
    pointer-events: none;
}

/* Skjul mobile menu på desktop */
@media (min-width: 1201px) {
    .mobile-menu { display: none; }
}

/* Hide mobile cards on desktop */
.mobile-list-cards { display: none; }

/* =========================================================
   MOBILE OVERRIDES
========================================================= */
@media (max-width: 1200px){
    .hours-edit-modal-dialog{
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        /* Bottom sheet — ikke fullscreen: dvh følger den faktiske synlige
           viewport på iOS (100vh gør ikke), og luften i toppen bevarer
           sheet-følelsen. Indholdet scroller selv i modal-body. */
        max-height: calc(100vh - var(--safe-top) - 44px);
        max-height: calc(100dvh - var(--safe-top) - 44px);
        border-radius: 16px 16px 0 0;
    }
    .hours-edit-modal-body{
        padding: 14px 14px calc(var(--safe-bottom) + 16px);
    }
    .hours-edit-modal-head{
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8fafc;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #dbe3f4;
    }

    .topbar{
        padding: var(--safe-top) 12px 0;
    }
    .topbar-left,
    .topbar-right{
        display: none;
    }
    .topbar-mobile{
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    #mobile-menu-button{
        justify-self: start;
    }
    .mobile-logo{
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-self: center;
    }
    .mobile-actions{
        display: flex;
        align-items: center;
        gap: 8px;
        justify-self: end;
    }
    .mobile-logo .logo{
        height: 32px;
    }
    .mobile-icon-btn{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.08);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-xl);
        font-weight: 700;
        cursor: pointer;
        transition: transform .12s ease, background .15s ease;
    }
    .mobile-icon-btn:active{
        transform: scale(0.96);
        background: rgba(255,255,255,0.16);
    }
    .mobile-action-btn{
        min-width: 44px;
        padding: 0 10px;
        font-size: var(--font-input);
        letter-spacing: 0.02em;
    }
    .mobile-action-btn.is-hidden{
        display: none;
    }
    .mobile-icon-btn.is-hidden{
        display: none;
    }
    .mobile-action-btn.is-save{
        width: auto;
        padding: 0 14px;
        font-size: var(--font-sm);
    }
    .mobile-secondary-btn.is-save{
        width: auto;
        min-width: 44px;
        padding: 0 12px;
        font-size: var(--font-sm);
    }
    .mobile-action-text{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
    }

    .mobile-drawer-overlay{
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.42);
        backdrop-filter: blur(1px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: 2500;
        display: block;
    }
    .mobile-drawer{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(86vw, 340px);
        background: #ffffff;
        opacity: 1;
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.28);
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 2600;
        display: flex;
        flex-direction: column;
        border-right: 1px solid #dbe3f4;
        padding: calc(var(--safe-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
        gap: 12px;
    }
    .mobile-drawer.is-open{
        transform: translateX(0);
    }
    .mobile-drawer-overlay.is-open{
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-drawer-header{
        display: block;
        padding-bottom: 8px;
    }
    .mobile-drawer-profile{
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: #0f172a;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: #f8fafc;
        padding: 10px;
        transition: background .15s ease, border-color .15s ease, transform .15s ease;
    }
    .mobile-drawer-profile:active{
        transform: scale(0.99);
    }
    .mobile-drawer-profile.active{
        background: #eef4ff;
        border-color: #c7d7ff;
    }
    .mobile-drawer-avatar{
        width: 54px;
        height: 54px;
        border-radius: 16px;
        border: 1px solid #d9e3f3;
        background: linear-gradient(180deg, #ffffff, #eef2fa);
        overflow: hidden;
        flex: 0 0 54px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-drawer-avatar img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .mobile-drawer-avatar-fallback{
        font-size: var(--font-lg);
        font-weight: 800;
        color: #0f172a;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    .mobile-drawer-profile-meta{
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1 1 auto;
    }
    .mobile-drawer-name{
        font-weight: 700;
        font-size: var(--font-input);
        color: #0f172a;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-drawer-role{
        font-size: var(--font-sm);
        color: #64748b;
    }
    .mobile-drawer-profile-action{
        font-size: var(--font-sm);
        color: #1d4ed8;
        font-weight: 700;
        white-space: nowrap;
    }
    .mobile-drawer-nav{
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-top: 4px;
    }
    .mobile-drawer-nav a{
        display: flex;
        align-items: center;
        gap: 10px;
        color: #0f172a;
        text-decoration: none;
        font-weight: 600;
        padding: 11px 12px;
        border-radius: 12px;
        background: #f8fafc;
        border: 1px solid transparent;
        transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
    }
    .mobile-drawer-nav-icon{
        width: 22px;
        min-width: 22px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #475569;
    }
    .mobile-drawer-nav-icon svg{
        display: block;
        flex-shrink: 0;
    }
    .mobile-drawer-nav a.active{
        background: #e0ebff;
        border-color: #b7ccff;
        box-shadow: 0 8px 16px rgba(37, 99, 235, 0.14);
        color: #1e3a8a;
    }
    .mobile-drawer-nav a.active .mobile-drawer-nav-icon{
        color: #1d4ed8;
    }
    .mobile-drawer-nav a:hover{
        background: #eef2f7;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    }
    .mobile-drawer-nav a:active{
        transform: scale(0.98);
        background: #e2e8f0;
    }
    /* Grupper i draweren (accordion — samme data-attributter som sidebaren) */
    .mobile-drawer-group{
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .mobile-drawer-group-row{
        display: flex;
        align-items: stretch;
        gap: 6px;
    }
    .mobile-drawer-group-row a{
        flex: 1;
        min-width: 0;
    }
    .mobile-drawer-group-caret{
        width: 44px;
        flex-shrink: 0;
        border: 1px solid transparent;
        border-radius: 12px;
        background: #f8fafc;
        color: #475569;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-drawer-group-caret svg{
        display: block;
        transition: transform .18s ease;
    }
    .mobile-drawer-group.open > .mobile-drawer-group-row .mobile-drawer-group-caret svg{
        transform: rotate(90deg);
    }
    .mobile-drawer-group-items{
        display: none;
        flex-direction: column;
        gap: 6px;
        margin-left: 14px;
        padding-left: 8px;
        border-left: 1px solid #e2e8f0;
    }
    .mobile-drawer-group.open > .mobile-drawer-group-items{
        display: flex;
    }
    .mobile-drawer-footer{
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid #e2e8f0;
    }
    .mobile-drawer-logout{
        display: flex;
        align-items: center;
        gap: 10px;
        color: #b91c1c;
        font-weight: 700;
        text-decoration: none;
        padding: 11px 12px;
        border-radius: 12px;
    }

    .mobile-create-btn{
        display: none !important;
    }
    .mobile-create-actions{
        display: none !important;
    }
    .mobile-edit-actions{
        display: none !important;
    }
    .mobile-edit-back{
        display: none !important;
    }
    .message-back-button{
        display: none !important;
    }
    .archive-back-button{
        display: none !important;
    }
    /* ── Delete zone card ─────────────────────────────────── */
    .mobile-delete-block {
        background: rgba(255, 59, 48, 0.05) !important;
        border: 1px solid rgba(255, 59, 48, 0.15) !important;
        border-radius: 18px !important;
        box-shadow: none !important;
        padding: 14px !important;
        margin-top: 32px !important;
    }
    .mobile-delete-btn {
        width: 100%;
        font-size: var(--font-body) !important;
        font-weight: 700 !important;
        padding: 15px 20px !important;
        letter-spacing: -0.1px;
    }
    .delete-zone-hint {
        text-align: center;
        font-size: var(--font-sm);
        color: #8e8e93;
        margin: 10px 0 0;
    }

    .page-header,
    .page-actions,
    .page-head{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .page-title,
    .page-header h1,
    .page-header h2,
    .page-header h3{
        text-align: center;
    }
    .page-header > div,
    .page-actions > div,
    .page-head > div{
        width: 100%;
    }
    .page-header .btn-group,
    .page-actions .btn-group,
    .page-head .btn-group{
        width: 100%;
        justify-content: center;
    }

    /* sørg for der er plads til bundmenu */
    .page-head.page-head-mobile-left,
    .page-actions.page-head-mobile-left,
    .page-header.page-head-mobile-left{
        align-items: flex-start;
        text-align: left;
    }
    .page-head.page-head-mobile-left h1,
    .page-head.page-head-mobile-left h2,
    .page-head.page-head-mobile-left h3,
    .page-head.page-head-mobile-left p{
        text-align: left;
    }
    .page-head.page-head-mobile-left .btn-group{
        justify-content: flex-start;
    }
    /* Relikvie: main.main har allerede tab-bar-clearance (layout.css) — spaceren
       gav ~100px EKSTRA tomrum i bunden af alle sider (og midt paa kundesiden) */
    .bottom-mobile-div{ margin-bottom: 0; }

    /* uge navigation */
    .week-nav{
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    .week-bar{
        margin-top: 10px;
    }
    .week-label-desktop{
        display: none;
    }
    .week-label-mobile{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 8px;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        background: #fff;
        font-weight: 700;
        font-size: var(--font-xs);
        color: #0f172a;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
        text-align: center;
        white-space: nowrap;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .week-label-mobile .week-label-range{
        font-weight: 500;
        color: #64748b;
        font-size: var(--font-xs);
        margin-left: 4px;
        white-space: nowrap;
    }
    .week-bar .week-nav{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--card-bg, #fff);
        border-radius: var(--radius, 14px);
        padding: 5px;
        margin-top: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    /* Uge-knapper bruger nu cal-month-btn klassen fra components.css */
    .week-bar .week-nav .week-label-mobile{
        flex: 1;
        border: none;
        box-shadow: none;
        background: transparent;
        overflow: visible;
        padding: 6px 4px;
        font-size: 14px;
        font-weight: 700;
    }

    /* kalender: 1 kolonne (kort pr dag) */
    .week-calendar{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .day-card{
        min-height: 120px;
        padding: 12px;
        font-size: 1rem;
    }

    /* cards under kalender: 1 kolonne */
    .cards{
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* knapper i grupper: 1 knap fuld bredde, 2 knapper halvt/halvt */
    .btn-group{
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .btn-group .btn{
        flex: 1 1 calc(50% - 5px);
        width: auto;
        min-width: 0;
        white-space: normal;
        text-align: center;
    }
    .btn-group .btn:only-child{
        flex-basis: 100%;
        width: 100%;
    }

    /* checkboxes: 1 kolonne på mobil */
    .check-grid{
        grid-template-columns: 1fr;
    }

    /* dato felter: mindre tekst og padding på mobil */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"]{
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: 0.88rem;
        padding: 8px 10px;
        display: block;
        -webkit-appearance: none;
        min-height: 44px;
        height: 44px;
        line-height: 1.2;
    }
    .main input[type="date"],
    .main input[type="time"],
    .main input[type="datetime-local"]{
        max-width: calc(100vw - 32px) !important;
    }
    .sheet-time-grid input[type="datetime-local"]{
        font-size: 11px;
        padding: 0 4px;
        height: 42px;
        min-height: 42px;
    }
    .form-card input,
    .form-card select,
    .form-card textarea{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* dato-filter: to kolonner med plads til indhold */
    .form-card form > div[style*="grid-template-columns"]{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        padding-right: 20px;

    }

    /* responsive admin-tabeller */
    .responsive-table thead{
        display: none;
    }
    .responsive-table tbody tr{
        display: block;
        border-top: 1px solid var(--border);
        padding: 10px 0;
    }
    .responsive-table tbody td{
        display: block;
        position: relative;
        padding: 8px 12px;
        padding-left: calc(var(--mobile-label-width, 120px) + 12px);
        border-top: none;
        word-break: normal;
    }
    .responsive-table{
        --mobile-label-width: clamp(96px, 28vw, 120px);
    }
    .responsive-table tbody td.text-center{
        display: block;
        text-align: center;
        padding-left: 12px;
    }
    .responsive-table tbody td.text-center::before{
        content: '';
    }
    .responsive-table tbody td::before{
        content: attr(data-label);
        font-weight: 700;
        color: #334155;
        white-space: nowrap;
        position: absolute;
        left: 12px;
        top: 8px;
        width: var(--mobile-label-width, 120px);
    }
    .responsive-table tbody td.cost-details-cell{
        padding-left: 12px;
    }
    .responsive-table tbody td.cost-details-cell::before{
        content: '';
    }
    .doc-table.responsive-table tbody td.w-40p,
    .doc-table.responsive-table tbody td.w-30p,
    .doc-table.responsive-table tbody td.w-140{
        width: 100% !important;
    }
    .doc-table.responsive-table tbody td:not(.doc-actions)::before{
        min-width: 110px;
        flex: 0 0 110px;
    }
    .doc-table.responsive-table tbody td.doc-actions{
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding-left: 12px;
    }
    .doc-table.responsive-table tbody td.doc-actions::before{
        content: '';
    }
    .doc-table.responsive-table .doc-actions-group{
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }
    .doc-table.responsive-table .doc-actions-group .btn{
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }
    .doc-table.responsive-table .doc-actions-group form{
        flex: 0 0 auto;
    }
    .doc-table.responsive-table .doc-action-delete{
        order: 1;
        margin-right: auto;
    }
    .doc-table.responsive-table .doc-action-view{
        order: 2;
    }
    .doc-table.responsive-table .doc-action-download{
        order: 3;
    }
    .doc-table.responsive-table .doc-actions-group.doc-actions-view{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
        justify-content: stretch;
    }
    .doc-table.responsive-table .doc-actions-group.doc-actions-view .btn{
        width: 100%;
    }
    .doc-table.responsive-table tbody tr:hover td,
    .doc-table.responsive-table tbody tr:active td{
        background: transparent;
    }

    .grid-2,
    .grid-3{
        grid-template-columns: 1fr;
    }

    .section-header{
        flex-direction: column;
        align-items: flex-start;
    }
    .section-actions{
        width: 100%;
        margin-left: 0;
    }
    .section-actions .btn{
        width: 100%;
    }
    .responsive-table tbody td.col-status,
    .responsive-table tbody td.col-status-badge{
        justify-content: space-between;
    }
    .responsive-table .badge{
        white-space: nowrap;
    }

    .pending-actions{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }
    .pending-actions .btn{
        width: 100%;
    }

    .approval-status-tabs{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }
    .approval-status-tabs .btn{
        width: 100%;
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .mobile-header-approval-menu{
        position: fixed;
        z-index: 4600;
        min-width: 180px;
        padding: 8px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.2);
        display: none;
    }
    .mobile-header-approval-menu.is-open{
        display: grid;
        gap: 8px;
    }
    .mobile-header-approval-option{
        min-height: 44px;
        border-radius: 10px;
        border: 1px solid #dbe2f0;
        background: #fff;
        color: #1e293b;
        font-size: var(--font-sm);
        font-weight: 600;
        text-align: center;
    }
    .mobile-header-approval-option.approve{
        border-color: #bbf7d0;
        background: #f0fdf4;
        color: #166534;
    }
    .mobile-header-approval-option.reject{
        border-color: #fecaca;
        background: #fff;
        color: #b91c1c;
    }

    .pending-table.responsive-table tbody tr{
        margin: 10px 12px;
        padding: 12px;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .pending-table.responsive-table tbody tr:hover{
        background: #f8fafc;
        border-radius: 12px;
    }
    .pending-table.responsive-table tbody tr:active{
        background: #f8fafc;
        border-radius: 12px;
    }
    .pending-table.responsive-table tbody td{
        padding: 6px 0;
        display: grid;
        grid-template-columns: 130px minmax(0, 1fr);
        align-items: start;
        width: 100%;
    }
    .pending-table.responsive-table tbody td::before{
        margin-right: 8px;
    }

    /* Approval table hidden on mobile — replaced by approval-mobile-cards */

    .employee-list-table .col-actions{
        display: none;
    }
    .employee-list-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
    }
    .employee-list-table .tap-row:active{
        background: #f1f5f9;
    }

    .employee-list-archive{
        width: 100%;
    }
    .employee-list-new{
        width: 100%;
    }

    .employee-archive-table .col-actions{
        display: none;
    }
    .employee-archive-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
    }
    .employee-archive-table .tap-row:active{
        background: #f1f5f9;
    }

    .customer-list-table .col-actions{
        display: none;
    }
    .customer-list-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
    }
    .customer-list-table .tap-row:active{
        background: #f1f5f9;
    }

    .project-list-table .col-actions{
        display: none;
    }
    .project-list-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
    }
    .project-list-table .tap-row:active{
        background: #f1f5f9;
    }

    .project-list-search input[type="text"]{
        width: 100%;
    }


    .project-view-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(15, 23, 42, 0.12);
    }
    .project-view-table .tap-row:active{
        background: #f1f5f9;
    }
    .project-view-table .tap-row:active td{
        background: #f1f5f9;
    }
    .project-view-table.responsive-table{
        --mobile-label-width: clamp(102px, calc(26vw + 10px), 128px);
        table-layout: auto !important;
    }
    :is(#section-timer, #section-korsel, #section-diaeter, #section-udlaeg) .project-view-table col{
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    :is(#section-timer, #section-korsel, #section-diaeter, #section-udlaeg) .project-view-table :is(th, td){
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
    .project-view-table.responsive-table tbody{
        display: block;
        padding-top: 18px;
    }
    .project-view-table.responsive-table tbody tr{
        margin: 12px 0;
        padding: 12px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 12px;
    }
    .project-view-table.responsive-table tbody tr:first-child{
        margin-top: 0;
    }
    .project-view-table.responsive-table tbody tr:active{
        background: #f8fafc;
    }
    .project-view-table.responsive-table tbody tr:active td{
        background: #f8fafc;
    }
    .project-view-table.responsive-table tbody td{
        background: transparent;
    }

    .project-view-table tbody td{
        display: grid;
        grid-template-columns: var(--mobile-label-width, 118px) minmax(0, 1fr);
        align-items: start;
        column-gap: 12px;
        row-gap: 0;
        padding: 8px 0;
        padding-left: 0;
    }
    .project-view-table tbody td::before{
        position: static;
        width: auto;
        min-width: 0;
        white-space: nowrap;
    }
    .project-view-table th.col-status,
    .project-view-table td.col-status,
    .project-view-table td.col-status-badge{
        text-align: left;
        justify-content: flex-start;
    }
    .project-view-table tbody td .badge{
        width: auto;
    }
    .project-view-table tbody td.col-status-badge{
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        padding-left: calc(var(--mobile-label-width, 118px) + 12px);
    }
    .project-view-table tbody td.col-status-badge::before{
        position: absolute;
        left: 0;
        top: 8px;
        width: var(--mobile-label-width, 118px);
        white-space: nowrap;
    }
    .project-view-table tbody td.col-status-badge .badge{
        margin-left: 0;
        flex: 0 0 auto;
    }
    .project-view-table tbody td.col-status-badge form{
        margin: 0;
        display: inline-flex;
        flex: 0 0 auto;
    }
    .project-view-table tbody td.col-status-badge .approval-icon-actions{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .project-view-table tbody td.col-status-badge .approval-icon-actions .approval-icon-btn{
        flex: 0 0 auto;
        min-width: 60px;
        width: 80px;
        height: 36px;
        padding: 0;
    }
    .project-view-table tbody td.col-status-badge .approval-icon-actions .approval-icon-btn.approval-icon-btn-approve{
        min-width: 80px;
        width: 120px;
    }
    .project-view-table .tap-row:hover,
    .project-view-table .tap-row:hover td,
    .project-view-table.responsive-table tbody tr:hover{
        background: #f8fafc;
    }
    #section-medarbejdere .project-view-employees-table .tap-row:active,
    #section-medarbejdere .project-view-employees-table.responsive-table tbody tr:active{
        background: #f8fafc;
    }
    #section-medarbejdere .project-view-employees-table tr:hover .project-employee-main-cell,
    #section-medarbejdere .project-view-employees-table tr:hover .project-employee-info-cell{
        background: #f8fafc !important;
    }
    #section-medarbejdere .project-view-employees-table tr:active .project-employee-main-cell,
    #section-medarbejdere .project-view-employees-table tr:active .project-employee-info-cell{
        background: #f8fafc !important;
    }
    #section-medarbejdere .project-view-employees-table .project-employee-main-cell,
    #section-medarbejdere .project-view-employees-table .project-employee-info-cell{
        -webkit-tap-highlight-color: rgba(15, 23, 42, 0.12);
    }
    #section-medarbejdere .project-view-employees-table .project-employee-main-cell:active,
    #section-medarbejdere .project-view-employees-table .project-employee-info-cell:active{
        background: #f8fafc !important;
    }

    .hours-project-list-table .col-actions{
        display: none;
    }
    .hours-project-list-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
    }
    .hours-project-list-table .tap-row:active{
        background: #f1f5f9;
    }

    .hours-project-view-table .col-actions{
        display: none;
    }
    .hours-project-view-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
    }
    .hours-project-view-table .tap-row:active{
        background: #f1f5f9;
    }

    .messages-list-table .col-actions{
        display: none;
    }
    .messages-list-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
    }
    .messages-list-table .tap-row:active{
        background: #f1f5f9;
    }

    .messages-view-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
    }
    .messages-view-table .tap-row:active{
        background: #f1f5f9;
    }

    .pending-projects-table .col-actions,
    .pending-projects-table td.col-actions{
        display: none !important;
    }
    .pending-projects-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
    }
    .pending-projects-table .tap-row:active{
        background: #f1f5f9;
    }

    .pending-customers-table .col-actions,
    .pending-customers-table td.col-actions{
        display: none !important;
    }
    .pending-customers-table .tap-row{
        cursor: pointer;
        touch-action: manipulation;
    }
    .pending-customers-table .tap-row:active{
        background: #f1f5f9;
    }

    .intake-table.responsive-table tbody td.col-actions{
        display: grid;
        grid-template-columns: var(--mobile-label-width, 120px) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding-left: 12px;
        text-align: left;
    }
    .intake-table.responsive-table tbody td.col-actions::before{
        position: static;
        width: auto;
        justify-self: start;
    }
    .intake-table.responsive-table tbody td.col-actions form{
        justify-self: start;
        display: inline-flex;
    }

    body.public-intake .intake-submit-block{
        display: none;
    }

    .install-prompt{
        bottom: calc(12px + env(safe-area-inset-bottom));
    }
    .install-card::after{
        left: 93%;
    }
}

/* ============================================
   Mobile List Cards (admin lister)
   ============================================ */
@media (max-width: 768px) {
    /* Hide desktop tables + their wrappers, show mobile cards */
    .employee-list-table,
    .customer-list-table,
    .customer-register-table,
    .project-list-table,
    .project-register-table,
    .pending-table,
    .sweden-table,
    .pending-projects-table,
    .pending-customers-table,
    .intake-table {
        display: none !important;
    }
    /* Strip table-wrap styling when it contains mobile cards */
    .table-wrap:has(> .mobile-list-cards) {
        background: none;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
        margin-top: 0;
    }
    .mobile-list-cards {
        display: flex;
        flex-direction: column;
        gap: 14px; /* 14px-standarden for kort-afstand paa mobil */
    }

    /* Base card */
    .mobile-list-card {
        display: block;
        background: var(--card, #fff);
        border-radius: 14px;
        padding: 14px 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-list-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    /* Top row: name + chevron */
    .mlc-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px; /* luft mellem logo/avatar og tekst */
    }
    /* Kunde-logo i mobilkort: stoerre og med luft til teksten */
    .mobile-list-card .cust-avatar {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 12px;
        font-size: 15px;
    }
    .mlc-info {
        flex: 1;
        min-width: 0;
    }
    .mlc-name {
        font-weight: 700;
        font-size: 15px;
        color: var(--text, #0f172a);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mlc-secondary {
        font-size: 13px;
        color: var(--muted, #64748b);
        margin-top: 2px;
    }
    .mlc-cvr {
        color: var(--muted-light, #94a3b8);
    }
    .mlc-contact {
        font-size: 13px;
        color: var(--text-secondary, #475569);
        margin-top: 4px;
    }
    .mlc-contact-name {
        color: var(--text, #0f172a);
        font-weight: 500;
    }
    .mlc-chevron {
        color: var(--border, #cbd5e1);
        font-size: 18px;
        flex-shrink: 0;
        margin-left: 8px;
    }
    .mlc-chevron svg {
        width: 16px;
        height: 16px;
        opacity: 0.4;
    }

    /* Badge row */
    .mlc-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 8px;
    }
    .mlc-badges--empty {
        color: var(--muted-light, #94a3b8);
        font-size: 12px;
        font-style: italic;
    }
    .mlc-badge {
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 6px;
    }
    .mlc-badge--cert {
        background: #fef3c7;
        color: #92400e;
    }
    .mlc-badge--permit {
        background: #dbeafe;
        color: #1e40af;
    }
    .mlc-badge--process {
        background: #e0e7ff;
        color: #4338ca;
    }

    /* Pending detail cards (admin_pending.php) */
    .mlc-date {
        font-size: 13px;
        color: var(--muted, #64748b);
        flex-shrink: 0;
    }
    .mlc-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 6px;
    }
    .mlc-chip {
        font-size: 11px;
        font-weight: 600;
        background: #f1f5f9;
        padding: 2px 8px;
        border-radius: 6px;
        color: var(--text-secondary, #475569);
    }
    .mlc-chip--amount {
        background: #dbeafe;
        color: #1e40af;
    }
    .mlc-chip-muted {
        font-size: 11px;
        color: var(--muted, #64748b);
    }

    /* Pending project cards */
    .mobile-list-card--pending {
        border-left: 4px solid var(--primary, #2563eb);
    }
    .mlc-pending-counts {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
    }
    .mlc-pcount {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 8px;
    }
    .mlc-pcount--warn {
        background: #fffbeb;
        color: #92400e;
    }
    .mlc-pcount--warn .mlc-pcount-num {
        font-weight: 700;
        color: #f59e0b;
    }
    .mlc-pcount--ok {
        background: #f0fdf4;
        color: #166534;
    }
    .mlc-pcount--ok .mlc-pcount-num {
        font-weight: 700;
        color: #34d399;
    }

    /* Chip label in pending cards */
    .mlc-chip-label {
        text-transform: uppercase;
        font-size: 10px;
        opacity: 0.7;
    }

    /* === Intake-kort (admin_employee_intake.php) === */
    .intake-card {
        border-left: 4px solid transparent;
    }
    .intake-card--pending  { border-left-color: #f59e0b; }
    .intake-card--submitted { border-left-color: #10b981; }
    .intake-card--expired  {
        border-left-color: #94a3b8;
        opacity: 0.85;
    }
    .intake-card .mlc-top {
        align-items: flex-start;
    }
    .intake-card .mlc-name {
        font-size: 14px;
    }
    .intake-card .badge {
        flex-shrink: 0;
    }
    .intake-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
        font-size: 12px;
        color: #64748b;
    }
    .intake-card-meta strong {
        color: #475569;
        font-weight: 600;
    }
    .intake-meta-sep {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #cbd5e1;
    }
    .intake-card-resent {
        font-size: 11px;
        color: #94a3b8;
        margin-top: 6px;
    }
    .intake-card-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-top: 12px;
    }
    .intake-card-actions form {
        margin: 0;
    }
    .intake-card-actions form:first-child,
    .intake-card-actions > .intake-action-primary:first-child {
        flex: 1;
    }
    .intake-card-actions form:first-child .intake-action-primary {
        width: 100%;
    }
    .intake-action-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 14px;
        background: #fff;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .intake-action-primary:active {
        transform: scale(0.97);
    }
    .intake-action-primary--success {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }
    .intake-action-primary--ghost {
        background: transparent;
        border-color: transparent;
        color: #94a3b8;
        cursor: default;
    }
    .intake-action-delete {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        background: #fef2f2;
        color: #dc2626;
        border: none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .intake-action-delete:active {
        transform: scale(0.94);
    }
    .intake-action-delete svg {
        width: 18px;
        height: 18px;
    }

    /* Badge-farve til udløbet status (kun brugt på denne side) */
    .badge.neutral {
        background: #e2e8f0;
        color: #475569;
    }

    /* Section-header stil til "Udsendte links" */
    .intake-section-head {
        padding: 4px 4px 0;
    }
    .intake-section-head h3 {
        font-size: 18px;
        margin: 0;
    }
    .intake-section-head .muted {
        font-size: 13px;
        color: #64748b;
        margin-top: 4px;
    }

}

/* Dashboard pending alert banner (matches mockup) */
.dash-alert {
    background: linear-gradient(135deg, #0b1120, #1e1b4b);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.dash-alert:active {
    opacity: 0.85;
}
.dash-alert--ok {
    background: linear-gradient(135deg, #1a2e1a, #1e3a1e);
}
.dash-alert-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.dash-alert--ok .dash-alert-badge {
    background: #22c55e;
}
.dash-alert-text {
    font-size: 15px;
    font-weight: 600;
}
.dash-alert-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}
.dash-alert-chevron {
    margin-left: auto;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
}
.dash-alert-chevron svg {
    width: 18px;
    height: 18px;
}

/* Cards hidden on desktop */
@media (min-width: 769px) {
    .mobile-list-cards {
        display: none !important;
    }
}

/* ── Mobil accordion-sektioner ─────────────────────────── */
.mobile-accordion-sections { display: none; }

@media (max-width: 1200px) {
  .mobile-accordion-sections { display: block; }

  /* Skjul desktop-elementer */
  .mob-desktop-only { display: none !important; }

  .mob-acc {
    background: var(--card, #fff);
    margin: 6px 0;
    border-radius: var(--m-radius-card, 14px);
    box-shadow: var(--m-shadow-card, 0 1px 3px rgba(0,0,0,0.06));
    overflow: hidden;
  }

  .mob-acc-header {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
    gap: 8px;
  }
  .mob-acc-header:active {
    background: rgba(0, 0, 0, 0.03);
  }

  .mob-acc-title { flex: 1; min-width: 0; }

  .mob-acc-meta {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
  }

  .mob-acc:not(.accordion-open) .mob-acc-header {
    color: var(--muted, #8e8e93);
  }
  .mob-acc:not(.accordion-open) .mob-acc-body {
    display: none;
  }

  .mob-acc.accordion-open .mob-acc-header {
    color: var(--text);
  }
  .mob-acc.accordion-open .mob-acc-body {
    display: block;
    padding: 0 16px 14px;
  }

  .mob-acc-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    font-size: var(--font-sm);
    min-height: 36px;
  }
  .mob-acc-field:last-child { border-bottom: none; }
  .mob-acc-field-label { color: var(--muted, #8e8e93); flex-shrink: 0; }
  .mob-acc-field-value { color: var(--text); font-weight: 500; text-align: right; }

  .mob-acc-body .form-row { margin-top: 8px; }
  .mob-acc-body .form-row:first-child { margin-top: 0; }
  .mob-acc-body .grid-2,
  .mob-acc-body .grid-3 { gap: 8px; }

  .mob-profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card, #fff);
    margin: 6px 0;
    padding: 14px 16px;
    border-radius: var(--m-radius-card, 14px);
    box-shadow: var(--m-shadow-card, 0 1px 3px rgba(0,0,0,0.06));
  }
  .mob-profile-header .profile-avatar-wrap {
    width: 52px; height: 52px; flex-shrink: 0;
  }
  .mob-profile-header .profile-avatar-image {
    width: 52px; height: 52px;
  }
  .mob-profile-header .profile-avatar-fallback {
    width: 52px; height: 52px; font-size: 18px;
  }
  .mob-profile-meta h3 { font-size: var(--font-input); margin: 0; }
  .mob-profile-meta p { font-size: var(--font-sm); color: var(--muted); margin: 3px 0 0; }

  .mob-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
  }
  .mob-summary-item {
    background: var(--bg, #f2f2f7);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
  }
  .mob-summary-val {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text);
  }
  .mob-summary-label {
    font-size: var(--font-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  /* ── Dokumenter (stacked layout) ──────────────────── */
  .mob-doc-item {
    padding: 10px 12px;
    background: var(--bg, #f2f2f7);
    border-radius: 10px;
    margin-bottom: 8px;
  }
  .mob-doc-item:last-child { margin-bottom: 0; }
  .mob-doc-badge { margin-bottom: 4px; }
  .mob-doc-name {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
    line-height: 1.3;
  }
  .mob-doc-desc {
    font-size: var(--font-xs);
    color: var(--muted);
    margin-top: 2px;
  }
  .mob-doc-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
  }
  .mob-doc-date {
    font-size: var(--font-xs);
    color: var(--muted);
  }

  .mob-danger-zone {
    background: var(--card, #fff);
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: var(--m-radius-card, 14px);
    box-shadow: var(--m-shadow-card, 0 1px 3px rgba(0,0,0,0.06));
  }
  .mob-danger-zone-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: #ff3b30;
    margin-bottom: 4px;
  }
  .mob-danger-zone-text {
    font-size: var(--font-xs);
    color: var(--muted);
    margin-bottom: 10px;
  }
  .mob-danger-zone .btn-danger {
    width: 100%;
  }

  .mob-archive-section {
    background: var(--card, #fff);
    margin: 10px 0;
    padding: 14px 16px;
    border-radius: var(--m-radius-card, 14px);
    box-shadow: var(--m-shadow-card, 0 1px 3px rgba(0,0,0,0.06));
  }

  .mobile-back-btn {
    font-size: var(--font-sm);
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    min-height: 44px;
    /* .mobile-icon-btn laaser bredden til 44px — teksten ("Annuller"/"Tilbage")
       floed ud over den moerke firkant. Bredden skal foelge teksten. */
    width: auto;
    -webkit-tap-highlight-color: transparent;
  }
}


/* =========================================================
   STANDARD-MELLEMRUM MELLEM STAKKEDE KORT (mobil, hele appen)
   Kim 2026-07-26: der skal vaere ens, ordentlig luft mellem
   kort/tabeller paa mobil. Reglen vinder over mt-*-utilities.
   Grid-containere (der selv har gap) nulstilles.
========================================================= */
@media (max-width: 767px) {
  .card + .card,
  .card + .mobile-list-cards,
  .mobile-list-cards + .card,
  .card + .reg-mob-cards { margin-top: 14px; }
  .ov-2col > .card + .card,
  .cards > .card + .card { margin-top: 0; }

  /* Billy-mapping paa mobil: gruppe-kort m. raekker (markup i admin_customer_edit;
     desktop-tabellen skjules via .cert-table-wrap) */
  .billy-mob-cards { display: block; }
}

/* =========================================================
   GLOBALT VÆRN: ingen vandret side-scroll på mobil.
   clip (ikke hidden) skaber ingen scroll-container, så elementers
   egen overflow-x:auto (fanebjælker, periode-piller) virker stadig.
   ========================================================= */
@media (max-width: 767px) {
    html, body { overflow-x: clip; }
}