:root {
    --lightGreen: #009e3c;
    --softDarkGreen: #7a9385;
    --darkGreen: #005541;
    --darkerGreen: #004837;
    --veryTransparent: #ffffff0f;
    --lightGray: #aaa;
    --darkerLightGray: #9c9b9b;
    --yellow: #ffdc00;
    --red: #e60000;
    --button-red: #e74c3c;
    --white: #fff;
    --black: #000;
    --gray: #f1f1f1;
    --darkGray: #919191;
    --veryDarkGray: #5c5c5c;
    --light-orange: #e7863c;
    --orange: #f07c00;
    --closeToWhite: #f9f9f9;
    --goldenyellow: #ffc857;
    --coral: #e9724c;
    --steelBlue: #5e89a1;
    --lavender: #9b7eba;
    --darkestGray: #444444;
    --lightestGray: #f5f5f5;
    --lightDarkGreen: #33776a;
    --lighterDarkGreen: #7fb9ae;
    --lightestDarkGreen: #c4e0db;
}

@font-face {
    font-family: 'CalibreLH';
    src: url("../fonts/CALIBRELH-HEADLINE.woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'CalibreLH';
    src: url("../fonts/CALIBRELH-REGULAR.woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'CalibreLH';
    src: url("../fonts/CALIBRELH-REGULAR.woff");
    font-weight: 300;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'CalibreLH';
    font-size: 0.9rem;
    /* font-size: clamp(1rem, .78125vw + .625rem, 1.125rem); */
}

header {
    grid-area: header;
    background-color: var(--darkGreen);
    color: var(--white);
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

body {
    display: grid;
    height: 100vh;
    grid-template-areas:
        "header"
        "content"
        "footer";
    grid-template-rows: 55px 1fr 30px;
    grid-template-columns: 1fr;
    overflow: hidden;
}

h1 {
    font-size: 1.75rem;
    display: contents;
}

h2 {
    font-size: 1.50rem;
    color: var(--darkGreen);
    display: contents;
}


h2 button {
    font-size: 1.50rem !important;
    color: var(--darkGreen) !important;
    display: contents;
}

h3 {
    font-size: 1.17rem;
    display: contents;
    color: var(--darkGreen);
}

small {
    font-size: 10px;
}

a {
    text-decoration: none;
    color: unset;
}


a:hover {
    text-decoration: underline;
}

.section-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--lightGray);
    align-items: center;
    padding-bottom: 5px;
    margin-bottom: 10px;
}


input {
    height: 32px;
    border-radius: 4px;
}


button:disabled {
    cursor:not-allowed;
}

.alert {
    background-color: var(--red) !important;
    color: var(--white) !important;
    border-color: var(--red) !important;
}

.alert h3 {
    color: var(--white);
}

.alert-text {
    color: var(--red);
}

.logo {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.5rem;
    margin-right: 30px;
}

.logo-img {
    height: 60px;
    filter: brightness(0) invert(1);
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img:hover {
    filter: brightness(1);
}

.header-menu {
    display: grid;
    grid-template-columns: 120px 120px 120px 120px 120px 120px 120px;
    margin-right: auto;
    margin-left: 10px;
    height: 55px;
    align-items: center;
}

.header-menu > div {
    height: 100%;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.header-menu > a {
    height: 100%;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.no-padding {
    padding: 0px !important;
}

.calculated-field {
    background-color: #f8f9fa;
    color: #6c757d;
}

.running-total {
    font-size: 0.8em;
    color: #666;
    margin-top: 2px;
}

.running-total::before {
    content: "∑ ";
    font-weight: bold;
}

.inform-running-total {
    display: none;
}

.header-menu > a:hover {
    text-decoration: none;
}

.header-menu > div:hover {
    background-color: var(--darkerGreen);
}

.header-menu li {
    margin-right: 20px;
    cursor: pointer;
}

.header-menu li:hover {
    color: #3498db;
}

.user-container {
    position: relative;
    margin-right: 20px;
}

.user-button {
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.user-icon {
    width: 30px;
    height: 30px;
    background-color: var(--closeToWhite);
    color: var(--darkGreen);
    border-radius: 50%;
    margin-right: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-icon:hover {
    background-color: var(--goldenyellow);
}

.user-submenu {
    position: absolute;
    top: 100%;
    right: 10px;
    width: 200px;
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    /* border-radius: 5px; */
    padding: 10px;
    display: none;
    z-index: 100;
    margin-top: 5px;
}

.user-submenu.active {
    display: block;
}

.pagination{
    display: flex;
    flex-direction: row;
    padding: 5px;
    align-items: center;
    justify-content: center;
}

.step-links {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.step-links .current {
    color: var(--darkGreen);
    font-weight: bold;
}

.step-links a{
    background-color: var(--darkGreen);
    color: var(--white);
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    padding: 2px;
    min-width: 20px;
    border-radius: 4px;
    text-align: center;
    padding-top: 0px;
}

.step-links a:hover{
    background-color: var(--darkerGreen);
    color: var(--white);
    text-decoration: none;
}

.b-column {
    border-right: 1px solid #000 !important;
    /* color: #005541; */
    font-weight: bolder !important;
}

.b-column-head {
    border-right: 1px solid #000 !important;
    /* color: #005541; */
    font-weight: bolder !important;
    text-align: center !important;
}

.user-info {
    padding: 10px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.logout-button {
    margin-top: 10px;
    padding: 8px 10px;
    background-color: var(--button-red);
    color: var(--white);
    border: none;
    /* border-radius: 5px; */
    cursor: pointer;
    width: 100%;
}

.menu-button {
    position: fixed;
    right: 20px;
    height: 30px;
    width: 30px;
    /* border-radius: 5px; */
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-button:hover {
    background-color: #ffffff0f;
}

.content {
    grid-area: content;
    padding: 20px;
    background-color: #fff;
    overflow: hidden;
    max-height: calc(100vh - 100px);
    display: grid;
    grid-template-areas:
        "content-action-buttons"
        "content-header"
        "content-body"
        "content-footer";
    grid-template-rows: 30px 40px 1fr 50px;
    grid-template-columns: 1fr;
}



.side-menu {
    position: fixed;
    top: 0;
    right: -220px;
    width: 220px;
    height: 100vh;
    background-color: var(--darkerGreen);
    color: var(--white);
    padding: 20px;
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

.side-menu.active {
    right: 0;
}

.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.side-menu-header > h2 {
    color: var(--white);
}

.close-menu {
    background: none;
    height: 30px;
    width: 30px;
    /* border-radius: 5px; */
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
}

.close-menu:hover {
    background-color: #ffffff0f;
}

.menu-item {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    align-items: center;
}

.menu-item > img {
    height: 25px;
    filter: brightness(0) invert(1);
}

.menu-item:hover {
    background-color: var(--darkGreen);
}

/*FilterMenu*/

.filter-menu {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100vh;
    background-color: var(--closeToWhite);
    color: var(--darkerGreen);
    padding: 20px;
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

.filter-menu.active {
    right: 0;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.filter-header > h2 {
    color: var(--darkerGreen);
}

.close-filter {
    background: none;
    height: 30px;
    width: 30px;
    /* border-radius: 5px; */
    border: none;
    color: var(--darkerGreen);
    font-size: 1.5rem;
    cursor: pointer;
}

.close-filter:hover {
    background-color: #ffffff0f;
}



/*
In Content Buttons
*/

.action-buttons {
    grid-area: content-action-buttons;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 5px;
    z-index: 1;
}

.primary-button {
    background-color: var(--darkGreen);
    color: var(--white);
    border: none;
    padding: 0 5px;
    display: flex;
    flex-direction: row;
    height: 30px;
    align-items: center;
    cursor: pointer;
}

.primary-button > .button-img {
    filter: brightness(0) invert(1);
}

.primary-button:hover {
    background-color: var(--darkerGreen);
}

.secondary-button {
    background-color: buttonface;
    color: var(--darkGreen);
    border: 1px solid buttonface;
    padding: 0 5px;
    display: flex;
    flex-direction: row;
    height: 30px;
    align-items: center;
    cursor: pointer;
}

.secondary-button:hover {
    border: 1px solid var(--darkGreen);
}

.hot-action-button {
    background: var(--light-orange);
    color: var(--white);
    border: 1px solid var(--light-orange);
    padding: 0 5px;
    display: flex;
    flex-direction: row;
    height: 30px;
    align-items: center;
    cursor: pointer;
}

.hot-action-button:hover {
    background-color: var(--orange);
    border-color: var(--orange);
}

.alert-button {
    background: none;
    color: var(--button-red);
    border: 1px solid #ffffff00;
    padding: 0 5px;
    display: flex;
    flex-direction: row;
    height: 30px;
    align-items: center;
    cursor: pointer;
}

.alert-button:hover {
    border: 1px solid var(--red);
}

.high-alert-button {
    background: var(--button-red);
    color: var(--white);
    border: 1px solid var(--button-red);
    padding: 0 5px;
    display: flex;
    flex-direction: row;
    height: 30px;
    align-items: center;
    cursor: pointer;
}

.high-alert-button:hover {
    background: var(--white);
    color: var(--red);
}

.button-img {
    height: 25px;
}

.inline-buttons {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.no-button {
    border: none;
    color: var(--darkerGreen);
    cursor: pointer;
    text-align: left;
    background: none;
}

.no-button:hover {
    color: var(--darkGreen);
}

.no-color-button {
    border: none;
    cursor: pointer;
    text-align: left;
    background: none;
}

.no-color-button:hover {
    background-color: #f0f0f074;
}

/*end buttons*/

.faktura-table-container.table-container.inline-table{
    max-height: unset !important;
}

/*Faktura Chart*/
.grid line {
    stroke: #e0e0e0;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

.chart-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    color: #666;
    height: 300px;
}

.x-axis path,
.y-axis path,
.x-axis line,
.y-axis line {
    stroke: #000;
    shape-rendering: crispEdges;
}

.x-axis-label, .y-axis-label {
    display: none;
}

.chart-title {
    font-size: 16px;
    font-weight: bold;
}

.chart-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.chart-container {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    /* border-radius: 4px; */
    padding: 15px;
    margin-top: 15px;
    overflow: hidden;
}

.faktura-intable-form-row {
    border: 1px solid var(--red);
}

.faktura-intable-form-row input {
    border: none !important;
    border-radius: unset !important;
}

.faktura-intable-form-row input[type=number] {
    -moz-appearance:textfield;
}

.faktura-intable-form-row input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.faktura-intable-form-row .faktura-form-grid {
    display: grid;
    grid-template-columns: 3% 5% 20% 15% 15% 15% 25% !important;
    gap: 0px !important;
    margin-bottom: 0px;
    max-height: 35px;
    width: 100%;
}

.faktura-intable-form-row .faktura-form-grid div {
    text-overflow: clip;
    text-wrap: nowrap;
}

/*List*/
.list-header {
    grid-area: content-header;
    margin-top: -20px;
}

.list-and-filter {
    grid-area: content-body;
    /* overflow-y: auto; */
}

footer {
    grid-area: footer;
    background-color: var(--darkGreen);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

footer img {
    height: 30px;
}

/*sortable table*/
table.sortable-table th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px; /* Make room for the indicator */
}

table.sortable-table th.sortable::after {
    content: '⇵';
    position: absolute;
    right: 5px;
    color: #aaa;
    font-size: 0.8em;
}

table.sortable-table th.sortable.asc::after {
    content: '↑';
    color: #005541;
}

table.sortable-table th.sortable.desc::after {
    content: '↓';
    color: #005541;
}

/* Transition effect for sorting */
table.sortable-table tbody tr {
    transition: background-color 0.2s;
}

.fakturaliste .selection-info {
    position: sticky;
    background-color: var(--white);
    z-index: 999;
    top: 0;
}

#fakturalist-tables #faktura-edit-button {
    display: none;
}

.selection-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-weight: normal;
    border-bottom: 1px solid #ddd;
}

.selection-info div{
    display: block;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--white);
    color: black;
    background-color: #ddd;
    padding: 3px;
    margin: 3px;
}

/*Table*/
#projektvorschau-table table {
    table-layout: fixed;    
}

.table-container {
    position: relative;
    max-height: calc(100vh - 55px - 30px - 30px - 40px - 50px);
    overflow: auto;
    max-width: calc(100vw - 40px);
    border: 1px solid #ddd;
    /* border: 1px solid #ddd; */
    /* border-radius: 4px; */
  }
  
  .table-container table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .table-container thead {
    position: sticky;
    top: 0;
    background-color: #f0f0f0;
    z-index: 1;
  }

  .table-container tfoot {
    font-weight: bold;
    border-top: 2px solid #ddd;
  }
  
  .table-container tr {
    max-height: 30px;
  }

  .table-container th {
    padding: 5px 5px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
  }

  .table-container.honorarliste th {
    padding: 5px 5px;
    text-align: left;
    font-weight: bold;
    border-bottom: unset;
  }
  
  .table-container td {
    padding: 5px 5px;
    border-bottom: 1px solid #ddd;
  }
  
  .table-container tr:last-child td {
    border-bottom: none;
  }
  
  .table-container tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  .table-container tr:nth-child(odd) {
    background-color: #fff;
  }

  .table-container .text-right {
    text-align: right;
  }

  .table-container .text-left {
    text-align: left;
  }

  .table-container .text-center {
    text-align: center;
  }

  .max-len {
    white-space: nowrap;     /* Prevent text from wrapping */
    overflow: hidden;        /* Hide overflow content */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
    display: table-cell;     /* Ensure proper table cell display */
  }

  .th-50 {
    width: 50%;
  }
  
  .th-30 {
      width: 30%;
  }

  .th-25 {
    width: 25%;
  }

  .th-22 {
    width: 22%;
  }

  .th-20 {
    width: 20%;
  }
  
  .th-17 {
    width: 17%;
  }

  .th-15 {
    width: 15%;
  }

  .th-10 {
    width: 10%;
  }

  .th-5 {
    width: 5%;
  }

  .th-3 {
    width: 3%;
  }

  .negative {
    color: var(--red);
  }

  .negative-coral {
    color: #ff9999;
  }

  .positive {
    color: var(--darkGreen);
  }

  .positive-mint {
    color: #8fffef;
  }

tr.header-sum td {
    background-color: var(--goldenyellow);
    border-color: var(--goldenyellow);
    border-right: unset;
}

/*special fields*/
.vertrag_erstellt {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 200px;
    text-wrap: nowrap;
    gap: 20px;
    justify-content: space-between;
}

.hat_vorgaengerprojekt {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 200px;
    text-wrap: nowrap;
    gap: 20px;
    justify-content: space-between;
}

.formfield-container-2col {
    display: grid;
    flex-direction: row;
    flex-wrap: wrap;
    grid-template-columns: repeat(2, 45%);
    column-gap: 5px;
    row-gap: 10px;
    justify-items: stretch;
    justify-content: space-between;
}

.formfield-container-2col > .form-row {
    max-width: calc(50vw - 55px);
}

.filter-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.filter-form-grid.single-col {
    grid-template-columns: 1fr;  
}

.filter-form-grid.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.filter-form-grid .form-row {
    max-width: 315px;
}

/* .form-row {
    margin-bottom: 15px;
} */
  
.form-row label {
    display: block;
    margin-bottom: 5px;
}
  
.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 32px;
}

.form-row input[type='checkbox'] {
    height: 15px;
}

/* Set default height for autocomplete selection container */
.select2-container .select2-selection {
    min-height: 25px !important;
    height: auto !important;
  }
  
  /* Style for the selection container */
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple {
    min-height: 25px;
    height: auto;
    display: flex;
    align-items: center;
  }

  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple li {
    height: 25px;
  }
  
  /* Style for multiple selections to ensure proper wrapping */
  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    line-height: 25px;
  }

  .select2-selection__rendered {
    min-height: 25px !important;
    height: auto !important;
  }
  
  /* Style for the selection choices/tags */
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  /* Make sure the input area grows with content */
  .select2-search--inline .select2-search__field {
    margin-top: 5px;
  }

  .select2-container--default .select2-selection {
    border: 1px solid #ddd !important;
  }

.form-row textarea {
    min-height: 100px;
}

.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea {
    border-color: #e60000;
}

.field-error {
    color: #e60000;
    font-size: 0.85rem;
    margin-top: 5px;
    display: none;
}

label.required:after {
    content:" *";
    color: red;
}

/*Shapes*/
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    
    border-left: 20px solid var(--lightGreen);
  }

/*Undo Autocomplete light stuff*/

#id_firma {
    display: none;
}

#id_projektleiter {
    display: none;
}

#id_projekt {
    display: none;
}

#id_projektphase {
    display: none;
}

#id_mitarbeiter_zeit_filter {
    display: none;
}

#id_projektphase_zeit_filter {
    display: none;
}

