* {
    font-family: Calibri, Arial, Helvitica, sans-serif;
    /*font-family:"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;*/
    font-size: 13px;
}

input[type="text"],
input[type="date"],
input[type="time"],
textarea {
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff;
    min-height: 20px;
    border-color: #333333;
}

html, body {
    height: 100%;
    width: calc(100% - 0px);
    margin: 0;
    overflow: hidden;   /* SPA-layout: kun #page scroller. Uden dette får body
                           sin egen scrollbar ovenpå #page's (= dobbelt scrollbar). */
}

h1 {
    /*font-size: 2em;*/
    font-size: 20px;
    margin: 0 0 5px 0;
    color: #777777;
}

h2 {
    font-size: 18px;
    margin: 0 0 5px 0;
    color: #777777;
}

h3 {
    font-size: 16px;
    margin: 0 0 5px 0;
    color: #777777;
}

label {
    cursor: pointer;
}

/* Overskriv jQuery UI font */
.ui-widget, .ui-datepicker-close, .ui-datepicker-current {
    font-family: Calibri, Arial, Helvitica, sans-serif !important;
    font-size: 14px !important;;
}

.datepicker {
    width:80px !important;
    height: 20px;
    cursor: pointer;

}

.datepicker + img {
    display: none;
}

#menu {
    float: left;
    margin: 0px;
    height: calc(100% - 50px);   /* minus højden på top bjælken*/
    width: 250px;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

#page {
    float: left;
    background-color: rgb(250, 250 ,250 );
    width:calc(100% - 290px);   /* minus bredde på menu og padding på siden */
    height:calc(100% - 90px);
    padding: 20px;
    overflow: auto;
}


/* Top menu til kartoteker */
@media all {

    .topMenu {
        width: 100%;
        height: 30px;
        display: flex;
        align-items: stretch;
        box-sizing: border-box;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
    }

    .topMenuHeader {
        display: flex;
        align-items: center;
        font-size: 14px;
        /*font-weight: bold;*/
        color: #666;
        white-space: nowrap;
        padding-right: 15px;
    }

    .topMenuActions {
        display: flex;
        align-items: stretch;
        height: 100%;
    }

    .topMenuBtn {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 10px 0 0;
        text-decoration: none;
        color: #666;
        white-space: nowrap;
        border-left: 1px solid #ccc;
        box-sizing: border-box;
    }

    .topMenuBtn:last-child {
        border-right: 1px solid #ccc;
    }

    .topMenuBtn {
        transition: background 0.2s ease, color 0.2s ease;
    }

    .topMenuBtn:hover {
        background: #6F94A9AA;
        color: #fff;
    }

    .topMenuBtn:hover .menu_awsome {
        color: #fff;
    }

    .topMenu-input {
        width: 150px;
        padding: 4px;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px solid #ccc !important;
        background-color: rgb(250, 250, 250) !important;
        outline: none;
    }

    .filter-input {
        width: 100%;
        padding: 4px;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px solid #ccc !important;
        background-color: #fff;
        outline: none;
    }

    .filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .filter-title {
        position: relative;
    }

    .filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        min-width: 16px;
        color: #666;
    }

    .filter-toggle i {
        font-size: 12px;
    }

    .filter-item {
        display: flex;
        align-items: center;
        padding: 6px 8px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 13px;
        background-color: #fff;
    }

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

    .filter-item:hover {
        background-color: #f8f8f8;
    }

    .filter-remove {
        background: none;
        border: none;
        color: #aaaaaa;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .filter-remove:hover {
        color: #000;
    }

    .filter-text {
        flex: 1;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .filter-checkbox-label {
        display: flex;
        align-items: center;
        padding: 6px 8px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 13px;
        background-color: #fff;
        cursor: pointer;
        white-space: nowrap;
    }

    .filter-checkbox-label:last-of-type {
        border-bottom: none;
    }

    .filter-checkbox-label:hover {
        background-color: #f8f8f8;
    }

    .filter-checkbox {
        margin-right: 8px;
        flex-shrink: 0;
    }

    /* Dato-filter: [checkbox] Fra/Til [datofelt] — én pr. række, stables vertikalt */
    .filter-date-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 8px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 13px;
        background-color: #fff;
        cursor: pointer;
        white-space: nowrap;
    }
    .filter-date-row:last-of-type {
        border-bottom: none;
    }
    .filter-date-row .filter-date-toggle {
        flex-shrink: 0;
        margin: 0;
        cursor: pointer;
    }
    .filter-date-row .filter-date-label {
        flex-shrink: 0;
        width: 24px;
        color: #333;
    }
    .filter-date-row .filter-input {
        flex: 1;
        min-width: 0;
        border: 1px solid #ccc !important;
        border-radius: 2px;
        padding: 3px 4px;
    }

}

.res_fane {
    table-layout: fixed;
    border-spacing: 0px;
    border-collapse: collapse;
    width: 100%;
    padding: 0 2px;
    margin: 0px;
}

.fane_active {
    background-color: rgb(111, 148, 169);
    height: 24px;
    color: #ffffff;
    font-weight: bold;
    text-overflow: ellipsis;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 2px 0 10px;
    border-right: 4px solid #ffffff;
    cursor: pointer;
}

.fane_inactive {
    background-color: rgb(150, 150, 150);
    height: 24px;
    color: #ffffff;
    font-weight: bold;
    text-overflow: ellipsis;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 2px 0 10px;
    border-right: 4px solid #ffffff;
    cursor: pointer;
}

.fane_inactive:hover {
    background-color: rgb(111, 148, 169);
}

.fane_end {
    width: 100%;
    background-color: initial !important;
}

.fane_content {
    width: 100%;
    background-color: #eeeeee;
    min-height: 120px;
    padding: 10px;
}

.alfabet_search {
    width:20px;
    height:20px;
    line-height: 20px;
    margin: 3px 3px 0 0;
    float:left;
    border:1px solid #cccccc;
    background-color: #ffffff;
    color: #000000;
    text-align:center;
    border-radius: 6px;
    cursor: pointer;
}

.alfabet_search_selected {
    width:20px;
    height:20px;
    line-height: 20px;
    margin: 3px 3px 0 0;
    float:left;
    border:1px solid #cccccc;
    background-color: rgb(111, 148, 169);
    color: #ffffff;
    text-align:center;
    border-radius: 6px;
    cursor: pointer;
}

.alfabet_search:hover {
    border:1px solid rgb(111, 148, 169);
    background-color: #6F94A9;
    color: #ffffff;
}

.search_field {
    width:100%;
    max-width:800px;
}

.search_button {
    border: 1px solid #666666;
    background-color: #efefef;
    padding: 2px;
    min-width: 50px;
    margin: 0 5px;
    border-radius:2px; 	/* runde hjørner */
    cursor:pointer;
    text-align:center;
}
.search_button:hover {
    border: 1px solid #cccccc;
    background-color: rgb(111, 148, 169);
    color:#ffffff;
}

#res_container {
    width: 100%;
    min-height: 50px;
    /*background: #8e0505;*/
    margin: 0 0 25px 0;
}

#res_33 {
    float: left;
    width: calc(33.33% - 20px);
    /* background: #6F94A9; */
    min-height: 50px;
    outline: 1px dashed grey;
    margin: 10px;
}

#res_25 {
    float: left;
    width: calc(25% - 20px);
    /* background: #6F94A9; */
    min-height: 50px;
    outline: 1px dashed grey;
    margin: 10px;
}


