/* 
TITLE: admin.janzeller.ch
AUTHOR: Jan Zeller
VERSION: 1.2
*/


/* RESET */
* {
    margin: 0;
    padding: 0;
    border: 0;
  }

:root {
    --lightgray: #F4F4F4;
    --orange: #FF7315;
    --darkgray: #3A3535;
    --lightblack: #232020;
    --white: #FFF;
    --black: #000;
}



/* TYPOGRAPHY + MAIN ELEMENTS -----------------------------------------------------------------------------*/
h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
}

h2 {
    font-weight: 900;
    margin-bottom: .5em;
}

h3 {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: .5em;
}

h4 {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: .5em;
}

p {
    font-weight: 300;
    margin-bottom: 1em;
}

a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}
b {
    font-weight: bold;
}
b.underline {
    border-bottom: 1px solid black;
}
b.green {
    color: green;
}


body {
    font-family: 'Inter', sans-serif;
    background-color: var(--lightgray);
}

header {
    height:50vh;
    background-color: var(--darkgray);
}

main {
    width: 800px;
    padding-top: 5em;
    margin: 0 auto;
}
main.wide {
    width: 1000px;
    padding-top: 5em;
    margin: 0 auto;
}

footer {
    background-color: var(--lightblack);
    margin-top: 5em;
    text-align: center;
    padding: 2em;
    color: var(--white);
    font-weight: 300;
}

/* NAVIGATION  ------------------------------------------------------------------------*/

nav {
    padding: 2em;
    display: flex;
    justify-content: space-between;
}

nav ul li, nav ul li {
    text-align: center;
    padding: 1em 1em;
    list-style-type: none;
    color: var(--white);
    text-transform: uppercase;
}

.logo {
    width: 60px;
}
.header {
    display: flex;
    justify-content: center;
    padding-top: 5em;
}
.header-home {
    display: flex;
    flex-direction: column;
    padding-top:5em;
    text-align: center;
}
.header-home h1 {
    font-size: 70px;
    color: var(--orange);
}
.header-home p {
    color: var(--white);
    font-size: 18px;
}

/* NAVIGATION -----------------------------------------------------------------*/
        /* Dropdown styles */

        .dropdown {
            width:130px;
        }
        
        .dropdown-btn {
            background: var(--lightblack);
            font-size: 18px;
            width: 100%;
            height: 30px;
            border: none;
            color: #fff;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            border-radius: 1.5em;
            cursor: pointer;
            
        }
        
        .dropdown-content {
            list-style: none;
            position: absolute;
            top: 4.4em;
            width: 130px;
            right:2em;
            padding-top:20px;
            background-color: var(--lightblack);
            visibility: hidden;
            overflow: hidden;
            transform: translateY(-.2em);
            transition: transform ease 0.3s;
            border-radius: 0 0 30px 30px;
            
        }
        
        input[type="checkbox"]:checked ~ .dropdown-content {
            visibility: visible;
            transform: translateY(0em);
        }
        
        div.dropdown input[type="checkbox"] {
            opacity: 0;
            position: absolute;
        }

        li.text {
            text-transform: none;
            
        }
        li.logout:hover {
            background-color: var(--lightgray);
        }
        li.logout a {
            display: flex;
            align-items: center;
            color: var(--orange);
            font-weight: 700;
        }
                            

