@import "status_icons.css";
@import "buttons.css";
@import "datatables.css";
@import "font_noto_sans.css";
@import "font_mulish.css";

:root {
    /* Basic */
    --success-green: #198754;
    --secondary-green: #00a991;
    --failed-red: #dc3545;
    --primary-blue: #0d6efd;
    --warning-orange: #ffc107;
    --light-gray: #a0aeba;
    --neutral-gray: #6c757d;
    --dark-gray: #51565C;
    --dark-gray-background: rgba(81,86, 92, .5);

    /* KSP Farben */
    --ksp-primary-blue-rgba: rgba(0, 0, 255,1);
    --ksp-primary-blue-hover-rgba: rgba(32, 32, 187, 1);
    
    --gray-100: #F9F9F9;
    --gray-200: #F1F1F4;
    --gray-300: #DBDFE9;
    --gray-400: #C4CADA;
    --gray-500: #99A1B7;
    --gray-600: #78829D;
    --gray-700: #4B5675;
    --gray-800: #252F4A;
    --gray-900: #071437;
    
}


.btn_contentCopy.copied {
    color: green;
    font-weight: bold;
}

.icon-success {
    color: green; /* Setzt die Icon-Farbe auf Grün */
}


/* set margin and padding */
* {
    margin: 0;
    padding: 0;
}


body {
    font-size: 14px;
    font-family: "Noto Sans";
    background: #F9F9F9;
}

/* Link styles */
a {
    text-decoration: none;
    color: var(--ksp-primary-blue-rgba);
}


.hidden {
    display: none;
}



.dropdown-menu {
    font-size: 12px;
}






/* Komponente Search */
#searchField:focus {
    outline: none;
    box-shadow: none;
    border-color: #DEE2E6;
}

#searchField {
    border-right: none;
}

.btn_clearSearchField,
.btn_moreFilter {
    border-right: none;
    border-left: none;
}

.searchBtn {
    border-left: none;
}

.btn_showMoreDetails {
    border-left: none;
}

.input-group-text {
    background-color: #ffffff !important;
    border: 0;
    color: gray;
}

.btn_clearSearchField::after {
    content: "";
    border-left: 1px solid #DEE2E6;
    height: 65%;
    margin-left: 10px;
}


/* Klasse um inputfelder auf die gleiche Größe */
.filterTextList {
    padding: .775rem 1rem !important;
}
/* /Komponente Search */


/* Input Group */
.input-group {
    border: 1px solid gray;
    border-radius: 4px;
}

.input-group .form-control {
    border: none !important;
    padding: .775rem 1rem !important;
    background-color: transparent;
}

.input-group .input-concatSpan {
    border: none !important;
    border-right: 1px solid gray !important;
    background-color: transparent;
    padding: .775rem 1rem !important;
}

/* Focus States */
.input-group:focus-within,
.input-group:has(input:focus) {
    border-color: var(--ksp-primary-blue-rgba) !important;
}

/* Form Control */
.form-control{
    color: var(--tb-gray-700) !important;
}

/* Form Control */
.form-control:disabled {
    background-color: var(--gray-200) !important;
}

.form-control:focus {
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--tb-primary-orange-rgba) !important;
}


/* Form Select */
.form-select.form-select-solid {
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
}
.form-select{
    border-color: var(--tb-gray-300) !important;
}
.form-select:focus {
    border-color: var(--techlister-orange) !important;
    outline: 0;
    box-shadow: none !important;
}



/* Button Änderungen */

.table .btn {
    padding: calc(.5rem + 1px) calc(1rem + 1px);
}


/* Card Styling */
.card-flush {
    box-shadow:0px 3px 4px 0px rgba(0, 0, 0, 0.03)!important;
    border-color:#F1F1F4 !important;
    border: 1px solid #F1F1F4 !important;
}











/* ========= MEDIA QUERIES ========= */

/* Größere Desktops (2000px und mehr) */
@media (min-width: 2000px) {
     
}

/* Sehr große Desktops (1900px und mehr) */
@media (min-width: 1900px) {
   
}

/* Große Desktops (1600px und mehr) */
@media (min-width: 1600px) {
  
}

/* XL Desktops (1400px und mehr) */
@media (min-width: 1400px) {
    .table-responsive {
        overflow-x: auto !important;
    }
}

/* Laptops und Desktops (992px und mehr) */
@media (min-width: 992px) {
   
}

/* Mediumgeräte (bis 1200px - Kleine Desktops) */
@media (max-width: 1200px) {
    .row {
        --bs-gutter-x: 0.5rem !important;
    }
}

/* Tablets und kleine Desktops (bis 991px) */
@media (max-width: 991px) {

}

/* Tablets und große Handys (bis 768px) */
@media (max-width: 768px) { 
}

/* Smartphones (bis 767px) */
@media (max-width: 767px) {

    
    #searchField {
        margin-bottom: 10px !important;
    }
  
}

/* Sehr kleine Geräte - Spezielle Anpassungen für Bootstrap 5 */
@media (max-width: 575px) {
    /* Hier können weitere Anpassungen für sehr kleine Geräte erfolgen */
}