/*********************************************** responsive tabeller med indhold */
@media all {

    .responsive_table {
        table-layout: fixed;
        width: 100%;
        border-spacing: 0px;
        border-collapse: collapse;
        padding: 0 2px;
        margin: 1px;
    }

    .responsive_table th {
        position: relative;
        background: #efefef;
        padding: 8px;
        text-align: left;
        color: #666666;
        font-weight: 600;
        font-size: 13px;
        border-bottom: 2px solid #cccccc;
        white-space: nowrap;
    }
    .responsive_table th.filterable { cursor: pointer; }

    .responsive_table tr {
        cursor: pointer;
        border-bottom: 1px solid #ccc;
    }

    .responsive_table tr:hover {
        background-color: #6d92a7;
        color: #ffffff;
    }
    .responsive_table tr:hover td a { color: #ffffff; }

    .responsive_table td {
        padding: 5px 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* ---- Responsiv kolonneskjulning ---- */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

@media all {

    .filter-icon {
        float: right;
        opacity: 0.5;
        font-size: 12px;
    }

    .filter-box {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        border: 1px solid #ccc;
        padding: 5px;
        z-index: 10;
        width: 100%;
        box-sizing: border-box;
    }

    .filter-box .filter-input {
        width: 100%;
        padding: 4px;
        box-sizing: border-box;
    }

    .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .filter-toggle {
        font-weight: bold;
        font-size: 16px;
        line-height: 1;
        margin-left: 8px;
    }

    .filterable.has-filter .filter-title {
        font-weight: 600;
    }

    .res_table {
        table-layout: fixed;
        border-spacing: 0px;
        border-collapse: collapse;
        width: 100%;
        padding: 0 2px;
        margin: 0px;
    }

    .res_table > tbody > tr > th {
        height: 24px;
        background-color: rgb(111, 148, 169);
        color: #ffffff;
        font-weight: bold;
        text-overflow: ellipsis;
        text-align: left;
        vertical-align: middle;
        overflow: hidden;
        white-space: nowrap;
        padding: 0 2px;
    }

    /*Table data*/
    .res_table > tbody > tr > td {
        height: 24px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding: 0 2px; /* Hvis denne ændres, skal den også ændres i table header */
        text-decoration: none;
        color: #000000;
        border-bottom: 1px solid #cccccc;

    }

    .th_cnt {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .th_txt {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 2px; /* Hvis denne ændres, skal den også ændres i table header */
        float: left;
    }

    .th_gfx {
        float: left;
        padding-left: 3px;
    }

    .res_table > tbody > tr:hover {
        background-color: #fbe6be;
    }

    .res_div_33 {
        width: calc(33.3% - 15px);
        float: left;
        min-height: 333px;
        /*outline: 1px solid #cccccc;*/
        padding-right: 15px;
    }
}

/*********************************************** Font awesome */
@media all {
    .fas_res_icon {
        color: #999999;
        text-align: center;
        padding: 1px;
        margin: 2px;
        cursor: pointer;
    }

    .fas_res_th {
        color: #ffffff;
        text-align: center;
        cursor: pointer;
    }
}
/*********************************************** Knapper */
@media all {
    .div_button_container {
        width: 100%;
        text-align: right;
        padding-top: 10px;
    }

    .div_button, .ui-datepicker-current {
        border: 1px solid #dddddd;
        background-color: #6F94A9;
        color: #ffffff;
        padding: 4px 8px;
        margin: 0;
        border-radius: 2px; /* runde hjørner */
        cursor: pointer;
        text-align: center;
    }

    .div_button:hover {
        border: 1px solid #cccccc;
        background-color: #b99154;
        color: #ffffff;
    }

    .div_button_inline {
        border: 1px solid #cccccc;
        background-color: #ffffff;
        padding: 4px 8px;
        margin: 0;
        z-index: 1000;
        border-radius: 2px; /* runde hjørner */
        cursor: pointer;
        /*box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px 0px;*/
        text-align: center;
    }

    .div_button_inline:hover {
        border: 1px solid #cccccc;
        background-color: #FF6633;
        color: #ffffff;
        /*box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px 0px;*/
    }

    .div_button_disabled {
        border: 1px solid #dddddd;
        background-color: #efefef;
        padding: 4px 8px;
        margin: 0;
        border-radius: 2px; /* runde hjørner */
        cursor: pointer;
        text-align: center;
        color: #cccccc;
    }
}

/*********************************************** Popup */
@media all {

    #popup {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
    }

    .popup_background {
        position: fixed;
        left: 0;
        top: 0;
        background-color: #33333380;
        top: 0;
        left: 0;
        width: calc(100% - 40px);
        padding: 0 20px;
        height: 100%;
    }

    .popup_container {
        position: relative;
        background-color: #eeeeee;
        min-width: 333px;
        max-width: 1200px;
        min-height: 333px;
        max-height: calc(100% - 40px);
        margin: 100px auto;
        overflow-y: auto;
        /*padding: 10px;*/
    }

    .popup_header {
        font-size: 24px;
        color: #6F94A9;
        clear: both;
        padding: 15px;
    }

    .popup_content {
        width: 100%;
        height: calc(100% - 30px);
        margin: 0;
        padding: 0;
    }

    .popup_table {
        table-layout: fixed;
        border-spacing: 0px;
        border-collapse: collapse;
        width: 100%;
        padding: 0 2px;
        margin: 0px;
    }

    .popup_table input[type=text] {
        width: calc(100% - 8px);
        height: 21px;
    }

    .popup_table select {
        width: calc(100% - 0px);
        height: 27px;
    }

    .popup_buttons {
        width: calc(100% - 30px);
        text-align: right;
        clear: both;
        padding: 15px;
    }

    .felt_container {
        display: flex;
        align-items: flex-start;
        width: 100%;
        margin: 5px 0;
        box-sizing: border-box;
    }

    .felt_tekst {
        width: 95px;              /* 85 + 10 padding som før */
        text-align: right;
        padding-right: 10px;
        padding-top: 3px;
        box-sizing: border-box;
        flex: 0 0 95px;
    }

    .felt_input {
        flex: 1 1 auto;
        min-width: 0;
        box-sizing: border-box;
    }

    .felt_input input[type=text],
    .felt_input select,
    .felt_input textarea {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .felt_input input[type=text] {
        height: 20px;
    }

    .felt_input select {
        height: 26px;
    }

    .felt_input textarea {
        height: 126px;
    }

    /*.felt_container {*/
    /*    float: left;*/
    /*    width: 100%;*/
    /*    margin: 5px 0;*/
    /*    !*height: 30px;*!*/
    /*    !*border: 1px solid #000;*!*/
    /*}*/

    /*.felt_tekst {*/
    /*    float: left;*/
    /*    width: 85px;*/
    /*    text-align: right;*/
    /*    padding-right: 10px;*/
    /*    padding-top: 3px;*/
    /*}*/

    /*.felt_input {*/
    /*    float: left;*/
    /*    width: calc(100% - 110px);*/
    /*    height: 20px;*/
    /*}*/

    /*.felt_input input[type=text] {*/
    /*    width: 100%;*/
    /*    height:20px;*/
    /*}*/

    /*.felt_input select {*/
    /*    width: calc(100% + 8px);*/
    /*    height:26px;*/
    /*}*/

    /*.felt_input textarea {*/
    /*    width: calc(100% + 8px);*/
    /*    height:126px;*/
    /*}*/

    /*.felt_dato {*/
    /*    float: left;*/
    /*    width: 85px;*/
    /*    height:20px;*/
    /*}*/

    /*.felt_gfx {*/
    /*    float: left;*/
    /*    width: 30px;*/
    /*    height:20px;*/
    /*    margin: 3px 7px;*/
    /*}*/

    /*.felt_header {*/
    /*    margin: 0 0 5px 0;*/
    /*}*/

    /*.felt_radio {*/
    /*    float: left;*/
    /*    margin: 4px*/
    /*}*/

    /*.felt_label {*/
    /*    float: left;*/
    /*    margin: 4px 10px 0 0;*/
    /*}*/

    /*.fejl_container {*/
    /*    background: #ff000050;*/
    /*    height: 50%;*/
    /*    position: relative;*/
    /*    width: calc(100% - 80px);*/
    /*    margin: 0 20px 18px 20px;*/
    /*    padding: 20px;*/
    /*}*/

    .fejl_header {
        font-size: 20px;
        color: #8e0505;
    }

    .fejl_tekst {
        font-size: 20px;
        color: #ffffff;
    }

    .rediger {
        cursor: pointer;
    }

    .disabled {
        color: #bbbbbb;
    }
}

/*********************************************** Login */
@media all {

    .login-wrapper {
        display: flex;
        min-height: 100vh;
    }

    .login-info {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
    }

    .login-info img {
        max-width: 80%;
        max-height: 80vh;
        object-fit: contain;
    }

    .login-box {
        flex: 0 0 500px;
        width: 500px;
        background-color: #f5f5f5;
        padding: 40px;
        box-sizing: border-box;

        display: flex;
        align-items: center;
    }

    /* login content */
    .login-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .login-header {
        font-size: 40px;
        color: #666666;
        margin-bottom: 20px;
    }

    .login-input {
        background: #f5f5f5;
        font-size: 20px;
        width: calc(100% - 20px);
        padding: 10px;
        margin-bottom: 20px;
        border: 0;
        border-bottom: 1px solid #666666;
    }

    .login-input {
        background: #f5f5f5 !important;
    }

    .login-input:focus {
        background: #f5f5f5 !important;
        outline: none;
    }

    .login-input:-webkit-autofill,
    .login-input:-webkit-autofill:hover,
    .login-input:-webkit-autofill:focus,
    .login-input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;
        box-shadow: 0 0 0 1000px #f5f5f5 inset !important;

        -webkit-text-fill-color: #666666 !important;
        caret-color: #666666;

        background-color: #f5f5f5 !important;

        font-size: 20px !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .login-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
    }

    .login-remember {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        color: #888888;
        margin-bottom: 0;
        cursor: pointer;
        user-select: none;
    }

    .login-remember input[type=checkbox] {
        width: 16px;
        height: 16px;
        margin: 0;
        cursor: pointer;
        accent-color: #666666;
    }

    .login-submit {
        background: #f5f5f5;
        color: #666666;
        width: 40%;
        font-size: 20px;
        padding: 10px 20px;
        border: 1px solid #666666;
        cursor: pointer;
    }

    .login-submit:hover {
        background: #fe7420;
        color: #ffffff;
    }


        /* Mobil */
    @media (max-width: 500px) {
        .login-wrapper {
            flex-direction: column;
        }

        .login-box {
            width: 100%;
            order: 1; /* login øverst */
        }

        .login-info {
            order: 2;
        }
    }

    /* Fejlbesked og glemt-kode */
    .login-fejl {
        color: #c0392b;
        font-size: 14px;
        margin: 0 0 16px;
        line-height: 1.5;
    }
    .login-fejl a.login-glemt-link {
        color: #c0392b;
        font-weight: bold;
    }
    .login-glemt-link {
        color: #888;
        font-size: 16px;
        text-decoration: none;
    }
    .login-glemt-link:hover { color: #333; text-decoration: underline; }

    /* "Glemt login?" placeres under "Husk mig"; rykkes 24px ind (checkbox 16px +
       gap 8px) så venstrekanten flugter med teksten "Husk mig", ikke checkboksen. */
    .login-glemt-under {
        display: inline-block;
        margin-top: 8px;
        margin-left: 24px;
    }
    /* Ingen hover her — matcher "Husk mig" der heller ikke reagerer på hover. */
    .login-glemt-under:hover {
        color: #888;
        text-decoration: none;
    }

    .login-glemt-info {
        font-size: 15px;
        color: #666;
        margin: 0 0 18px;
        line-height: 1.5;
    }
    .login-glemt-besked {
        background: #e8f5e9;
        color: #2e7d32;
        border-left: 3px solid #4caf50;
        padding: 10px 14px;
        font-size: 14px;
        margin: 0 0 18px;
        line-height: 1.5;
    }

    .login_header {
        font-family: Arial Black, Arial, Helvetica, sans-serif;
        font-size: 24px;
        font-weight: 900;
        color: #ffffff;
    }

    .login_text {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: bold;
        line-height: 12px;
        color: #ffffff;
    }

    .submit_login {
        background-color: #ffffff;
        color: #333333;
        font-weight: bold;
        width: 65px;
        height: 26px;
        border: solid;
        border-width: 1px;
        cursor: pointer;
    }

    #table {
        margin: auto;
        text-align: center;
        display: table;
        height: 100%;
    }

    #table_cell {
        margin: auto;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        height: 100%;
    }

    #table_cell_content {
        /*width:450px;*/
        height: 250px;
        float: left;
        /*border: 1px solid #eeeeee;*/
    }

}
/*********************************************** Menu */

@media all {

    /* Først styring af menu */
    .menu_container {
        margin: 0px;
        height: calc(100% - 50px);   /* minus højden på top bjælken*/
        width: 250px;
        padding: 0;
    }

    /* Skjuler check-box uden at den kan trigge browser-scroll ved fokus.
       Standard "visually-hidden"-pattern: 1x1 clippet i øverste hjørne,
       så label-klik ikke får browseren til at scrolle siden for at
       bringe checkboxen i view. */
    .menu_input {
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        margin: -1px;
        padding: 0;
        border: 0;
        opacity: 0;
    }

    /*Label styrer at man klikker på hele checkboxen*/
    .menu_label {
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    /* skjuler li gfx */
    .menu_folder {
        list-style-type: none;
    }

    /* skjuler submenu indtil man klikker på den (checked nedenfor) */
    .menu_sub {
        display: none;
        list-style-type: none;
        padding: 0; /* for at få den helt til kant */
    }

    .bgcolor_level_1 {
        background-color: rgb(90,90,90);
    }

    .bgcolor_level_2 {
        background-color: rgb(120,120,120);;
    }

    .bgcolor_level_3 {
        background-color: rgb(150,150,150);;
    }

    /* viser menuen men underlader "parrent" via ~ (tilde) */
    .menu_input:checked ~ .menu_sub {
        display: block;
        list-style-type: none;
    }

    .menu_punkt_L1, .menu_punkt_L1 > a {
        width: calc(100% - 20px);
        padding: 10px 10px 10px 10px;
        font-size: 14px;
        font-weight: normal;
        color: #eeeeee;
        border-bottom: 1px solid #bbbbbb;
    }

    .menu_punkt_L2, .menu_punkt_L2 > a {
        width: calc(100% - 20px);
        padding: 10px 10px 10px 20px;
        font-size: 14px;
        font-weight: normal;
        color: #eeeeee;
        text-decoration: none;
        border-bottom: 1px solid #bbbbbb;
    }

    .menu_punkt_L3, .menu_punkt_L3 > a {
        width: calc(100% - 30px);
        padding: 10px 10px 10px 30px;
        font-size: 14px;
        font-weight: normal;
        color: #eeeeee;
        text-decoration: none;
        border-bottom: 1px solid #bbbbbb;
    }

    a.menu_logout,
    a.menu_logout:link,
    a.menu_logout:visited,
    a.menu_logout:hover,
    a.menu_logout:active,
    a.menu_logout:focus {
        display: block;
        width: calc(100% - 15px);
        margin-top: 30px;
        padding: 10px 10px 10px 5px;
        font-size: 14px;
        font-weight: normal;
        color: #eeeeee;
        text-decoration: none;
    }

    .menu_punkt_L1:hover, .menu_punkt_L2:hover, .menu_punkt_L3:hover, .menu_logout:hover {
        /*background-color: rgba(0, 0, 0, 0.1);*/
        background-color: rgb(111, 148, 169);
        cursor: pointer;
    }

    .menu_awsome {
        font-size: 18px;
        color: #cccccc;
        padding: 0 5px;
        width:25px;
        text-align: center;
    }

    .password-wrapper {
        position: relative;
        width: 100%;
    }

    .password-wrapper input.login {
        width: 100%;
        padding-right: 45px;
        box-sizing: border-box;
    }

    .toggle-password {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        cursor: pointer;
        color: #333333;
        font-size: 18px;
        padding: 0;
        width: 35px;
        height: 35px;
    }

    .password-eye {
        font-weight: 800;
        font-size: 17px;
        color: #999999;
        padding-bottom: 15px;
    }

}



/*********************************************** Topbar */

@media all {

    #topbar {
        display: table;
        height: 50px;
        width: 100%;
        background-color: #6E93A8;
    }

    #topbar_logo {
        font-size: 3em;
        color: aliceblue;
        padding: 0 20px;
        line-height: 50px;
        float: right;
    }

    /* Animated Hamburger Menu -> Thanks to codeSTACKr -> https://www.youtube.com/watch?v=dIyVTjJAkLw */

    .menu-btn .menu-btn__burger {
        visibility: hidden;
        display: none;
    }

    .menu-btn {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: all .5s ease-in-out;
        /*border: 3px solid red;*/
        margin: 5px;
    }

    .menu-btn__burger {
        width:25px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        box-shadow:0 1px 2px rgba(255,101,47,.2);
        transition: all .5s ease-in-out;
    }

    .menu-btn__burger::before, .menu-btn__burger::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        box-shadow:0 1px 2px rgba(255,101,47,.2);
        transition: all .5s ease-in-out;
    }

    .menu-btn__burger::before {
        transform: translateY(-8px);
    }

    .menu-btn__burger::after {
        transform: translateY(8px);
    }

    /* btn animation */
    .menu-btn.open .menu-btn__burger {
        transform: translateX(-25px);
        background: transparent;
        box-shadow: none;
    }

    .menu-btn.open .menu-btn__burger::before {
        transform: rotate(45deg) translate(16px, -16px);
    }

    .menu-btn.open .menu-btn__burger::after {
        transform: rotate(-45deg) translate(16px, 16px);
    }

}

