/**
 * Global style definitions
*/

:root {
    --dark-blue:#96B3FF;
    --vibrant-blue:#97E3FF;
    --cm-green:#44E5A0;
    --cm-yellow:#FFF675;
    --violet:#A98CFF;
    --violet-layer: rgba(169,140,255,0.7);
    --pale-blue:#CAD8FF;

    --button-radius:10px;
    --widget-radius:15px;
    --input-radius:10px;

    --p-normal: 16px;
    --p-small: 12px;
    --p-large: 18px;

    --basic-padding:10px;
    --wide-padding:20px;
    --extra-wide-padding:40px;
    --basic-margin:10px;
    --wide-margin:20px;

    --basic-gap:20px;

}

/*für Geräter größer als 720 px*/
@media screen and (min-width: 720px) {
    :root {   
        --basic-gap:20px;
    }

}
    
/*für Geräter größer als 1140px*/
@media screen and (min-width:1140px) {
    :root {   
        --basic-gap:40px;
    }
    
}
 
@font-face {
    font-family: inter-regular;
    src: url(/frontend/assets/fonts/Inter-VariableFont_opsz,wght.ttf);
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, label, strong, div, span, textarea{
    font-family: inter-regular, Arial, Helvetica,sans-serif;
    font-weight: 500;
}

h1,h2,h3,h4,h5,h6{
    align-items:baseline;
    margin: 0;
}

h1{
    font-size: 22px;
    color: var(--dark-blue);
}

h2{
    margin-top: 0px;
    font-size: 20px;
}

h3{
    font-size: 18px;
}

h4{
    font-size: 16px;
}

h5{
    font-size: 16px;
}

.icon {
    width: 26px;
    height: 26px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.icon:hover {
    opacity: 0.8;
}

@media screen and (min-width: 720px) {
    h1{
        font-size: 28px;
    }

    h2{
        margin-top: 0px;
        font-size: 24px;
    }

    h3{
        font-size: 22px;
    }

    h4{
        font-size: 20px;
    }

    h5{
        font-size: 18px;
    }

    .icon {
        width: 30px;
        height: 30px;

    }
    

}


input, textarea, select{
    padding: var(--basic-padding);
    border-radius: var(--input-radius);
    margin-top: var(--basic-margin);
    width: 95%;
    background-color: var(--pale-blue);
    color: black;
    border-color: var(--dark-blue);
    margin-bottom: 20px;
    outline: none;
	border: none;
	border-radius: var(--input-radius);
 
    

}

input:focus, textarea:focus, select:focus{
    border-color:var(--vibrant-blue);
    border-width: 2px;
    border-style:solid;

}

input:valid, textarea:valid, select:valid, input:user-valid, textarea:user-valid, select:user-valid{
    background-color: var(--pale-blue);
}


select{
    width: 98%;
}


button{
    height: 36px;
    font-size: 16px;
    border: none;
    border-radius: var(--button-radius);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.basic-button{
    background-color: var(--violet);
    color: white;
    margin-top: 20px;
    width: 120px;
}

.basic-button-blue{
    background-color: var(--dark-blue);
    color: white;
    margin-top: 20px;
    width: 120px;
}

.icon-button{
    width: 150px;
}

.header-div{
    padding: 20px;
    background-color: var(--violet);
}

.wrapper{
    padding: 10px;
}

.project-wrapper{  
    padding: 20px 0px 0px 0px;
}

.kanban-wrapper{
    padding: 20px;
    background-color: #fff;
    border-radius: var(--widget-radius);
}


@media screen and (min-width: 720px) {
    .kanban-wrapper{
        padding: var(--wide-padding);
    }
    .header-div{
        padding: var(--wide-padding);
    }
    

}
    
/*für Geräter größer als 1140px*/
@media screen and (min-width:1140px) {
    .kanban-wrapper{
        padding: var(--extra-wide-padding);
    }
    .header-div{
        padding: var(--extra-wide-padding);
    }
    
}


.white{
    color: #ffffff;
}

.dark-blue{
    color: var(--dark-blue);
}

.center{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.row-space-between{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.overlay{
    display: flex;
    justify-content: center;  /* Zentriert den Inhalt horizontal */
    align-items: center;      /* Zentriert den Inhalt vertikal */
}

.overlay:before {
	content: "";
    position: absolute;
	top: 0;
	left: 0;
	right: 0;
    height:100vh;
	background: var(--violet-layer);
	z-index: 2;
}


.card-join-project{
    position: absolute;
    top: 20%;
	margin: auto;
	background-color: #fff;
	height: fit-content;
	width: 90%;
    border-radius: 15px;
    text-align: center;
    z-index: 3;
    padding: var(--extra-wide-padding) var(--wide-padding);
}

.header-join-project{
    display: flex;
    flex-direction: row;
    justify-content:end;
    margin-bottom: var(--wide-margin);
}

.card-dialog{
    position: absolute;
	top: 5%;
    bottom: 5%;
    width: fit-content;
	right: auto;
	z-index: 3;
	padding: 50px;
	border-radius: var(--input-radius);
	background-color: #fff;
	height: fit-content;
}



/*für Geräter größer als 480px*/
@media screen and (min-width: 480px) {
    .card-join-project{
        width: 480px;
    }
    
    .card-dialog{
        width: 480px;
    }
    
}


.card-join-project input {
    width: 90% ;
    margin: auto;
	background-color: var(--pale-blue);
	color: black;
    border-radius: var(--input-radius);
    margin-bottom: 20px;
}


.header-dialog{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: var(--extra-wide-padding);
}

.header-dialog h2{
    color: black;
    font-size: 20px;
}

.dialog-title{
    color: black;
    font-size: 20px;
}

.card-dialog p{
    color: #96B3FF;
    font-size: 16px;
    margin: 0;
}

.input-wrapper{
    width: 100%;
    text-align: left
}


.submit-button{
    border: none;
	border-radius: var(--button-radius);
	cursor: pointer;
    padding: 10px 20px;
}


.page-wrapper-login, .page-wrapper-register{
	background-color:white;
	width: 100%;
	height:100%; 
	margin: 0;
	max-width: 300px; 
	margin: 50px auto;
	text-align: center 
}


.login-input{
	width: 100%;
	text-align: center; 
	color: #000; 
    margin-bottom: 0px;
    
}

.login-button{
	background-color: var(--violet);
	color: white;
}

.register-button{
	background-color: var(--dark-blue);
	color: white;
}

#button-row-login{
    display: flex;
    justify-content: space-evenly; 
    align-items: center;
    line-height: 40px
}

.text-field{
    background-color: #fff;
    color: #000;
    border-radius: var(--widget-radius);
    padding: var(--wide-padding);
}

/* Style for index.tsx */
.headline-container {
    display: flex;
    justify-content: left; /* Zentriert das gesamte Element */
    margin: 24px;
}

.headline-icon-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px; /* Abstand zwischen Titel und Icon */
}

.overview-button-wrapper {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center; /* Stellt sicher, dass das Icon vertikal zentriert ist */
}

.overview-icon {
    width: 26px;
    height: 26px;
}

/* projectOverview.css */
.project-overview {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Stellt sicher, dass der Inhalt die volle Höhe einnimmt */
    padding: 16px;
    background-color: white;
    padding-bottom: 60px; /* Platz für die fixe NavBar */
}

.project-list {
    align-items: stretch; /* Alle Karten gleich hoch */
}

.project-card {
    min-height: 200px; /* Setzt eine Mindesthöhe, damit alle Karten gleich hoch sind */
}

.project-list {
    background-color: #f5f7ff;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 35px;
    justify-content: center; /* Karten zentrieren */
    align-items: stretch; 
   
}

 .project-card {
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1; /* Alle Karten gleich breit */
    flex-basis: calc(33.333% - 16px); /* 3 Karten pro Reihe, mit Abstand */
    max-width: 400px; /* Verhindert, dass eine Karte zu groß wird */
    min-width: 300px;
} 
.project-card.color-0 {
    background-color: #44e5a0; /* Grün */
}

.project-card.color-1 {
    background-color: #A98cff; /* Lila */
}

.project-card.color-2 {
    background-color: #FFF675; /* Gelb */
}


.project-details div {
    margin: 8px 0;
    font-size: 0.8rem;
}


.project-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: left;
}

.hidden {
    display: none; /* Versteckt den Timer */
}
.visible {
    display: block; /* Zeigt den Timer */
}

/*START Progress-bar*/
.progress-container {
    width: 95%;         
    padding: var(--basic-padding);
    margin: var(--basic-margin);

  }
  
  .progress-bar {
    width: 100%;
    height: 20px;
    background: #fff;;
    border-radius: 9999px;
    /*overflow: hidden;*/
    border: 2px solid #fff;
  }
  
  .progress-fill {
    height: 100%;
    background: var(--cm-green);
    border-radius: 9999px;
    transition: width 300ms;
  }
  
  .progress-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #000;
  }
  /*END-Progress-Bar*/