.select2-container {
    max-width: 100%;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--select2-highlighted-bg, var(--darkGreen)) !important;
    color: var(--select2-highlighted-fg, #fff) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--darkGreen) !important;
    color: white !important;
}

/*KPIS*/

.kpi-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    /* border-radius: 5px; */
    margin-bottom: 20px;
}

.kpi-group {
    flex: 1;
    min-width: 300px;
}

.kpi-group h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #555;
}

.kpi-row {
    display: flex;
    gap: 15px;
}

.kpi-box {
    flex: 1;
    background-color: var(--white);
    /* border-radius: 5px; */
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.kpi-label {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 5px;
}

.kpi-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
}

.kpi-box.positive .kpi-value {
    color: #28a745;
}

.kpi-box.negative .kpi-value {
    color: #dc3545;
}

/* Zeit KPI and summary styles */
.zeit-summary-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.zeit-kpi-container {
    flex: 1;
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 200px;
    max-width: 300px;
}

.zeit-monthly-container {
    flex: 2;
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.zeit-monthly-container h4 {
    margin-top: 0;
    color: var(--darkGreen);
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.zeit-kpi-box {
    text-align: center;
}

.zeit-kpi-box h3 {
    margin-top: 0;
    color: var(--darkGreen);
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.zeit-kpi-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--darkGreen);
}

.zeit-timeline-box {
    flex: 2;
    min-width: 300px;
    height: 100px;
}

.zeit-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.summary-section {
    flex: 1;
    min-width: 300px;
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.summary-section h4 {
    margin-top: 0;
    color: #005541;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.chart-container {
    height: 250px;
    margin-bottom: 15px;
    width: 100%;
}

@media (max-width: 768px) {
    .zeit-summary-row {
        flex-direction: column;
    }
    
    .zeit-kpi-container {
        max-width: none;
    }
}

/*Index Nav*/
.star-text {
    color: var(--darkGray);
    font-size: 9px;
}

.navs-wrapper {
    grid-area: content-action-buttons / content-footer;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 130px));
    grid-template-rows: repeat(auto-fit, minmax(130px, 130px));
    gap: 1rem;
    /* padding: 1rem; */
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
    overflow-y: auto;
    justify-content: center;
    height: calc(100vh - 170px);
    /* width: calc(100vw - 2* 1rem); */
}