/*Hvis bredde 1100px skifes, så skal den også skiftes i endscript.js  */
@media all and (max-width: 1100px) {

    body, html {
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
    }

    #infoDiv {
        width: 50%;
    }

    #loginDiv {
        width: 50%;
    }

    #menu {
        position: absolute;
        display: none;
        box-shadow: 5px 0px 10px rgb(0 0 0 / 30%);
        z-index: 100;
    }

    #topbar_logo {
        padding: 0 20px 0 0;
        float: right;
    }

    .menu-btn .menu-btn__burger {
        visibility: visible;
        display: flex;
    }

    #page {
        float: left;
        background-color: rgb(250, 250 ,250 );
        width:calc(100% - 40px);   /* minus bredde på menu og padding på siden */
        padding: 20px;
        overflow: auto;
    }

    #table_cell_content {
        float:none;
        height:80px;
    }

}

@media all and (max-width: 800px) {

    #res_33 {
        width: calc(100% - 20px);
    }

    #res_25 {
        width: calc(50% - 20px);
    }

    .felt_container {
        width: 100%;
    }

}

@media all and (max-width: 500px) {

    #res_25 {
        width: calc(100% - 20px);
    }

}

/* ═══════════════════════════════════════════════════════
   Oversigt-antal  (linjen under topMenu med optælling)
═══════════════════════════════════════════════════════ */
.oversigt-antal {
    font-size: 13px;
    color: #555;
    padding: 6px 8px;
    background: #fafafa;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════
   CMS / Website-modul
═══════════════════════════════════════════════════════ */
#cms_tree_panel {
    background: #f7f9fb;
    overflow-y: auto;
    overflow-x: auto;
    height: calc(100vh - 94px);
}

