/* ==========================================================
   Configure Variables
   ========================================================== */


/* ==========================================================
   Schriftarten
   ========================================================== */

@font-face {

    font-family: 'Open Sans';

    src: url('../../fonts/open-sans-v17-latin-regular.woff2')
         format('woff2');

    font-weight: 400;

    font-style: normal;

}


@font-face {

    font-family: 'Open Sans';

    src: url('../../fonts/open-sans-v17-latin-bold.woff2')
         format('woff2');

    font-weight: 700;

    font-style: normal;

}



.cv-container,
.cv-container input,
.cv-container select,
.cv-container textarea,
.cv-container button {

    font-family:'Open Sans', Arial, sans-serif;

}



/* ==========================================================
   Container
   ========================================================== */


.cv-container {

    width:100%;

    margin:20px 0;

}



.cv-card {

    background:#ffffff;

    border-radius:8px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:0 2px 8px rgba(0,0,0,0.08);

}



/* ==========================================================
   Header
   ========================================================== */


.cv-card h2 {

    margin:0 0 20px 0;

    font-size:24px;

}



.cv-header-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}



/* ==========================================================
   Auswahl Verwaltung
   ========================================================== */


.cv-selection-row {

    display:flex;

    gap:40px;

    align-items:flex-end;

    flex-wrap:wrap;

}



.cv-selection-group {

    display:flex;

    flex-direction:column;

    gap:8px;

}



.cv-selection-group label,
.cv-form-group label {

    font-weight:600;

}



.cv-inline {

    display:flex;

    align-items:center;

    gap:10px;

}



.cv-inline form {

    margin:0;

}



.cv-inline select,
.cv-selection-group select {

    min-width:220px;

    height:38px;

    padding:0 12px;

    border:1px solid #dcdcdc;

    border-radius:4px;

    background:#ffffff;

}



/* ==========================================================
   Buttons
   ========================================================== */


.cv-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;


    min-width:95px;

    height:36px;


    padding:0 15px;


    border:0;

    border-radius:4px;


    cursor:pointer;


    font-size:14px;


    text-decoration:none !important;

}



.cv-button:hover {

    opacity:.85;

}



.cv-button-primary,
.cv-button-edit {

    background:#65bc7b;

    color:#ffffff !important;

}



.cv-button-delete {

    background:#d9534f;

    color:#ffffff !important;

}



.cv-button-secondary {

    background:#777777;

    color:#ffffff !important;

}



/* ==========================================================
   Variable Formular
   ========================================================== */


.cv-variable-form {

    background:#f8f8f8;

    border:1px solid #e1e1e1;

    border-radius:6px;

    padding:20px;

    margin-bottom:25px;

}



.cv-form-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}



.cv-form-group {

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:15px;

}



.cv-form-group input,
.cv-form-group textarea,
.cv-form-group select {

    width:100%;

    box-sizing:border-box;


    padding:10px;


    border:1px solid #dcdcdc;

    border-radius:4px;


    font-size:14px;

}



.cv-form-group textarea {

    min-height:80px;

    resize:vertical;

}



.cv-form-buttons {

    display:flex;

    gap:10px;

}



/* ==========================================================
   Tabelle
   ========================================================== */


.cv-table {

    width:100%;

    border-collapse:collapse;

    font-size:14px;

}



.cv-table th {

    padding:12px;

    text-align:left;

    background:#eeeeee;

    font-weight:600;

}



.cv-table td {

    padding:12px;

    vertical-align:top;

}



.cv-table tbody tr:nth-child(odd) {

    background:#ffffff;

}



.cv-table tbody tr:nth-child(even) {

    background:#f5f5f5;

}



.cv-table tbody tr:hover {

    background:#eaf3ff;

}



/* ==========================================================
   Aktionen
   ========================================================== */


.cv-actions {

    white-space:nowrap;

}



.cv-actions .cv-button {

    margin-right:6px;

}



/* ==========================================================
   Dokumentationsfilter
   ========================================================== */


.cv-documentation-filter {

    background:#f3f6fa;

    border:1px solid #d5dce5;

    border-radius:12px;

    padding:25px;

    margin-bottom:25px;

}



.cv-documentation-filter h2 {

    margin-top:0;

    margin-bottom:25px;

}



.cv-documentation-filter h3 {

    margin:25px 0 10px;

    color:#1f2937;

    font-size:18px;

}
/* ==========================================================
   Tool / Version Auswahl Dokumentation
   ========================================================== */


.cv-tool-selection {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;

    margin-top:15px;

}



.cv-tool-box {

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    min-height:55px;

    box-sizing:border-box;

    background:#ffffff;

    border:1px solid #d8dee8;

    border-radius:10px;

}



.cv-tool-box:hover {

    border-color:#2271b1;

    box-shadow:0 3px 8px rgba(0,0,0,.08);

}



.cv-tool-name {

    display:flex;

    align-items:center;

    gap:8px;

    white-space:nowrap;

    font-size:14px;

}



.cv-tool-name input {

    margin:0;

}