.nav-grid a {
    text-decoration: none;
}

.nav-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    background-color: var(--darkGreen);
    padding: 0.5rem;
    text-decoration: none;
    color: #333;
    /* aspect-ratio: 1; */
    transition: all 0.2s ease;
}

.nav-tile-kpi {
    border: 1px solid var(--darkGreen);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background-color: var(--closeToWhite);
    padding: 5px 3px;
    text-decoration: none;
    color: #333;
    /* aspect-ratio: 1; */
    transition: all 0.2s ease;
}

.nav-tile-kpi.negative {
    border: 1px solid var(--red);
}

.nav-tile-kpi.positive {
    border: 1px solid var(--darkGreen);
}

.nav-tile-kpi > .table-container {
    width: 100%;
    line-height: 10px;
}

.nav-tile-kpi > .table-container > table td, th {
    border: none;
}

.nav-tile > img {
    filter: brightness(0) invert(1);
}

.nav-tile:hover {
    background-color: var(--darkerGreen);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.nav-tile.active {
    background-color: #4a90e2;
    color: var(--white);
}

.nav-title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--white);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 5px;
}

.nav-title div {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
}

.nav-title-kpi {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    padding-bottom: 5px;
    color: var(--black);
}

.nav-kpi {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--darkerGreen);
}