/* Kolonne-definitioner */
.cms-col-navn   { flex: 1; min-width: 180px; display: flex; align-items: center; overflow: hidden; }
.cms-col-type   { width: 54px;  flex-shrink: 0; font-size: 11px; color: #888; }
.cms-col-dato   { width: 90px;  flex-shrink: 0; font-size: 11px; color: #777; white-space: nowrap; }
.cms-col-status { width: 62px;  flex-shrink: 0; }

/* Kolonneoverskrift */
.cms-tree-header {
    display: flex;
    align-items: center;
    padding: 6px 10px 6px 8px;
    background: #eef1f4;
    border-bottom: 1px solid #dde2e7;
    font-size: 11px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Rækker */
.cms-tree-item { display: block; }
.cms-tree-row {
    display: flex;
    align-items: center;
    padding: 5px 10px 5px 0;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    border-left: 3px solid transparent;
    user-select: none;
    min-width: 0;
}
.cms-tree-row:hover { background: #eef3f7; }
.cms-tree-row.aktiv {
    background: #e3edf5;
    border-left-color: #6E93A8;
    font-weight: bold;
}
.cms-tree-row.skjult .cms-col-navn { color: #999; font-style: italic; }
.cms-tree-row.skjult .cms-tree-icon { color: #bbb; }

/* Toggle-pil */
.cms-tree-toggle {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    font-size: 10px;
    color: #aaa;
    margin-right: 2px;
    transition: transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cms-tree-toggle:hover { color: #555; }
.cms-tree-toggle.aaben { transform: rotate(90deg); }
.cms-tree-toggle-ph { width: 16px; flex-shrink: 0; margin-right: 2px; }

/* Ikon og label */
.cms-tree-icon {
    margin-right: 6px;
    color: #6E93A8;
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.cms-tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status-badges */
.cms-status-aktiv  { font-size: 11px; color: #2a7a2a; }
.cms-status-skjult { font-size: 11px; color: #999; font-style: italic; }

/* Farvet status-badge i oversigter (fx medarbejderkartotek) */
.esi-status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    white-space: nowrap;
}

.cms-tree-children { display: none; }
.cms-tree-tom { padding: 14px; font-size: 13px; color: #aaa; }

/* CMS redigér-formular (i detail-panel) */
.cms-form-row { margin-bottom: 13px; }
.cms-form-row label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cms-form-row input[type=text],
.cms-form-row textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #ccc;
    font-size: 13px;
    box-sizing: border-box;
    background: #fff;
    resize: vertical;
}
.cms-form-row input[type=text]:focus,
.cms-form-row textarea:focus { outline: none; border-color: #6E93A8; }
.cms-form-actions {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
    align-items: center;
}
.cms-btn { padding: 8px 16px; border: 0; cursor: pointer; font-size: 13px; background: #6E93A8; color: #fff; }
.cms-btn:hover { background: #5a7d90; }
.cms-btn.sek { background: #999; }
.cms-btn.sek:hover { background: #777; }
.cms-btn.fare { background: #c9444a; float: right; }
.cms-btn.fare:hover { background: #a33; }
.cms-msg { font-size: 13px; padding: 6px 10px; }
.cms-msg.ok   { color: #2a7a2a; background: #e8f7e8; }
.cms-msg.fejl { color: #c00;    background: #fde8e8; }
.cms-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ═══════════════════════════════════════════════════════
   Detail-panel  (slide-in fra højre, variabel bredde)
═══════════════════════════════════════════════════════ */
#detail-panel {
    position: fixed;
    top: 50px;
    right: 0;
    bottom: 0;
    z-index: 600;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
#detail-panel-inner {
    pointer-events: all;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 680px;        /* default — overrides via JS */
    max-width: calc(100vw - 290px);
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 16px rgba(0,0,0,0.13);
    border-left: 1px solid #d8dde3;
    overflow: hidden;
}
#dp-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 10;
    background: rgba(100,130,160,0.10);
    border-left: 2px solid rgba(100,130,160,0.25);
    transition: background 0.15s, border-color 0.15s;
}
#dp-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 28px;
    border-left: 1px solid rgba(100,130,160,0.4);
    border-right: 1px solid rgba(100,130,160,0.4);
}
#dp-resize-handle:hover,
body.dp-resizing #dp-resize-handle {
    background: rgba(110,147,168,0.30);
    border-color: rgba(80,120,160,0.55);
}
body.dp-resizing { cursor: col-resize !important; user-select: none; }
body.dp-resizing * { cursor: col-resize !important; }
#detail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    min-height: 48px;
    background: #f4f6f8;
    border-bottom: 1px solid #d8dde3;
    flex-shrink: 0;
}
#detail-panel-title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;   /* fylder pladsen → badge + luk-kryds skubbes helt til højre */
    min-width: 0;
}
#detail-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #666;
    padding: 4px 6px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 12px;
}
#detail-panel-close:hover { color: #c0392b; }
#detail-panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}
.dp-loading {
    padding: 30px 20px;
    color: #aaa;
    font-size: 14px;
}
#detail-panel-tabs {
    display: flex;
    align-items: stretch;
    padding: 0 16px;
    height: 38px;
    min-height: 38px;
    background: #fff;
    border-bottom: 1px solid #e0e6ed;
    flex-shrink: 0;
    overflow-x: auto;
    /* Skjul horizontal scrollbar — kan stadig swipes / scrolles via touch.
       overflow-y bevares som default (visible) så blå streg under aktiv
       fane (3px border-bottom + margin-bottom: -1px) ikke clippes. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge legacy */
}
#detail-panel-tabs::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.dp-tab {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
}
.dp-tab:hover:not(.disabled) { color: #333; }
.dp-tab.aktiv {
    color: #6E93A8;
    /* box-shadow i stedet for border-bottom-color, så stregen ikke clippes
       af containerens overflow-x: auto (browser-quirk hvor overflow-x: auto
       implicit clipper overflow-y også). Inset shadow på bunden = 3px streg. */
    box-shadow: inset 0 -3px 0 #6E93A8;
    font-weight: 600;
}
.dp-tab.disabled { color: #bbb; cursor: default; }

.dp-fane-wrap { padding: 20px 24px 24px; }
#dp-fane-indhold { min-height: 500px; display: flex; flex-direction: column; }

/* ── CMS kolonne-editor ─────────────────────────────────────────────── */
.cms-editor-layout {
    display: flex;
    flex: 1;
    min-height: 500px;
    margin: -20px -24px -24px;   /* ophæver dp-fane-wrap padding */
}
.cms-editor-canvas {
    flex: 1;
    padding: 12px 14px;
    overflow-y: auto;
    background: #f0f2f5;
}
.cms-canvas-empty {
    padding: 40px 20px;
    text-align: center;
    color: #aaa;
    font-size: 13px;
    font-style: italic;
}
.cms-editor-toolbox {
    width: 148px;
    min-width: 148px;
    padding: 10px 8px;
    border-left: 1px solid #dde3ea;
    background: #f8f9fa;
    overflow-y: auto;
}
.cms-toolbox-header {
    font-size: 10px;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e6ed;
}
.cms-add-row {
    margin-bottom: 5px;
    padding: 5px 6px 4px;
    border: 1px solid #dde3ea;
    background: #fff;
    cursor: pointer;
    font-size: 11px;
    color: #555;
    user-select: none;
}
.cms-add-row:hover { background: #e8f0f5; border-color: #6E93A8; color: #333; }
.cms-layout-preview {
    display: flex;
    height: 16px;
    gap: 2px;
    margin-top: 4px;
}
.cms-lp-col {
    background: #b5cdd9;
    height: 100%;
    min-width: 4px;
}
/* Rækker i canvaset */
.cms-row {
    position: relative;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #dde3ea;
}
.cms-row:hover { border-color: #b5cdd9; }
.cms-row-toolbox {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    flex-direction: row;
    gap: 1px;
    z-index: 20;
    padding: 2px;
    background: rgba(255,255,255,0.92);
    border-bottom-left-radius: 3px;
}
.cms-row:hover .cms-row-toolbox { display: flex; }
.cms-row-btn {
    width: 26px;
    height: 24px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 11px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.cms-row-btn:hover { background: #e2ecf3; border-color: #6E93A8; color: #333; }
.cms-row-btn.fare { color: #c9444a; }
.cms-row-btn.fare:hover { background: #fde8e8; border-color: #c9444a; }
/* Kolonne-divs */
.cms-cols {
    display: flex;
}
.cms-col {
    flex: 1;
    min-width: 0; /* lader flex-fordelingen vinde over billedets intrinsiske bredde */
    min-height: 80px;
    padding: 10px 12px;
    border-right: 1px solid #eef1f4;
    cursor: text;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}
.cms-col:last-child { border-right: none; }
/* Billeder fylder kolonnens bredde og beholder proportionerne (ingen fast højde) */
.cms-col img {
    width: 100% !important;
    height: auto !important;
}
.cms-col:empty::before {
    content: 'Skriv her…';
    color: #ccc;
    font-style: italic;
    font-size: 13px;
    pointer-events: none;
}
.cms-col:focus { background: #fdfeff; box-shadow: inset 0 0 0 2px #6E93A8; }
.cke_focus.cms-col { background: #fdfeff; box-shadow: inset 0 0 0 2px #6E93A8; }

/* Radio-knapper til online-status i CMS */
.cms-status-radios { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cms-radio-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid #e8e8e8;
    background: #fafafa;
    cursor: pointer;
}
.cms-radio-item:hover { background: #f0f4f7; }
.cms-radio-item input[type=radio] { flex-shrink: 0; margin-top: 3px; width: auto; cursor: pointer; }
.cms-radio-text { display: flex; flex-direction: column; gap: 2px; }
.cms-radio-label { font-weight: 600; font-size: 13px; }
.cms-radio-hint  { font-size: 12px; color: #888; }

/* ── CMS tab 2-kolonne layout ───────────────────────────── */
.cms-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    align-items: start;
}
@media (max-width: 768px) {
    .cms-2col {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ── Custom kolonne-bredder fra metadata (desktop_width / mobile_width) ─────
   Server emiter --col-w-d og --col-w-m som CSS-variabler på <th> og <td>.
   var()-fallback til 'auto' når variablen ikke er sat. */
[data-dynlist-context] .responsive_table th[style*="--col-w"],
[data-dynlist-context] .responsive_table td[style*="--col-w"] {
    width:     var(--col-w-d, auto);
    max-width: var(--col-w-d, none);
}
@media (max-width: 768px) {
    [data-dynlist-context] .responsive_table th[style*="--col-w"],
    [data-dynlist-context] .responsive_table td[style*="--col-w"] {
        width:     var(--col-w-m, auto);
        max-width: var(--col-w-m, none);
    }
}

/* ── Standard højre-kolonner i dynamic-modul-tabeller (created/updated/status) ─
   Max 100px bredde + ellipsis ved overflow. Scoped til [data-dynlist-context]
   så andre .responsive_table-brug ikke påvirkes.
   :not([style*="--col-w"]) sikrer at en kolonne med custom width vinder. */
[data-dynlist-context] .responsive_table th:nth-last-child(-n+3):not([style*="--col-w"]),
[data-dynlist-context] .responsive_table td:nth-last-child(-n+3):not([style*="--col-w"]) {
    max-width: 100px;
    width: 100px;
}
/* TD: ellipsis-overflow på selve datacellen */
[data-dynlist-context] .responsive_table td:nth-last-child(-n+3) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* TH-titel ellipsis (men IKKE overflow:hidden på th selv — det clipper filter-box) */
[data-dynlist-context] .responsive_table th:nth-last-child(-n+3) .filter-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
/* Filter-box må gerne bryde ud over 100px-th'en for at give plads til dato-input osv. */
[data-dynlist-context] .responsive_table th:nth-last-child(-n+3) .filter-box {
    min-width: 220px;
}

/* ── CMS billedpreview ──────────────────────────────────── */
.cms-img-preview {
    width: 100%;
    aspect-ratio: 16/9;
    background: #f4f6f8;
    border: 2px dashed #ccd0d5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
}
.cms-img-preview img { width: 100%; height: 100%; object-fit: contain; }
.cms-img-preview-news {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f4f6f8;
    border: 2px dashed #ccd0d5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
    overflow: hidden;
    margin-bottom: 8px;
    cursor: pointer;
}
.cms-img-preview-news img { width: 100%; height: 100%; object-fit: cover; }

/* ── CMS checkbox grupper ───────────────────────────────── */
.cms-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    padding: 8px 10px;
    border: 1px solid #e8e8e8;
    background: #fafafa;
}
.cms-check-item:hover { background: #f0f4f7; }
.cms-check-item input[type=checkbox] { margin-top: 3px; flex-shrink: 0; cursor: pointer; width: auto; }
.cms-check-item-label { font-size: 13px; font-weight: 600; color: #333; display: block; }
.cms-check-item-hint  { font-size: 12px; color: #888; display: block; margin-top: 2px; }

/* ── CMS dato/tid controls ──────────────────────────────── */
.cms-dt-block {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #f8f9fa;
    border: 1px solid #e5e9ed;
    border-radius: 4px;
}
.cms-dt-block h4 {
    font-size: 12px;
    font-weight: 700;
    color: #444;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cms-dt-block p {
    font-size: 11px;
    color: #777;
    margin: 0 0 10px 0;
    line-height: 1.5;
}
.cms-dt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cms-dt-row input[type="datetime-local"] {
    flex: 1;
    min-width: 160px;
    padding: 6px 8px;
    border: 1px solid #ccd0d5;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
}
.cms-dt-anvend {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}
.cms-dt-anvend input[type=checkbox] { width: auto; cursor: pointer; }
.cms-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #6E93A8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #dde3ea;
}

/* ═══════════════════════════════════════════════════════
   Detail-panel formularer (delt med systemadmin)
═══════════════════════════════════════════════════════ */
.form-row { margin-bottom: 11px; padding: 0 0 0 8px; }

.form-row label {
    display: block;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 3px;
    cursor: default;
}

.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row input[type=number],
.form-row input[type=date],
.form-row input[type=datetime-local],
.form-row textarea,
.form-row select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 13px;
    box-sizing: border-box;
    font-family: inherit;
}

.form-row textarea { resize: vertical; min-height: 60px; }

.field-hint {
    font-size: 11px;
    color: #999;
    margin-top: 3px;
    font-weight: normal;
    display: block;
}

/* Radio/checkbox-grupper i editor-form (DynamicForm field_type radio/checkbox) */
.form-choice-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0 2px;
}
.form-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    font-weight: normal;
}
.form-choice input { margin: 0; flex-shrink: 0; cursor: pointer; }

.dp-fane-actions {
    padding: 16px 0 4px;
    border-top: 1px solid #e8e8e8;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cms-gem-msg {
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
}
.cms-gem-msg.ok   { color: #2a7a2a; }
.cms-gem-msg.fejl { color: #c00; }

/* Flash-footer: "Sidst opdateret af NAVN · DATO" — grøn flash der fader til grå */
.cms-gem-msg.opdateret-flash       { color: #2a7a2a; font-weight: normal; transition: color 2.5s ease; }
.cms-gem-msg.opdateret-flash.faded { color: #999; }

/* Detail-panel tabbar */
/* Aktiv-række i oversigt (når detail-panel er åbent) */
.responsive_table tbody tr.aktiv {
    background: #dceaf3;
    box-shadow: inset 3px 0 0 #6E93A8;
}
.responsive_table tbody tr.aktiv:hover {
    background: #dceaf3;
    color: inherit;
}

/* Button (fallback hvis ikke allerede defineret) */
.button {
    display: inline-block;
    padding: 8px 16px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    font-size: 13px;
}
.button:hover { background: #555; }
.button.secondary { background: #777; }
.button.secondary:hover { background: #999; }
.button.danger { background: #c00; }
.button.danger:hover { background: #a00; }
.button.small { padding: 5px 10px; font-size: 12px; }

/* Primær handling — orange (matcher login-submit hover). Brug på alle submit-
   knapper i overlays, så brugeren ser hvilken knap Enter aktiverer. */
.button.primary { background: #fe7420; }
.button.primary:hover { background: #e66515; }

/* ── Mobile: kolonne-synlighed per orientation ──────────────────────────────
   Default på mobile (<=768px): skjul alle kolonner. Kun celler med
   .show-portrait (portrait-mode) eller .show-landscape (landscape-mode)
   vises. Disse klasser sættes server-side ud fra system_dynamic_fields. */
@media (max-width: 768px) and (orientation: portrait) {
    [data-dynlist-context] .responsive_table th:not(.show-portrait):not(.dynlist-expand-toggle-th),
    [data-dynlist-context] .responsive_table .dynlist-row > td:not(.show-portrait):not(.dynlist-expand-toggle) {
        display: none;
    }
}
@media (max-width: 768px) and (orientation: landscape) {
    [data-dynlist-context] .responsive_table th:not(.show-landscape):not(.dynlist-expand-toggle-th),
    [data-dynlist-context] .responsive_table .dynlist-row > td:not(.show-landscape):not(.dynlist-expand-toggle) {
        display: none;
    }
}

/* Tabel-layout på mobile: auto i stedet for fixed, så de viste kolonner
   fylder hele bredden uden at reservere plads til skjulte kolonner. */
@media (max-width: 768px) {
    [data-dynlist-context] .responsive_table {
        table-layout: auto;
        width: 100%;
    }
}

/* Minus-toggle-celle — kun synlig på mobile.
   Tom når lukket; viser kun et hvidt minus-ikon når rækken er åben. */
.dynlist-expand-toggle,
.dynlist-expand-toggle-th {
    display: none;
}
@media (max-width: 768px) {
    .dynlist-expand-toggle,
    .dynlist-expand-toggle-th {
        display: table-cell;
        width: 36px;
        min-width: 36px;
        text-align: center;
        padding: 8px 4px !important;
    }
    .dynlist-expand-toggle.aaben i { color: #fff; }
    /* Ingen filter på toggle-headeren */
    .dynlist-expand-toggle-th .filter-header,
    .dynlist-expand-toggle-th .filter-box { display: none; }

    /* Åben række får mørk baggrund + hvid tekst på mobile, så minus-ikonet
       matcher teksten visuelt. */
    .responsive_table tbody tr.dynlist-row.aktiv {
        background: #6E93A8 !important;
    }
    .responsive_table tbody tr.dynlist-row.aktiv > td {
        color: #fff;
    }
}

/* Standard højre-kolonner (max 100px) skal IKKE ramme toggle-cellen */
[data-dynlist-context] .responsive_table th.dynlist-expand-toggle-th,
[data-dynlist-context] .responsive_table .dynlist-row > td.dynlist-expand-toggle {
    max-width: none;
    width: 36px;
}

/* ── Mobile expand-row: foldes ud under en række, viser alle skjulte felter ─ */
.dynlist-expand-row { display: none; }
.dynlist-expand-row.aabnet { display: table-row; }
.dynlist-expand-row > td {
    padding: 0 !important;
    background: #fafafa;
    border-bottom: 1px solid #ccc;
}
.dynlist-expand-content {
    padding: 12px 16px;
    font-size: 13px;
}
.dynlist-expand-content .field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px dotted #ddd;
}
.dynlist-expand-content .field-row:last-of-type { border-bottom: none; }
.dynlist-expand-content .field-label {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dynlist-expand-content .field-value {
    text-align: right;
    color: #222;
}
.dynlist-expand-content .expand-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

/* ── Detail-panel fuldskærms-mode på mobile ─────────────────────────────── */
@media (max-width: 768px) {
    #detail-panel-inner {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh;           /* fallback for ældre browsere */
        height: 100dvh;          /* dynamic viewport — undgår at mobile-browser-baren clipper bunden */
    }
    /* Knap-rækken bliver fixed til bunden af viewporten på mobile, så
       Luk/Deaktiver/Opdater altid er synlige uanset scroll-position.
       padding-bottom respekterer safe-area-inset (notch / home-indicator).
       #detail-panel-content får ekstra padding-bottom så det sidste form-felt
       ikke skjules af action-baren. */
    #detail-panel-content {
        padding-bottom: 80px;
    }
    .dp-fane-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #e8e8e8;
        margin: 0;
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
        z-index: 5;
        box-shadow: 0 -4px 8px rgba(0,0,0,0.04);
    }
    /* Resize-håndtag giver ikke mening på mobile */
    #dp-resize-handle { display: none !important; }
}

/* ── Miljø-badge i topbar (synlig kun når .local.php aktiverer lokal DB) ── */
.esi-env-badge {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 3px;
    z-index: 100;
    pointer-events: auto;
    cursor: help;
}
.esi-env-lokal {
    background: #ffcc00;
    color: #000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* ── Tabel-scroll-container med sticky header ───────────────────────────────
   Tabellen scroller selv (lodret + vandret); topbar, antal-tæller, pagination
   og kolonne-headers forbliver synlige. Buffer-højden dækker:
     topbar (~50) + topMenu (~50) + dyn_antal (~30)
     + pagination-bar (~64: margin 16 + padding 16 + content 32)
     + #page padding (40) + lidt luft = ~290px
   For lavt → #page får sin egen scrollbar (= to scrollbars). */
.dyn-table-scroll {
    max-height: calc(100vh - 290px);
    min-height: 200px;
    overflow: auto;
    border: 1px solid #ddd;
    border-radius: 2px;
}
.dyn-table-scroll .responsive_table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    /* Tving tabellen til min hele scroll-container — ellers krymper headeren
       til kolonnernes intrinsic min-width når der ingen rækker er (tom tabel
       efter første load eller efter filter med 0 hits). */
    width: 100%;
    min-width: 100%;
}
/* Sticky thead — kræver border-collapse: separate for at virke pålideligt.
   Borders simuleres via box-shadow så de IKKE forsvinder under scroll. */
.dyn-table-scroll .responsive_table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #efefef;
    box-shadow: inset 0 -1px 0 #ccc;
}
.dyn-table-scroll .responsive_table td {
    border-bottom: 1px solid #eee;
}
.dyn-table-scroll .responsive_table tr {
    border-bottom: none; /* erstattet af td's border-bottom så separate-mode virker */
}

/* ── Pagination-bar (dynamic-modul-lister) ──────────────────────────────── */
.dyn-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    flex-wrap: wrap;
}
/* Midtersektion: "Viser side"-info + dropdowns på én centreret linje */
.dyn-pagination .dyn-pag-center {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
}
.dyn-pagination .dyn-pag-info {
    text-align: center;
    font-size: 13px;
    color: #444;
}
.dyn-pagination .dyn-pag-dropdowns {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #444;
}
.dyn-pagination select {
    padding: 4px 6px;
    font-size: 13px;
    border: 1px solid #bbb;
    background: #fff;
    border-radius: 2px;
}
.dyn-pagination .button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Desktop: skjul pil-tegn og mobil-antal */
.dyn-pag-pil,
.dyn-pag-mobil-antal {
    display: none;
}

/* ── Mobile: kompakt pagination (Forrige/Næste som pile, dropdowns på linje 2) ─ */
@media (max-width: 768px) {
    .dyn-pagination {
        gap: 8px;
        padding: 8px;
    }
    .dyn-pag-fuld { display: none; }
    .dyn-pag-pil {
        display: inline;
        font-size: 20px;
        font-weight: bold;
        line-height: 1;
    }
    .dyn-pag-prev, .dyn-pag-next {
        padding: 4px 12px;
        min-width: 44px;
    }
    .dyn-pag-mobil-antal { display: inline; }
    .dyn-pag-prside-lbl { display: none; }
    .dyn-pagination .dyn-pag-dropdowns {
        justify-content: center;
    }
    /* Skjul den eksterne antal-tæller på mobile (vi viser den nu i pagination-baren) */
    #dyn_antal { display: none; }
}

/* ── Mobile-titel + burger-menu på topMenu ──────────────────────────────── */
.topMenu-mobile-titel { display: none; }
.mobile-only { display: none !important; }
.topMenu-dropdown { display: none; }

@media (max-width: 768px) {
    .topMenu-mobile-titel {
        display: block;
        padding: 10px 15px 6px;
        font-size: 16px;
        color: #444;
    }
    .desktop-only { display: none !important; }
    .mobile-only  { display: inline-flex !important; }

    .topMenuActions {
        width: 100%;
    }
    /* Skjul ekstra-actions i selve topMenu — de bor nu i burger-dropdown */
    .topMenuActions .extra-action { display: none !important; }
    /* Fjern lodrette streger på de yderste elementer i bjælken — undgår
       "kasse"-look. Kun de indre adskillelser bevares. */
    .topMenuActions > .topMenuBtn:first-child { border-left: 0 !important; }
    .topMenuActions > .topMenuBtn:last-child  { border-right: 0 !important; }
    /* Søgefeltet fylder al ledig plads mellem "Opret ny" og burger */
    .topMenuActions > .topMenu-soeg { flex: 1; }
    .topMenuActions > .topMenu-soeg .topMenu-input { width: 100%; }
    /* Burger-knap til højre — matcher topMenuBtn-stilen (transparent + hover) */
    button.topMenu-burger {
        margin-left: auto;
        padding: 0;
        background: transparent;
        border: 0;
        border-left: 1px solid #ccc;
        font: inherit;
        color: #666;
        cursor: pointer;
    }
    button.topMenu-burger:hover {
        background: #6F94A9AA;
        color: #fff;
    }
    button.topMenu-burger:hover .menu_awsome { color: #fff; }
    /* Dropdown-overlay — positioneres dynamisk via JS så venstre kant
       flugter med burgerens venstre lodrette streg. */
    .topMenu-dropdown {
        display: none;
        z-index: 100;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        min-width: 180px;
        padding: 4px 0;
    }
    .topMenu-dropdown-item {
        display: block;
        padding: 10px 16px;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
    }
    .topMenu-dropdown-item:hover {
        background: #f5f5f5;
        color: #fe7420;
    }
    .topMenu-dropdown-item i { margin-right: 8px; color: #888; }
}

/* Auto-styling: type="submit" der ikke eksplicit er secondary/danger får
   automatisk primary-farven — så Enter-knappen visuelt skiller sig ud. */
button[type="submit"].button:not(.secondary):not(.danger):not(.primary) {
    background: #fe7420;
}
button[type="submit"].button:not(.secondary):not(.danger):not(.primary):hover {
    background: #e66515;
}

/* Fil-felt: primær-markering (stjerne) */
.dyn-file-liste { list-style: none; margin: 0 0 8px; padding: 0; }
.dyn-file-liste li { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.dyn-file-primaer {
    background: none; border: 0; cursor: pointer; padding: 2px;
    color: #c9c9c9; font-size: 14px; line-height: 1;
}
.dyn-file-primaer:hover { color: #f0ad00; }
.dyn-file-liste li.er-primaer .dyn-file-primaer { color: #f0ad00; }
.dyn-file-slet {
    background: none; border: 0; cursor: pointer; color: #c0392b;
    font-size: 16px; line-height: 1; margin-left: auto;
}

/* Fil-felt: billedvisning (medium + thumbnail-stribe) */
.dyn-img-blok { margin: 0 0 10px; }
.dyn-img-medium-wrap { position: relative; display: inline-block; max-width: 100%; }
.dyn-img-medium {
    display: block; width: 100%; max-width: 500px; max-height: 500px;
    height: auto; object-fit: contain; border: 1px solid #ddd;
    border-radius: 4px; cursor: pointer; background: #fafafa;
}
.dyn-img-medium:hover { border-color: #6E93A8; }
.dyn-img-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dyn-img-thumb {
    position: relative; width: 64px; height: 64px; border: 1px solid #ddd;
    border-radius: 3px; overflow: hidden; cursor: pointer; background: #fafafa;
}
.dyn-img-thumb:hover { border-color: #6E93A8; }
.dyn-img-thumb.selected { border-color: #fe7420; box-shadow: 0 0 0 2px rgba(254,116,32,0.35); }
.dyn-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dyn-img-star {
    position: absolute; bottom: 2px; left: 2px; width: 20px; height: 20px;
    border: 0; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff;
    font-size: 11px; line-height: 18px; cursor: pointer; padding: 0;
}
.dyn-img-star .fa-solid { color: #f0ad00; }
.dyn-img-thumb.is-primary .dyn-img-star { background: rgba(0,0,0,0.7); }
.dyn-img-thumb.is-primary::after {
    content: "Primær"; position: absolute; top: 2px; left: 2px;
    background: rgba(254,116,32,0.9); color: #fff; font-size: 9px;
    padding: 1px 4px; border-radius: 3px; pointer-events: none;
}
.dyn-img-del {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
    border: 0; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
    font-size: 14px; line-height: 18px; cursor: pointer; padding: 0;
    opacity: 0; transition: opacity .12s;
}
.dyn-img-medium-wrap:hover .dyn-img-del,
.dyn-img-thumb:hover .dyn-img-del { opacity: 1; }
.dyn-img-del:hover { background: #c0392b; }

/* Billed-editor modal (Cropper.js) */
#dyn-crop-modal {
    position: fixed; inset: 0; z-index: 4000; display: none;
    background: rgba(0,0,0,0.7); align-items: center; justify-content: center;
}
#dyn-crop-modal .dcm-box {
    background: #fff; border-radius: 5px; width: 720px; max-width: 94vw;
    max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
}
#dyn-crop-modal .dcm-head {
    padding: 12px 18px; border-bottom: 1px solid #eee; font-weight: 600;
}
#dyn-crop-modal .dcm-body { padding: 14px; background: #333; overflow: auto; }
#dyn-crop-modal .dcm-body img { max-width: 100%; display: block; }
#dyn-crop-modal .dcm-tools {
    display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 18px;
    border-top: 1px solid #eee; align-items: center;
}
#dyn-crop-modal .dcm-tools .spacer { margin-left: auto; }

/* Relation-felt (kunde/domæne-kobling) i dynamisk formular */
.dyn-relation-felt .dyn-rel-liste { margin: 0 0 8px; }
.dyn-relation-felt .dyn-rel-tom {
    margin: 0 0 8px;
    color: #999;
    font-size: 13px;
    font-style: italic;
}
.dyn-relation-felt .dyn-rel-liste-ul {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dyn-relation-felt .dyn-rel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px 5px 10px;
    background: #f5f7f9;
    border: 1px solid #e3e8ec;
    border-radius: 4px;
    font-size: 13px;
}
.dyn-relation-felt .dyn-rel-navn { font-weight: 600; }
.dyn-relation-felt .dyn-rel-fjern {
    border: none;
    background: none;
    color: #b0b8c0;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1;
}
.dyn-relation-felt .dyn-rel-fjern:hover { color: #c33; }

/* ── Relation-widget i selector-stil (widget:selector) ─────────────────────
   Multi-select i listefilterets look: chips (valgte) + søgefelt + checkbox-
   options. Bruges fx på medarbejderkartotekets afdelings-tilknytning. */
.dyn-rel-selector { width: 100%; box-sizing: border-box; }

/* Søgerad: kun søgefeltet — altid synlig (sammenklappet) */
.dyn-rel-selector .rel-sel-bar {
    display: flex;
    align-items: center;
}
/* Søgefeltet matcher de øvrige felter (.form-row input / landevælgeren):
   fuld bredde, padding 6px 8px, font-size 13px, min-height 31px. */
.dyn-rel-selector .rel-sel-soeg {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 6px 8px;
    font-size: 13px;
    min-height: 31px;
    /* Overstyr .topMenu-input (grå bg + kun bundkant) → hvid + fuld kant,
       så søgefeltet matcher de øvrige input-felter i formularen. */
    background-color: #fff !important;
    border: 1px solid #ccc !important;
}
/* "Vælg alle"-rækken (valgfri, vis_alle): øverst i dropdownen, adskilt fra
   options med en bundlinje. */
.dyn-rel-selector .rel-sel-alle-row {
    cursor: pointer;
    font-weight: 600;
    border-bottom: 1px solid #e5e5e5;
}

/* Dropdown-panel: skjult som standard; åbnes ved fokus i søgefeltet */
.dyn-rel-selector .rel-sel-dropdown {
    display: none;
    margin-top: 4px;
}
.dyn-rel-selector.rel-sel-aaben .rel-sel-dropdown { display: block; }

.dyn-rel-selector .rel-sel-options {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    background: #fff;
}
.dyn-rel-selector .rel-sel-row { cursor: pointer; }
.dyn-rel-selector .rel-sel-row.rel-sel-skjult { display: none; }

/* "Valgte:"-sektion: afkrydsede checkboxe under søgeraden */
.dyn-rel-selector .rel-sel-valgte { margin-top: 8px; }
.dyn-rel-selector .rel-sel-valgte-titel {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}
.dyn-rel-selector .rel-sel-valgt-row {
    cursor: pointer;
    border-bottom: none;
}
.dyn-rel-selector .dyn-rel-tom {
    margin: 0;
    padding: 8px;
    color: #999;
    font-size: 13px;
    font-style: italic;
}

/* ── Land-vælger: stylet ENKELT-vælger (matcher afdelings-vælgeren) ─────────
   Klikbar visning + sammenklappet dropdown (søgefelt + scrollbar options).
   Enkelt-valg markeres med checkmark/highlight; options-liste max-height 400px. */
.dyn-land-selector { width: 100%; position: relative; }

/* Klikbar visning øverst — matcher standard input-felterne
   (.form-row input/select: width 100%, padding 6px 8px, font-size 13px). */
.dyn-land-selector .land-sel-vis {
    display: flex;
    align-items: center;
    min-height: 31px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}
/* Ingen custom fokus-stil → visningen bruger browserens standard-fokusmarkering,
   magen til de øvrige .form-row input-felter (konsistent på tværs af formularen). */
.dyn-land-selector .land-sel-vis.land-sel-placeholder { color: #999; }
.dyn-land-selector .land-sel-vis::after {
    content: "\f078"; /* chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    font-size: 11px;
    color: #b0b8c0;
}

/* Dropdown-panel: skjult som standard; åbnes ved klik på visningen */
.dyn-land-selector .land-sel-dropdown {
    display: none;
    margin-top: 4px;
}
.dyn-land-selector.land-sel-aaben .land-sel-dropdown { display: block; }

.dyn-land-selector .land-sel-soeg {
    width: 100%;
    margin-bottom: 4px;
}

/* Options-liste: scrollbar ved mange lande */
.dyn-land-selector .land-sel-options {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    background: #fff;
}
.dyn-land-selector .land-sel-row { cursor: pointer; }
.dyn-land-selector .land-sel-row.land-sel-skjult { display: none; }
.dyn-land-selector .land-sel-row.land-sel-valgt {
    background: #eef4f7;
    font-weight: 600;
}
/* Tastatur-/hover-markering: viser hvilket land Enter vælger */
.dyn-land-selector .land-sel-row:hover,
.dyn-land-selector .land-sel-row.land-sel-aktiv {
    background: #e3edf2;
}
.dyn-land-selector .land-sel-mark {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    color: #6E93A8;
    margin-right: 6px;
}
.dyn-land-selector .land-sel-ryd {
    color: #999;
    font-style: italic;
}

/* Abonnement-fane: 3 tabeller med konsistente kolonne-bredder */
.abn-relations {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.abn-sektion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.abn-sektion-titel {
    font-size: 13px;
    font-weight: bold;
}
.abn-tabel {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
/* table-layout: fixed → colgroup-widths respekteres præcist. Tekst og
   Beskrivelse deler det resterende space ligeligt (50/50 efter pris+ikon). */
.abn-col-tekst         { width: auto; }
.abn-col-beskrivelse   { width: auto; }
.abn-col-pris          { width: 120px; }
.abn-col-ikon          { width: 40px; }
.abn-tabel td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    vertical-align: middle;
}
.abn-tabel .abn-tekst        { font-weight: normal; }
.abn-tabel .abn-beskrivelse  { color: #888; font-size: 12px; }
.abn-tabel .abn-pris         { text-align: right; color: #555; font-variant-numeric: tabular-nums; }
.abn-tabel .abn-ikon         { text-align: center; padding: 4px; }
.abn-tabel .abn-empty td {
    color: #999;
    font-style: italic;
    padding: 12px 8px;
    border-bottom: 0;
}
.abn-ikon-btn {
    background: transparent;
    border: 1px solid #d8dde3;
    width: 32px;
    height: 28px;
    padding: 0;
    cursor: pointer;
    color: #666;
    font-size: 12px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s, border-color 0.12s;
}
.abn-ikon-btn:hover { color: #d97706; border-color: #d97706; }

/* Embedded-list ikonknapper (rediger/slet i child-record-liste) — diskret
   firkantet design med orange hover, ingen baggrund. */
.dyn-emb-ikonbtn {
    background: transparent;
    border: 1px solid #d8dde3;
    padding: 4px 8px;
    cursor: pointer;
    color: #666;
    font-size: 12px;
    border-radius: 2px;
    margin-left: 4px;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.dyn-emb-ikonbtn:hover {
    color: #d97706;
    border-color: #d97706;
}
/* Primær-stjerne: gul når aktiv (denne række er primær for sin gruppe) */
.dyn-emb-ikonbtn.dyn-emb-primaer.aktiv {
    color: #eab308;
    border-color: #eab308;
}
.dyn-emb-ikonbtn.dyn-emb-primaer.aktiv:hover {
    color: #ca8a04;
    border-color: #ca8a04;
}

/* Generisk picker-modal (esi_picker.js) — vælg-fra-liste oven på detail-panel */
.esi-picker-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 4000;
    display: flex; align-items: center; justify-content: center;
}
.esi-picker-modal {
    background: #fff; border-radius: 4px; box-shadow: 0 6px 30px rgba(0,0,0,0.3);
    width: min(900px, 90vw); max-height: 85vh;
    display: flex; flex-direction: column;
}
.esi-picker-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-bottom: 1px solid #e0e0e0;
    cursor: move; user-select: none;
}
/* Close-knappen skal stadig have peger-cursor (ikke flyt-cursoren fra headeren) */
.esi-picker-header .esi-picker-luk { cursor: pointer; }
.esi-picker-titel { font-size: 15px; font-weight: bold; }
.esi-picker-luk {
    background: none; border: 0; font-size: 24px; cursor: pointer; color: #888;
    line-height: 1; padding: 0 4px;
}
.esi-picker-luk:hover { color: #222; }
.esi-picker-soeg {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 18px; border-bottom: 1px solid #f0f0f0;
}
.esi-picker-soeg-input {
    flex: 1; padding: 6px 10px; border: 1px solid #ccc; font-size: 13px;
}
.esi-picker-antal { color: #888; font-size: 12px; white-space: nowrap; }
.esi-picker-liste {
    flex: 1; overflow-y: auto; padding: 0;
}
.esi-picker-table th {
    text-align: left; font-size: 12px; font-weight: bold; color: #555;
    border-bottom: 1px solid #e0e0e0; padding: 8px 12px;
    background: #f8f8f8; position: sticky; top: 0;
}
.esi-picker-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
/* Blå hover + hvid tekst (matcher .responsive_table). Uden farve-override her
   arvede rækken hvid tekst fra .responsive_table tr:hover, men fik kun lys bg
   fra denne regel → hvid-på-lys = ulæselig. */
.esi-picker-table tr:hover td { background: #6d92a7; color: #fff; }
.esi-picker-table tr:hover td a { color: #fff; }
.esi-picker-table tr.esi-picker-tilknyttet td {
    color: #999;
    background: #fafafa;
}
.esi-picker-table tr.esi-picker-tilknyttet:hover td { background: #f0f0f0; }
.esi-picker-pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px; border-top: 1px solid #e0e0e0;
}
.esi-picker-side-info { color: #888; font-size: 12px; }

/* Generisk søgbar autocomplete-dropdown (esi_soeg.js) — skal ligge oven på
   detail-panel-modalen, som har z-index ~1000. */
.ui-autocomplete.esi-soeg-dropdown {
    z-index: 3000;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    padding: 0;
    /* max-height sættes dynamisk af esi_soeg.js i 'open'-callback */
}
.ui-autocomplete.esi-soeg-dropdown .esi-soeg-item {
    border-bottom: 1px solid #f0f0f0;
}
.ui-autocomplete.esi-soeg-dropdown .esi-soeg-item:last-child {
    border-bottom: 0;
}
.ui-autocomplete.esi-soeg-dropdown .ui-state-active,
.ui-autocomplete.esi-soeg-dropdown .ui-state-focus {
    background: #f0f6ff;
    color: #222;
    border: 0;
    margin: 0;
}

/* ── Kun læse-adgang (dynamisk lag) ─────────────────────────────────────────
   Badge + skjul af redigerings-affordances for brugere uden skrive-rettighed.
   Rent UX-lag — den autoritative spærring er skrive-gaten i
   /dynamic/inc.bootstrap.php (server-side). */
.dyn-ro-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #6E93A8;         /* header-blå = struktur/status, ikke handling */
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}
/* Badge over editor-formularen (egen linje) */
.dyn-ro-badge:not(.dyn-ro-badge-inline) { margin: 0 0 12px; }
/* Badge inde i topMenu-headeren (samme linje som titlen) */
.dyn-ro-badge-inline { margin-left: 10px; vertical-align: middle; }
/* Badge i selve slide-in-headeren (linjen med titel + luk-kryds), yderst til
   højre lige før krydset. Dobbelt-klasse-specificitet slår :not()-reglen
   ovenfor, så header-marginen vinder (ingen 12px bund-margin i headeren). */
.dyn-ro-badge.dyn-ro-badge-header { margin: 0 0 0 12px; flex-shrink: 0; }

/* Fil-widget: bevar visning af eksisterende filer/billeder, skjul upload +
   fjern/primær-knapper. */
.dyn-file-felt.dyn-ro .dyn-file-upload,
.dyn-file-felt.dyn-ro .dyn-file-input,
.dyn-file-felt.dyn-ro .dyn-file-slet,
.dyn-file-felt.dyn-ro .dyn-file-primaer,
.dyn-file-felt.dyn-ro .dyn-img-del,
.dyn-file-felt.dyn-ro .dyn-img-star { display: none !important; }
.dyn-file-felt.dyn-ro .dyn-img-medium { cursor: default; }

/* Relation-widget (picker + selector): skjul tilføj/søg/valgmuligheder,
   bevar visning af de tilknyttede. */
.dyn-relation-felt.dyn-ro .dyn-rel-add,
.dyn-rel-selector.dyn-ro .rel-sel-bar,
.dyn-rel-selector.dyn-ro .rel-sel-dropdown { display: none !important; }
.dyn-rel-selector.dyn-ro .rel-sel-valgte { pointer-events: none; }

/* Land-vælger: lås dropdown. */
.dyn-land-selector.dyn-ro .land-sel-vis { pointer-events: none; opacity: .85; }
.dyn-land-selector.dyn-ro .land-sel-dropdown { display: none !important; }

/* Embedded-lister (lazy-loadet i en read-only formular): skjul opret/rediger-
   formular + række-handlinger, bevar selve listen som visning. */
.dp-fane-wrap.dyn-readonly .dyn-emb-form,
.dp-fane-wrap.dyn-readonly .dyn-emb-ikonbtn { display: none !important; }

/* ══ Detail-panel: responsivt slide-in-layout (container queries) ════════════
   Panelet er resizable → layoutet skal reagere på PANELETS EGEN bredde, ikke
   viewportens. #detail-panel-content følger panelets bredde (flex:1 i kolonne-
   flex med JS-sat bredde på #detail-panel-inner) og gøres derfor til query-
   container. KUN desktop: på mobile er panelet fuldskærm og .dp-fane-actions
   er position:fixed — layout-containment (som container-type medfører) ville
   "fange" den fixed-bar. Fra 769px findes ingen fixed descendants i panelet,
   så det er sikkert. Mobile beholder de eksisterende viewport-media-queries
   (label over + 1 kolonne), hvilket matcher fuldskærms-panelets smalle bredde. */
@media (min-width: 769px) {
    #detail-panel-content {
        container-type: inline-size;
        container-name: dp;
    }
}

/* (1b) 2→1 kolonne ved 500px PANELbredde. #detail-panel-content-prefixet giver
   højere specificitet end den globale @media(max-width:768px){.cms-2col}-regel,
   så panelets egen bredde vinder inde i panelet (fx bred tablet i fuldskærm). */
@container dp (max-width: 499.98px) {
    #detail-panel-content .cms-2col { grid-template-columns: 1fr; gap: 0; }
}
@container dp (min-width: 500px) {
    #detail-panel-content .cms-2col { grid-template-columns: 1fr 1fr; gap: 0 40px; }
}

/* (1a) Label til VENSTRE for feltet ved ≥800px PANELbredde (sparer højde).
   Under 800px falder .form-row tilbage til default (label over feltet).
   Label = fast kolonne (kolonne 1); input/widget + hjælpetekst = kolonne 2,
   så required-stjerne (i label) og .field-hint følger pænt med. */
@container dp (min-width: 800px) {
    .form-row {
        display: grid;
        grid-template-columns: 170px 1fr;
        column-gap: 15px;
        align-items: start;
    }
    .form-row > label {
        grid-column: 1;
        margin-bottom: 0;
        padding-top: 6px;      /* flugter med input-teksten på række 1 */
        line-height: 1.3;
        text-align: right;     /* labels højrestillet → tæt på stregen (15px) */
    }
    /* Alt der ikke er label (input, textarea, select, widget-div, .field-hint)
       tvinges i kolonne 2 og stables i rækker → hint havner under inputtet. */
    .form-row > *:not(label) { grid-column: 2; }
}

/* (2) Read-only felter som LINJER (kun i kun-læse-tilstand): fjern kasse-
   border + baggrund, behold en tynd underlinje. Værdien er stadig tydeligt
   læsbar; fanen bliver lettere at scanne og signalerer "kan ikke tastes i".
   Widgets (foto/relation/land) røres ikke — de har egne .dyn-ro-regler. */
.dp-fane-wrap.dyn-readonly .form-row input[type=text],
.dp-fane-wrap.dyn-readonly .form-row input[type=email],
.dp-fane-wrap.dyn-readonly .form-row input[type=number],
.dp-fane-wrap.dyn-readonly .form-row input[type=date],
.dp-fane-wrap.dyn-readonly .form-row input[type=datetime-local],
.dp-fane-wrap.dyn-readonly .form-row textarea,
.dp-fane-wrap.dyn-readonly .form-row select {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}
.dp-fane-wrap.dyn-readonly .form-row textarea { resize: none; }