:root {
    --primary: #FCBD30;
    --primary-hover: #f1b121;
    --light: #F7E6C6;
    --panel-bg: rgba(0,0,0,0.8);
    --text-normal: #7B725D;
    --bg-normal: #7B725D;
    --bg-normal-hover: #655c46;
    --bg-danger: #bd0101;
    --bg-danger-hover: #ea0000;
    --link-normal: #7B725D;
    --link-normal-hover: #545048;
    --link-dark: #c3d6f3;
    --link-dark-hover: #aae8d5;
}


body.roi {
    /* display: grid; */
    /*align-items: center;*/
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: ContiStagSans;
    overflow: scroll;
}

#iframe-roi {
    width: 100%;
    height: 100%;
    border: none;
}

.iframe-wrap {
    max-width: 1000px;
    height: 90vh;
    margin: 0 auto;
    display: grid;
    padding: 0 !important;
}















/* =========================================================================
   ROI BACKEND / ADMIN STYLES
   ========================================================================= */

.responsive_content .dashicons {
    width: 28px;
    height: 28px;
    font-size: 28px;
}

.roi #wpcontent {
    padding-left: 0px;
}

.roi-admin-wrap {
    margin: 20px 20px 0 0;
    max-width: 800px; /* Begrenzt die Breite für bessere Lesbarkeit */
}

.roi-admin-wrap h1 {
    margin-bottom: 25px;
}

.roi-admin-form p {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column; /* Zwingt Eingabefelder unter die Labels */
    align-items: flex-start;
}

.roi-admin-form label.roi-field-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #23282d;
    font-size: 14px;
}

/* Einheitliche Breite und Styling für alle Felder */
.roi-admin-form input[type="text"],
.roi-admin-form textarea {
    width: 100%;
    max-width: 600px; /* Verhindert, dass die Boxen zu breit werden */
    box-sizing: border-box;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.roi-admin-form input[type="text"]:focus,
.roi-admin-form textarea:focus {
    border-color: var(--link-normal, #2271b1);
    box-shadow: 0 0 0 1px var(--link-normal, #2271b1);
    outline: 2px solid transparent;
}

/* Die Container-Box für die Checkboxen */
.roi-category-section {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 20px;
    max-width: 600px;
    box-sizing: border-box;
    margin: 25px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.roi-category-section h3 {
    margin-top: 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f1;
    padding-bottom: 10px;
    font-size: 16px;
}

.roi-category-section p.description {
    margin-bottom: 15px;
    color: var(--bg-normal);
    font-style: normal;
}

.roi-category-section label {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    cursor: pointer;
}

.roi-category-section label input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: text-bottom;
}

/* Button-Leiste unten */
.roi-actions-wrapper {
    display: flex;
    gap: 12px;
    margin-top: 25px;
    align-items: center;
}

.roi-actions-wrapper .button {
    height: auto;
    padding: 6px 14px;
    line-height: 2;
    font-size: 13px;
}




/* Streckt die Registry-Tabelle auf 100% Fensterbreite */
.roi-admin-wrap {
    margin: 20px 20px 0 0;
    max-width: 100% !important; /* Entfernt die 800px Begrenzung für Tabellen */
}

.roi-admin-table {
    width: 100% !important;
    table-layout: fixed; /* Zwingt Spalten, sich an die Prozentangaben zu halten */
}


/* Textareas innerhalb der breiten Tabelle optimieren */
.roi-admin-table textarea {
    width: 100% !important;
    box-sizing: border-box;
    min-height: 60px;
    resize: vertical;
}


.roi-col-active { width: 50px; text-align: center; }
.roi-col-name { width: 15%; vertical-align: top; word-break: break-all; }
.roi-col-type { width: 130px; vertical-align: top; } /* Feste Breite für Radio-Buttons */
.roi-col-provider { width: 20%; vertical-align: top; } /* Platz für die Anbieter-Textarea */
.roi-col-descr { width: auto; vertical-align: top; } /* Nimmt den restlichen Platz ein */


#cpanel_front_version {
    height: auto;
    float: right;
}
















/* =========================================================================
   ROI CUSTOM SWEETALERT BUTTONS
   ========================================================================= */
.roi-swal-btn-container {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 15px !important;
}

/* Der graue Button (Abbrechen / Weiteren Punkt scannen) */
.roi-btn-swal-gray {
    background-color: var(--bg-normal) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
}
.roi-btn-swal-gray:hover {
    background-color: #5c5c5c !important;
}

/* Der gelb-orange Button (Ausführen / Zurück zum WP-Admin) */
.roi-btn-swal-orange {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
}
.roi-btn-swal-orange:hover {
    background-color: var(--primary-hover) !important;
}

/* Der rote Lösch-Button im Admin-Formular */
.button.roi-btn-admin-danger {
    background-color: var(--bg-danger) !important;
    border-color: var(--bg-danger-hover) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.2) !important;
}
.button.roi-btn-admin-danger:hover {
    background-color: var(--bg-danger) !important;
    border-color: var(--bg-danger-hover) !important;
    color: #fff !important;
}




















@media (max-width:564px) {


}