.nav-kpi.negative {
    color: var(--red);
}

.nav-kpi.positive {
    color: var(--darkGreen);
}

.nav-tile-kpi.large {
    grid-column: span 2;
}

/* Faktura*/
/*Fakturalist start*/
.faktura-header-info {
    position: sticky;
    top: 0;
    background-color: var(--white);
    z-index: 999;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

/* Existing selection info styling */
.selection-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-weight: normal;
    margin-bottom: 10px;
}

.selection-info div {
    display: block;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--white);
    color: black;
    background-color: #ddd;
    padding: 3px;
    margin: 3px;
}

/* New totals container styling */
.totals-container {
    margin-top: 5px;
    margin-left: 10px;
}

.kpi-cards-intable {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.kpi-card-intable {
    flex: 1;
    min-width: 140px;
    max-width: 200px;
    background-color: var(--white);
    border: 1px solid #ddd;
    /* border-radius: 4px; */
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}

.kpi-title-intable {
    font-size: 0.85rem;
    color: var(--veryDarkGray);
    margin-bottom: 5px;
    font-weight: bold;
}

.kpi-value-intable {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--darkGreen);
}

/* Specific card styling */
.bt-card {
    border-left: 4px solid var(--darkGreen);
}

.bt-card .kpi-value {
    color: var(--darkGreen);
}