/* COMPONENTS LIKE BUTTONS CARDS ETC ---------------------------------------------- */
.card {
    background-color: var(--white);
    border-radius: 30px;
    padding: 2em;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
    div.card-home {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap: 1em;
        align-items: center;
        justify-items: center;
        
    }
    a.card-item {
        background-color: var(--white);
        border-radius: 15px;
        width: 100%;
        height:100%;
        text-align: center;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
            a.card-item:hover {
                background-color: var(--darkgray);
                color: var(--orange);
            }
            a.card-item div {
                padding: 2em;
            }
            a.card-item div p {
                font-weight: 400;
                padding-top: 2em;
                margin-bottom: 0em;
            }
            a.card-item div .feather-home {
                width: 70px;
                height: 70px;
            }

.button {
    background-color: var(--orange);
    padding: .8em 1.6em;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: var(--white);
    cursor: pointer;
}

.button-back {
    background-color: var(--darkgray);
    padding: .8em 1.6em;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: var(--white);
    cursor: pointer;
}




/* LOGIN.PHP -----------------------------------------------------------------*/
/* Wrapper for login */
main.login {
    width: 600px;
}

label {
    font-weight: 300;
    font-size: 16px;
    padding:.75em 0em;
}
input {
    background-color: var(--lightgray);
    border-radius: 30px;
    padding: 1em 1.5em;
    /* padding-left: 2em; */
    font-family: 'Inter', sans-serif;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 1px solid #23202008;
    max-width: 200px;
}

/* .form-control:focus-visible, .form-control:active{
    outline: none;    
} */
input:focus-visible {
    outline: none;
}
.alert.alert-danger {
    padding: 1em 1.5em;
    background-color: rgb(255, 163, 163);
    color: rgb(182, 0, 0);
    border-radius: 30px;
    margin-top: 2em;
}
input.submit {
    margin-top: 1em;
}
form div.form-field {
    padding-bottom: 1em;
    display: flex;
    flex-direction: column;
}
form div.form-field:nth-of-type(1) {
    padding-right: 1em;
}
form div.form {
    display: flex;
    justify-content: space-between;
    width: 450px;
}

footer p.footer {
    margin: 0;
}

/* ADD .PHP -------------------------------------------------------------*/
.header h1 {
    display: flex;
    align-items: center;
    color: var(--orange);
    font-size: 50px;
}
h1 .feather-head {
    height: 65px;
    width:auto;
    color: var(--orange);
}

form#neu .form-neu {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: auto;
    gap: 2em;
    margin-bottom: 2em;
}
form#neu .form-neu div {
    display: flex;
    flex-direction: column;
}
form#neu .form-neu div:nth-of-type(2) {
    display:grid;
    justify-self: center;
}
form#neu .form-neu div:last-of-type {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 3; 
}
form#neu .form-neu div input, textarea, select {
    background-color: var(--lightgray);
    border-radius: 30px;
    padding: 1em 1.5em;
    
    font-family: 'Inter', sans-serif;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 1px solid #23202008;
}
form#neu .form-neu div input#anzst {
    max-width: 80px;
}
form#neu a.button-back {
    grid-row-start: 3;
    max-width: 70px;
}
form#neu input.button {
    max-width: 125px;
}
/* TABLE STYLE */
table.eintragen {
    border-collapse: collapse;
    width: 100%;
    color: var(--lightblack);
    text-align: left;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 5em;
}
table.eintragen th {
    background-color: var(--darkgray);
    color: var(--orange);
    padding: 1em;
    border-bottom: 1px solid #ccc;
}
table.eintragen td {
    padding: 1em;
}
div.card div.card-eintragen2 {
    padding-bottom: .8em;
}
h3.title-icon {
    display: flex;
    align-items: center;
}
.feather-small {
    width: 35px;
    height: 35px;
    stroke-width: 3;
    padding-right: .5em;
    color: green;
}
.feather-small-red {
    color: red;
    width: 35px;
    height: 35px;
    stroke-width: 3;
    padding-right: .5em;
}

/* VIEW .php ----------------------------------------------------------------- */
.feather-red {
    color: red;
    width: 20px;
    height: 20px;
    stroke-width: 2;
}
.feather-green {
    color: green;
    width: 20px;
    height: 20px;
    stroke-width: 2;
}
/* TABLE STYLE */
table.ansehen {
    border-collapse: collapse;
    width: 100%;
    color: var(--lightblack);
    text-align: left;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 3em;
}
table.ansehen th {
    background-color: var(--darkgray);
    color: var(--orange);
    padding: 1em;
    border-bottom: 1px solid #ccc;
}
table.ansehen td {
    padding: 1em;
}