.cv-version-select {

    flex:1;

    min-width:120px;

}



.cv-tool-box select {

    width:120px;

    height:34px;

    padding:0 8px;

    border:1px solid #ccd5df;

    border-radius:6px;

    background:#ffffff;

    font-family:'Open Sans', Arial, sans-serif;

    font-size:14px;

}




/* ==========================================================
   Button neueste Version
   ========================================================== */


.cv-latest-button {

    margin-bottom:20px;

}



/* ==========================================================
   Kategorie und Status Filter Bereich
   ========================================================== */


.cv-filter-row {

    display:grid;

    grid-template-columns:3fr 1fr;

    gap:40px;

    align-items:start;

}



.cv-category-filter h3,
.cv-status-filter h3 {

    margin-top:0;

}



/* ==========================================================
   Kategorie Auswahl
   ========================================================== */


.cv-category-selection {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

    margin-top:15px;

}



.cv-category-box {

    background:#ffffff;
    border:1px solid #d8dee8;
    border-radius:10px;
    padding:12px 15px;
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition:.2s;
}



.cv-category-box:hover {

    border-color:#2271b1;
    box-shadow:0 3px 8px rgba(0,0,0,.08);
}



.cv-category-box input {

    margin:0;

}



.cv-category-box span,
.cv-category-box strong {

    font-size:14px;

}



.cv-category-box.cv-checkbox-all {

    background:#2271b1;

    color:#ffffff;

    border-color:#2271b1;

}



/* ==========================================================
   Änderungen NEW / IMPROVED
   ========================================================== */


.cv-status-selection {

    display:flex;
    flex-direction:column;
    gap:15px;
    margin-top:15px;

}

.cv-status-selection label {

    display:flex;
    align-items:center;
    gap:8px;
    background:#ffffff;
    border:1px solid #d8dee8;
    border-radius:10px;
    padding:11px 14px;
    cursor:pointer;
    transition:.2s;
}



.cv-status-selection label:hover {

    border-color:#2271b1;
    box-shadow:0 3px 8px rgba(0,0,0,.08);
}



.cv-status-selection input {

    margin:0;

}



/* ==========================================================
   Freitext Suche
   ========================================================== */


.cv-search-box {

    margin-top:10px;

}



.cv-search-box input[type="text"] {

    width:100%;


    padding:12px;


    border:1px solid #ccd5df;


    border-radius:8px;


    font-size:15px;


    box-sizing:border-box;

}



/* ==========================================================
   Filter Buttons
   ========================================================== */


.cv-filter-buttons {

    display:flex;

    gap:10px;

    margin-top:25px;

}

/* ==========================================================
   Dokumentation Tabelle
   ========================================================== */


.cv-documentation-table {

    width:100%;

}



.cv-documentation-table th:nth-child(1) {

    width:120px;

}



.cv-documentation-table th:nth-child(2) {

    width:220px;

}



.cv-documentation-table th:nth-child(3) {

    width:160px;

}



.cv-documentation-table th:nth-child(5) {

    width:120px;

}



.cv-documentation-table th:nth-child(6) {

    width:120px;

}



.cv-since-version {

    white-space:nowrap;

}



/* ==========================================================
   Deprecated Variablen
   ========================================================== */


.cv-variable-deprecated {

    background:#eeeeee !important;

    opacity:.55;

}



.cv-variable-deprecated td {

    color:#666666;

}



/* ==========================================================
   Status Anzeige
   ========================================================== */


.cv-status {

    display:inline-block;

    padding:4px 10px;

    border-radius:12px;

    font-size:12px;

    font-weight:bold;

    text-transform:uppercase;

}



.cv-status-new {

    background:#d1fae5;

    color:#065f46;

}



.cv-status-improved {

    background:#dbeafe;

    color:#1e40af;

}



.cv-status-deprecated {

    background:#e5e7eb;

    color:#374151;

}



/* ==========================================================
   Leere Tabellen
   ========================================================== */


.cv-empty {

    padding:25px;

    text-align:center;

    color:#777777;

}



/* ==========================================================
   Responsive
   ========================================================== */


@media(max-width:1200px){


    .cv-tool-selection {

        grid-template-columns:repeat(2,1fr);

    }


    .cv-category-selection {

        grid-template-columns:repeat(3,1fr);

    }


}



@media(max-width:900px){


    .cv-filter-row {

        grid-template-columns:1fr;

    }


    .cv-tool-selection {

        grid-template-columns:repeat(2,1fr);

    }


    .cv-category-selection {

        grid-template-columns:repeat(2,1fr);

    }


    .cv-form-grid {

        grid-template-columns:1fr;

    }


    .cv-table {

        display:block;

        overflow-x:auto;

    }


}



@media(max-width:600px){


    .cv-tool-selection {

        grid-template-columns:1fr;

    }



    .cv-category-selection {

        grid-template-columns:1fr;

    }



    .cv-header-row {

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }



    .cv-filter-buttons {

        flex-direction:column;

    }



    .cv-button {

        width:100%;

    }


}