.baukg-card {
    border-left: 4px solid var(--darkGray);
}

.baukg-card .kpi-value {
    color: var(--darkGray);
}

.verrechnet-card {
    border-left: 4px solid var(--lightGreen);
}

.verrechnet-card .kpi-value {
    color: var(--lightGreen);
}

.nicht-verrechnet-card {
    border-left: 4px solid var(--red);
}

.nicht-verrechnet-card .kpi-value {
    color: var(--red);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kpi-cards {
        flex-direction: column;
    }
    
    .kpi-card {
        max-width: none;
    }
}

.status-cell {
    cursor: pointer;
    padding: 0 !important;
    text-align: center !important;
}

.status-cell:hover {
    background-color: #ff8d02;
}

.status-cell > img {
    height: 25px;
}

.projekt-section {
    margin-bottom: 2rem;
    background: #fff;
    padding: 1rem;
    /* border-radius: 4px; */
    border-bottom: 1px solid #ddd;
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
}

.projekt-header {
    /* margin-bottom: 1rem;
    border-bottom: 2px solid #005541; */
    padding-bottom: 0.5rem;
}

.projekt-header h2 {
    margin: 0;
    color: #005541;
}

.projekt-info {
    display: flex;
    gap: 2rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}

.faktura-form-container {
    position: relative;
    top: -60px;
    background-color: var(--closeToWhite);
    z-index: 9;
}