div.archive {
    margin-top: 6em;
    opacity: .5;
    transition: 500ms;
}
div.archive:hover {
    opacity: 1;
}

/* PROJECTS.PHP ---------------------------------------------------------------- */
div.card-head.projects {
    margin-bottom: 1.5em;
}
div.card-head.projects h2 {
    margin-top: .5em;
}
button.button-select {
    background-color: var(--darkgray);
    color: var(--orange);
    border-radius: 30px;
    padding: 1em 1.5em;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 1px solid #23202008;
    cursor: pointer;
}
button.button-select.active, button.button-select:hover {
    background-color: var(--orange);
    color: var(--white);
}
div.card-head {
    display: flex;
    justify-content: space-between;
}
div.card-head h3, div.card-head div.button-top {
    margin: 0;
}
div.button-top {
    display: flex;
    margin-bottom: 2em;
    justify-content: flex-end;
}
div.button-top a {
    padding: .75em 1em;
    background-color: var(--lightgray);
    color: var(--lightblack);
    border: 1px solid #23202008;
    border-radius: 25px;
    display: flex;
    align-items: center;
}
.tabcontent {
    display: none;
    width: 100%;
    background-color: #F4F4F4;
    padding: 1em 2em;
    margin: 1em 0;
    border-radius: 20px;
}
#tab1 {
    display: block;
}
h3.two {
    margin-top: 2em;
}
table.projects {
    border-collapse: collapse;
    width: 100%;
    color: var(--lightblack);
    text-align: left;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 2em;
    background-color: var(--white);
}
table.projects th {
    background-color: var(--darkgray);
    color: var(--orange);
    padding: 1em;
    border-bottom: 1px solid #ccc;
}
table.projects td {
    padding: 1em;
}

/* PROJECTS ADD */
form#project .form-addproject {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: auto;
    gap: 2em;
    margin-bottom: 2em;
}
form#project .form-addproject div {
    display: flex;
    flex-direction: column;
}
form#project .form-addproject div input, textarea, select {
    background-color: var(--lightgray);
    border-radius: 30px;
    padding: 1em 1.5em;
    
    font-family: 'Inter', sans-serif;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 1px solid #23202008;
}

form#project a.button-back {
    grid-row-start: 3;
    max-width: 70px;
}
form#project input.button {
    max-width: 125px;
}
/* COMPANY.PHP --------------------------------------------------------------------------------------------*/
table.company {
    border-collapse: collapse;
    width: 100%;
    color: var(--lightblack);
    text-align: left;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 2em;
    background-color: var(--white);
}
table.company th {
    background-color: var(--darkgray);
    color: var(--orange);
    padding: 1em;
    border-bottom: 1px solid #ccc;
}
table.company td {
    padding: 1em;
}
tbody tr:nth-child(even) {
    background-color: #cccccc25;
}

form#company .form-addproject {
    display: flex;
    gap: 2em;
    margin-bottom: 2em;
}
/* USER.PHP -------------------------------------------------------------------------*/
div.form-edituser {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: auto;
    gap: 2em;
    margin-bottom: 2em;
}
form#edit .form-edituser div input, textarea, select {
    background-color: var(--lightgray);
    border-radius: 30px;
    padding: 1em 1.5em;
    
    font-family: 'Inter', sans-serif;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 1px solid #23202008;
}
form#edit .form-edituser div {
    display: flex;
    flex-direction: column;
}
label.switch {
    padding: 0;
    margin-top: 5px;
}
.switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}
.switch input {
    display:none;  
}
.slider {
    background-color: var(--darkgray);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}
.slider:before {
    background-color: var(--lightgray);
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
}
input:checked + .slider {
    background-color: var(--orange);
}
input:checked + .slider:before {
    transform: translateX(26px);
}
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
div.switchdiv span {
    font-weight: 300;
    font-size: 16px;
    padding: .75em 0em;
}