.faktura-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    border: 1px solid var(--darkGreen);
}

.faktura-group {
    padding: 5px;
    border-right: 1px solid var(--darkGreen);
}

.faktura-group-title {
    width: 100%;
    border-bottom: 1px solid var(--darkGreen);
    display: block;
}

.faktura-group-title .honorar-info {
    font-weight: normal;
}

.faktura-table thead tr {
    border-bottom: 1px solid #ddd;
}

tr.faktura-verrechnet {
    color: var(--lightGray);
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

/* .faktura-table {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.faktura-table th,
.faktura-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.faktura-table th {
    background-color: #f5f5f5;
    font-weight: 500;
} */


.inline-form {
    background-color: var(--closeToWhite);
    border: 1px solid var(--light-orange);
    padding: 10px;
    margin-bottom: 10px;
}

.inline-form-controls {
    float: right;
    display: flex;
    gap: 5px;
}

/*Account*/

.login-container {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 10px;
    max-width: 500px;
    width: 300px;
    min-width: 250px;
    max-height: 250px;
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login-container.pw-reset {
    width: 350px;
    max-height: 500px;
}

.login-container.pw-reset ul {
    padding: 10px;
    text-wrap-style: pretty;
}

.login-container.pw-reset li {
    list-style: none;
}

.login-container > h2 {
    text-align: center;
    margin-bottom: 15px;
}

table.overview-table {
    width: 100%;
    line-height: 25px;
    border-collapse: collapse;
    margin-bottom: 25px;
}

.text-right {
    text-align: right;
    padding-right: 2px;
  }

table.overview-table th,td {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

table.overview-table td.bt {
    background-color: var(--darkGreen);
    color: var(--white);
}

table.overview-table td.baukg {
    background-color: #999999ab;
    color: var(--white);
}

table.overview-table td.total {
    background-color: #ffdc008f;
    color: black;
}

table.overview-table td.bts {
    background-color: var(--darkerGreen);
    color: var(--white);
    font-weight: bold;
}

table.overview-table td.baukgs {
    background-color: #999;
    color: var(--white);
    font-weight: bold;
}

table.overview-table td.totals {
    background-color: var(--goldenyellow);
    color: black;
    font-weight: bold;
}

table.overview-table .neg {
    background-color: var(--button-red) !important;
    color: white !important;
}

table.overview-table tr.zwischensumme {
    font-weight: bold;
}

.summary-section.table-container tr.zwischensumme {
    color: var(--darkGreen);
    background-color: var(--goldenyellow);
}
#projektvorschau-table {
    overflow: auto;
    max-height: calc(100vh - 200px);
}

#projektvorschau-table .table-container {
    max-height: unset !important;
    overflow: hidden !important;
}

#projektvorschau-table > .summary-section {
    /* max-height: 30vh; */
    padding: 0;
}

#projektvorschau-table .summary-section.table-container .summary-table tr:nth-child(even) {
    background-color: var(--white);
}

#projektvorschau-table .summary-section.table-container .summary-table .zwischensumme {
    border-top: 2px solid var(--darkGreen);
    background-color: var(--closeToWhite);
    font-weight: bold;
}



.forgot-password {
    color: var(--darkerGreen);
    text-decoration: none;
    margin-bottom: 20px;
    display: flex;
    top: 0px;
    justify-content: flex-end;
}

.submit-row {
    display: flex;
    justify-content: center;
    width: 100%;
}

.submit-row > input {
    width: 80px;
}

/*Message*/
.message {
    margin: 10px;
    padding: 10px;
    border-radius: 4px;
    position: relative;
    animation: slide-in 0.3s ease;
}

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

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.message.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.message-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
}

.message.fade-out {
    opacity: 0;
    transition: opacity 0.5s;
}

@keyframes slide-in {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Position messages at the top of the page */
#messages {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*Error*/

.error-message {
    color: var(--red);
    border: 1px solid var(--red);
    padding: 5px;
    margin-bottom: 5px;
}

/*Zeit Table*/
.summary-row {
    color: #005541;
}

.year-summary {
    background-color: #3a4a5a !important;
    color: var(--white);
}

.month-summary {
    background-color: #536878 !important;
    color: var(--white);
}

.week-summary {
    background-color: var(--goldenyellow) !important;
}

.today-row {
    background: linear-gradient(90deg, var(--red), var(--red) 5px, #ffffff00 5px, #ffffff00 100%);
}

.detail-row {
    background-color: #f9f9f9;
}

.detail-row:hover {
    background-color: #f3f3f3;
}

.not-approved {
    /* background-color: #ffe5e5; */
    color: var(--red) !important;
}

.not-approved button.no-button {
    color: var(--red) !important;
}

.not-approved button.no-button::after {
    content: " *";
}

.explanation-text {
    color: var(--red);
    float: right;
}

.explanation-text:before {
    content: "* ";
}

.holiday {
    color: var(--red);
}

.weekend {
    color: #0000004f;
}

.normal-day {
    color: #005541;
}

.edit-link {
    color: #666;
    text-decoration: none;
    font-size: 0.75rem;
}

.edit-link:hover {
    color: #333;
}

.diff-negative {
    color: var(--red);
}

.diff-positive {
    color: #005541;
}

.indent {
    padding-left: 2rem;
}

.time-indent {
    padding-left: 3.5rem !important;
}

.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline;
}
.htmx-request.htmx-indicator {
    display: inline;
}

.date-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.collapse-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #005541;
}

.collapse-button:disabled, .collapse-button[disabled] {
    cursor: not-allowed;
    color: #dddddd;
}

.collapse-button:hover {
    color: #2e7263;
}

.help-text {
    color: #aaa;
}

.indent {
    padding-left: 2rem;
}

.inline-buttons {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
}

.inline-buttons > .primary-button {
    color: var(--closeToWhite);
    background-color: var(--darkGreen);
    /* font-size: 1.25rem; */
    height: unset;
    padding: 0 5px;
}

.inline-buttons > .alert-button {
    color: var(--closeToWhite);
    background-color: var(--button-red);
    /* font-size: 1.25rem; */
    height: unset;
    padding: 0 5px;
}

/* .inline-buttons > .primary-button > img {
    filter: unset;
}*/

.inline-buttons > .alert-button > img {
    filter: brightness(0) invert(1);
}

.zeit-list-header {
    position: fixed;
    top: 110px;
    z-index: 2;
    overflow: hidden;
    text-overflow: clip;
    text-wrap: nowrap;
}

.zeit-freigeben-list-header {
    position: fixed;
    top: 110px;
    z-index: 2;
    overflow: hidden;
    text-overflow: clip;
    text-wrap: nowrap;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.todo-alert {
    text-decoration: none;
    min-width: 20px;
    min-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--red);
    color: var(--white);
    border-radius: 50%;
}

.todo-alert:hover {
    text-decoration: none !important;
}

.zeit-freigeben-list-header > .action-buttons {
    margin-left: 10px;
}

#confirmModal > .modal-content {
    height: unset !important;
}

/* Mobile styles */
@media (max-width: 900px) {
    .header-menu {
        display: none;
    }

    .user-container {
        margin-left: auto;
    }
    
    .user-name {
        display: none;
    }
    
    .side-menu {
        /* width: 100%; */
        right: -100%;
    }

    .list-header {
        margin-top: 10px;
        /* border-bottom: 1px solid var(--lightGray); */
    }

    /*Table*/
    .table-container th, td {
        padding: 5px 5px;
        font-size: 14px;
      }
    
    .table-container.zeit-infobox th, td {
        font-size: 12px;
    }
      
    .table-container {
    max-height: calc(100vh - 55px - 30px - 30px - 40px - 50px);
    border: 1px solid #ddd;
    }

    .inline-table {
        max-height: unset !important;
    }

    .table-container.zeit-infobox {
        max-height: 35%;
        /* overflow: auto;
        margin-top: -20px; */
    }

    .mobile-formfield-container-1col {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .bs {
        display: none;
    }

    .login-container {
        top: 30%;
    }

    .form-row {
        margin-bottom: 5px;
    }

}

@media (max-height: 620px) {
    .login-container {
        top: 50%;
    }
    .nav-grid {
        grid-template-columns: repeat(auto-fit, minmax(90px, 90px));
        grid-template-rows: repeat(auto-fit, minmax(90px, 90px));
    }

    .nav.tile > div {
        display: none;
    }

}

@media (max-height: 400px) {
    .login-container {
        top: 50%;
    }
}


/*
Sortable
*/

.handle {
    cursor: move;
    color: #666;
    text-align: center;
}

.sortable-ghost {
    opacity: 0.4;
    background-color: #f0f0f0;
}

/* Sortable table styles */
/* table.sortable-table th,td {
    border-right: 0.5px solid lightgray;
} */

table.sortable-table th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px; /* Make room for the indicator */
}