/* FINANCES.PHP --------------------------------------------------------------------- */
/* ACCORDION */
    /* Hidden input */
  input.input-fin {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
  /* Layout */
  .row {
    display: flex;
  }
  .row .col {
    flex: 1;
  }
  .row .col:last-child {
    margin-left: 1em;
  }
  /* Tabs */
  .tabs {
    border-radius: 25px;
    overflow: hidden;
    /* box-shadow: rgba(167, 167, 167, 0.2) 0px 7px 29px 0px; */
    border: 1px solid #23202008;
    margin-bottom: 1em;
  }
  .tab {
    width: 100%;
    color: var(--orange);
    overflow: hidden;
  }
  .tab-label {
    display: flex;
    justify-content: space-between;
    padding: 1.25em;
    background-color: var(--lightgray);
    font-weight: 700;
    cursor: pointer;
  }
  .tab-label:hover {
    background-color: var(--darkgray);
  }
  .tab-label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.2s;
  }
  .tab-content {
    max-height: 0;
    padding: 0 1em;
    color: black;
    background-color: var(--lightgray);
    transition: all 0.2s;
  }
  
  /* Styling for checked inputs */
  input:checked + .tab-label {
    color: var(--orange);
    background-color: var(--darkgray);
  }
  input:checked ~ .tab-content {
    max-height: 100vh;
    padding: 2em;
  }
  input:checked + .tab-label::after {
    transform: rotate(90deg);
  }  

table.finances {
    border-collapse: collapse;
    width: 100%;
    color: var(--lightblack);
    text-align: left;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 2em;
    background-color: var(--white);
    margin-top: 1em;
}
table.finances th {
    background-color: var(--lightgray);
    color: var(--orange);
    padding: .75em;
}
table.finances td {
    padding: 1em;
}
tbody tr:nth-child(even) {
    background-color: #cccccc25;
}

table.abrechnung {
    border-collapse: collapse;
    color: var(--lightblack);
    text-align: left;
    overflow: hidden;
    margin-top: 1em;
}
table.abrechnung th {
    color: var(--lightblack);
    padding: 0em 1em;
}
table.abrechnung th:first-of-type {
    padding: 0em;
}
table.abrechnung td {
    padding: 0.5em 1em;
    color: var(--orange);
    font-weight: 700;
}
table.abrechnung td:first-of-type {
    padding: 0em;
}
table.abrechnung td:last-of-type {
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
table.abrechnung td.green {
    color: green;
}
table.abrechnung td.red {
    color: red;
}


/*-------------------------- MOBILE STYLES (SMALLER THAN 875px) ------------------------- */
@media screen and (max-width: 875px) {
    header h1 {
        line-height: 1;
        margin-bottom: 25px;
    }
    
    
    div.card-home {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    main.login {
        width: 85%;
    }

    main {
        width: 80%;
    }

    .header-home {
        width: 80%;
        margin: 0 auto;
        padding-top: 2em;
    }

    /*  COMPANY.php */
    .button-top {
        flex-direction: column;
    }

    .button-top a {
        max-width: fit-content;
    }


}



/*-------------------------- MOBILE STYLES (SMALLER THAN 600px) ------------------------- */
@media screen and (max-width: 600px) {

    /* GENERAL */
    header h1 {
        font-size: 40px;
    }

    main {
        width: 90%;
    }


    /* LOGIN.PHP */
    form div.form {
        flex-direction: column;
    }


    /* STARTSEITE  */
    .header-home h1 {
        font-size: 50px;
    }

    .header-home p {
        font-size: 16px;
    }
    

    
    div.card-home {
        display: grid;
        grid-template-columns: 1fr;
    }

    /* ADD.PHP */
    form#neu .form-neu {
        display: flex;
        flex-direction: column;
    }


    /* COMPANY.PHP */
    div.card-head.projects {
        flex-direction: column;
    }

    .tablinks.button-select {
        margin-bottom: 1em;
    }
    .tablinks.button-select:first-of-type {
        margin-top: 1em;
    }


    /* PROJECTS.php */
    .tabcontent {
        background-color: unset;
        padding: 0;
    }


    form#project .form-addproject, div.form-edituser {
        grid-template-columns: 1fr;
    }
    
}