table.sortable-table th.sortable::after {
    content: '⇵';
    position: absolute;
    right: 5px;
    color: #aaa;
    font-size: 0.8em;
}

table.sortable-table th.sortable.asc::after {
    content: '↑';
    color: #005541;
}

table.sortable-table th.sortable.desc::after {
    content: '↓';
    color: #005541;
}

.kpi-rectangle {
    width: 260px;
    flex-direction: row;
    display: flex;
    background-color: var(--closeToWhite);
    border: 1px solid var(--darkerLightGray);
    /* border-radius: 4px; */
    height: 30px;
    align-items: stretch;
}

.kpi-title {
    font-size: 1.17rem;
    text-align: center;
    width: 130px;
    height: 100%;
    align-content: center;
    border-right: 1px solid var(--darkerLightGray);
}

.kpi-kpi {
    font-size: 2rem;
    color: var(--darkGreen);
    width: 130px;
    font-weight: bold;
    text-align: center;
    align-content: center;
}

.kip-kpi.negative {
    color: var(--white);
    background-color: var(--red);
}

/* Transition effect for sorting */
table.sortable-table tbody tr {
    transition: background-color 0.2s;
}

/*Spinner*/
#spinner {
    display: none;
    position: fixed;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2999;
    /* background-color: rgba(0, 0, 0, 0.5); */
}

#spinner-animated-area {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    width: 80px;
    margin: auto;
    height: 80px;
    color: #009e3c;
}

#spinner-animated-area div {
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 10px;
    background: currentColor;
    border-radius: 50%;
    animation: connect-animation 1.2s linear infinite;
}

#spinner-animated-area div:nth-child(1) {
    animation-delay: 0s;
    top: 36.8px;
    left: 66.24px;
}

#spinner-animated-area div:nth-child(2) {
    animation-delay: -0.1s;
    top: 22.08px;
    left: 62.29579px;
}

#spinner-animated-area div:nth-child(3) {
    animation-delay: -0.2s;
    top: 11.30421px;
    left: 51.52px;
}

#spinner-animated-area div:nth-child(4) {
    animation-delay: -0.3s;
    top: 7.36px;
    left: 36.8px;
}

#spinner-animated-area div:nth-child(5) {
    animation-delay: -0.4s;
    top: 11.30421px;
    left: 22.08px;
}

#spinner-animated-area div:nth-child(6) {
    animation-delay: -0.5s;
    top: 22.08px;
    left: 11.30421px;
}

#spinner-animated-area div:nth-child(7) {
    animation-delay: -0.6s;
    top: 36.8px;
    left: 7.36px;
}

#spinner-animated-area div:nth-child(8) {
    animation-delay: -0.7s;
    top: 51.52px;
    left: 11.30421px;
}

#spinner-animated-area div:nth-child(9) {
    animation-delay: -0.8s;
    top: 62.29579px;
    left: 22.08px;
}

#spinner-animated-area div:nth-child(10) {
    animation-delay: -0.9s;
    top: 66.24px;
    left: 36.8px;
}

#spinner-animated-area div:nth-child(11) {
    animation-delay: -1s;
    top: 62.29579px;
    left: 51.52px;
}

#spinner-animated-area div:nth-child(12) {
    animation-delay: -1.1s;
    top: 51.52px;
    left: 62.29579px;
}

@keyframes connect-animation {

    0%,
    20%,
    80%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }
}


/* Overlay when menu is open on mobile */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}

.menu-overlay.active {
    display: block;
}

/* Overlay when menu is open on mobile */
.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}

.filter-overlay.active {
    display: block;
}