/*Global Fonts*/ 


/* FONT: INTER */
@font-face {
    font-family: "Inter";
    src: url("https://dhfiles.polai.at/_fonts/Inter/Inter-VariableFont_slnt,wght.ttf") format("truetype");
}
 /*Global CSS*/ 

/* FONT: BUBBLE GUM, QUICKSAND */
/*@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Cinzel+Decorative:wght@400;700;900&family=Coming+Soon&family=Dosis:wght@200;300;400;500;600;700;800&family=Indie+Flower&family=Quicksand:wght@300;400;500;600;700&family=Slabo+27px&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
/* FONT: MONTSERRAT */
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* FONT: NEWSREADER */
/*@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
/* FONT: SOURCE SANS PRO */
/*@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

/* FONT: POPPINS */
/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* FONT: LATO */
/*@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* FONT: MUKTA */
/*@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap');

/* FONT: INTER */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* GLOBAL / BODY */

html {
    width: 100%;
    scroll-behavior: smooth !important;
}

body {
    background-color: #fff;
    /*background-image: url('https://devfiles.netgrid.at/system/background.png');*/
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #000;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 111px);
    font-family: "Inter", sans-serif;
    font-size: 18px;
    scroll-behavior: smooth;
}


button {
    font-family: 'Inter', sans-serif;
    font-weight: bold;
}

.appcontent {
    margin-top: 0px;
    width: 100% !important;
    padding-top: 0px;
    min-height: calc(100vh - 66px);
}

.first-top-space {
    margin-top: 40px;
}


a {
    color: #CCC;
    transition: 0.5s;
  }
  
  a:hover, a:active, a:focus {
    color: #FFF;
    outline: none;
    text-decoration: none;
  }
  
  p {
    padding: 0;
    margin: 0 0 30px 0;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    margin: 0 0 20px 0;
    padding: 0;
  }
  
  .display-3 {
      font-family: "Inter", sans-serif !important;
      font-size: 3.9rem;
      font-weight: normal !important;
  }
  
  @media screen and (max-width: 1279px) {
      .display-3 {
          font-size: 2.2rem;    
      }
  }
  
  
  
  /* Back to top button */
  .back-to-top {
    position: fixed;
    display: none;
    background: #FF0000;
    color: #fff;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 1;
    font-size: 16px;
    border-radius: 50%;
    right: 20px;
    bottom: 20px;
    transition: background 0.5s;
    z-index: 11;
  }
  
  .back-to-top i {
    padding-top: 12px;
    color: #fff;
  }
  
  @media (max-width: 768px) {
    .back-to-top {
      bottom: 15px;
    }
  }
  
  /* Shadows */
  .shadow-rtm {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 16px 0 rgba(0, 0, 0, 0.15)
  }
  
  .shadow-rmt:hover {
      box-shadow: 0 4px 8px 0 rgba(7, 48, 63, 0.3), 0 3px 16px 0 rgba(7, 48, 63, 0.25)
  }
  
  
  .shadow-rtm-strong {
      box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.15)
  }
  
  .shadow-rmt-strong:hover {
      box-shadow: 0 8px 12px 0 rgba(7, 48, 63, 0.6), 0 6px 20px 0 rgba(7, 48, 63, 0.25)
  }
  
  /* Prelaoder */
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
  }
  
  #preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #f2f2f2;
    border-top: 6px solid #33B5E5;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
  }
  
  @-webkit-keyframes animate-preloader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes animate-preloader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  
  /* FULLSCREEN MODAL */
  .modal-full {
      min-width: 100%;
      margin: 20px auto 0 auto !important;
      min-height: calc(100vh - 20px);
  }
  
  .modal-full .modal-content {
      min-height: 100vh;
  }
  
  
  /*MOBILE NAV ADJUSTMENT */
  @media screen and (max-width: 1279px) {
      .header-scrolled {
          min-height: 80px;
      }
  }
  
  
  /* CMS STYLES */
  .cms-container {
      width: 100%;
      position: relative;
  }

  .cms-container-border {
    border: 1px dashed #444 !important;
  }

  .cms-edit {
    cursor: text;
  }

  /* NETGRID IMPRINT */
  .netgrid-imprint-container {
      width: 320px;
      height: 120px;
  }
  .netgrid-imprint {
      border: 0px solid transparent;
      transition: 0.5s;
  }

  .netgrid-imprint:hover {
      border: 4px solid #fff;
      transition: 0.2s;
      transform: scale(1.05);
  }






  




  
  /*--------------------------------------------------------------
  # Header
  --------------------------------------------------------------*/
  #header {
      width: 100%;
      max-width: 100% !important;
      transition: all 0.5s;
      z-index: 997;
      padding: 26px 0;
      padding: 18px 0;
      background: black;
      position: fixed;
    }
    
    #header .container-fluid {
        margin: 10px 0 !important;
    }
    
    #header .logo {
      font-size: 16px;
      margin: 0;
      padding: 0;
      line-height: 1;
      font-family: "Inter", sans-serif;
      font-weight: 700;
      letter-spacing: 3px;
      padding-left: 10px;
    }
    
    #header .logo a {
      color: #fff;
    }
    
    #header .logo img {
      max-height: 250px;
    }

    #header .nav-link {
        margin-left: 24px;
    }
    
    @media (max-width: 992px) {
      #header .logo {
        font-size: 20px;
      }
    }
    
/* COOKIES OPTIONS */
.cookiesoption {
    z-index: 9999999999;
    position: fixed;
    bottom: 15px;
    left: 15px;
    width: 44px;
    height: 44px;
    border: 1px solid #888;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    font-size: 30px;
    text-align: center;
    margin: auto auto;
    opacity: 0.5;
    transition: 0.7s;
    cursor: pointer;
}
.cookiesoption:hover {
    transition: 0.7s;
    opacity: 1;
}


.cookiesoptionmenu {
    z-index: 9999999999999;
    position: fixed;
    display: none;
    bottom: 14px;
    left: 14px;
    width: 500px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #888;
    border-radius: 4px;
    transition: 0.7s;
    font-size: 18px;
    padding: 10px 20px;
}


/* TOOLTIP */

.tooltip {
    z-index: 1000000000000000000 !important;
}

.tooltip > .tooltip-inner {
    background-color: #2b2d31;       /* Slightly lighter grey for contrast */
    font-family: 'Inter', sans-serif;
    font-size: 14px; 
    color: #fff; 
    border: 1px solid #555;          /* More subtle border */
    border-radius: 4px;              /* Softer radius */
    padding: 8px 12px;
}

/* LOGO */
.navbar-brand img {
    width: 160px !important;
    max-height: 100px !important;
    transition: 0.5s;
}

.navbar-brand img:hover {
    transform: scale(1.15);
    transition: 0.5s;
}


/* NAV */

.navbar {
    max-width: 100% !important;
}

/*.nav-link {
    margin-left: 46px;
}

.navbar-dark .navbar-nav .nav-link {
    font-size: 20px;
    color: #DDD;
    border-bottom: 4px solid transparent;
    transition: 0.4s;
}

.navbar-dark .navbar-nav .nav-link:hover {
    font-size: 20px;
    color: #FFF;
    border-bottom: 4px solid #fff;
    transition: 0.4s;
}


/* NAV SUBMENU */
/*.dropdown-menu {
    background-color: rgba(34, 34, 34, .98) !important;
    border-radius: 4px;
    border: 4px solid #fff;
}

.dropdown-item {
    color: #fff;
}

/* APP FORM */
.appform {
    width: 100%;
    margin: 0 0 20px 0;
}

.appformheader {
    width: 100%;
    background-color: rgba(52, 58, 64, .3);
}

.appformsubmit {
    width: 100%;
    background-color: rgba(52, 58, 64, .3);
    text-align: center;
    padding: 10px 20px;
}

.appformtitle {
    color: #fff;
    font-size: 3rem;
    margin: 20px 20px 6px 20px;
}

.appformentryname {
    color: #fff;
    font-size: 1.6rem;
    text-transform: capitalize;
    margin-left: 0 !important;
}

.appformsubtitle {
    color: #fff;
    font-size: 2rem;
    margin: 20px 20px 6px 20px;
}

.appform-element {
    display: table;
    margin: 20px 0;
    width: 100%;
    padding: 0 20px;
}

.appform-inputtitle {
    display: table-cell;
    vertical-align: top;
    width: 30%;
    min-width: 300px;
}

.appform-inputdesc {
    display: table-row;
    width: 100%;
    color: #ccc;
    font-size: 0.8rem;
    padding: 4px 0 0 20px;
}

.appform-inputdesc span {
    max-width: 30%;
    padding-right: 20px;
}

.appform-input {
    display: table-cell;
    vertical-align: top;
    width: 70%;
}

.appform-input input {
    width: 100%;
    margin: 0 0 0 auto;
}

#actionform {
    display: inline;
}

.actionbutton {
    margin-left: 40px;
    margin-bottom: 8px
}

/*.bootstrap-select {
    width: 100% !important;
}*/

.appform-actions {
    white-space: nowrap; 
    width: 100%; 
    text-align: right;
}


.appform-options {
    display: block;
    text-align: left;
    margin: 0 1%;
}

.appform-option {
    display: inline-block;
    width: auto;
    max-width: 19%;
    border: 3px solid rgba(52, 58, 64, .3);
    border-radius: 8px;
    text-align: center;
    margin: 20px 8px;
    padding: 2px 14px;
}

.appform-option:hover {
    background: rgba(52, 58, 64, .3);
    transition: 0.6s;
}

.appform-icon {
    display: inline-block;
    vertical-align: middle;
    font-size: 2rem;
}

.appform-title {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.2rem;
    color: #ccc;
    margin: 0 0 2px 8px;
}




/* TABLES */

.table-responsive {
    max-width: calc(100% - 1px);
}

.table > tbody > tr > td {
    vertical-align: middle;
}

.tr-button {
    cursor: pointer !important;
}

table.dataTable tbody tr {
    background-color: transparent;
}


.firstcellpadding {
    padding-left: 20px !important;
}

.dataTables_wrapper {
    margin-top: 20px;
}

.custom-select {
    color: #000 !important;
}

.dataTables_filter .form-control {
    color: #FFF !important;
}
.dataTables_filter .form-control::placeholder, .dataTables_filter .form-control::placeholder:active {
    color: #AAA !important;
}


.table-dark td, .table-dark th, .table-dark thead th {
    border-color: rgba(255,255,255, 0.3) !important;
}

.table.dataTable thead th, table.dataTable thead td {
    border-color: rgba(255,255,255, 0.3) !important;
}

.table.dataTable.no-footer {
    border-color: rgba(255,255,255, 0.3) !important;
}


/* TABLES PAGINATION */
.pagination {
    background-color: rgba(52, 58, 64, .3);
}

.pagination > li > a
{
    background-color: #333;
    color: #FFF;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: #5a5a5a;
    background-color: #333;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: rgba(34,34,34, 0.8) !important;
    border: solid 1px rgba(34,34,34, 0.8) !important;
}

.pagination > .active > a:hover
{
    background-color: #333 !important;
    border: solid 1px #333;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: #fff;
    padding-left: 20px;
}

.dt-buttons {
    margin-bottom: 8px;
}

.dt-search {
    display: inline-block;
    position: absolute; 
    right: 20px;
    margin-top: 0;
    min-width: 300px;
    text-align: right; 
}

.dt-length {
    margin: 8px 0;
}

/* Fix T-Head Background Color for fixedHeader */
thead {
    background: #292c30;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(to bottom, rgba(52, 58, 64, .3) 0%, rgba(52, 58, 64, .3) 100%)
}


/* CONFIRMATION */
.popover-header {
    color: #000;
}

/* BREADCRUMBS */
.breadcrumb {
    margin-bottom: 0;
    background-color: #1a1a1a;
    border-radius: 0;
    padding: 18px 2% 8px 2%;
    border-bottom: 1px solid #292c30;
    font-size: .9rem;
}


.breadcrumb-item.active {
    color: #fff;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #ddd;
}

/* BOOTSTRAP LINKED BUTTON FIX */
span a:hover {
    text-decoration: none !important;
    border: none;
  }



/* BOOTSTRAP COLOR CHANGES */
.btn-secondary {
    background-color: rgba(52, 58, 64, .3);
    border-color: rgba(255,255,255, .3);
}

/* Dunkles Design für alle Formulareingaben */
.form-control,
.form-control:focus,
.form-control:hover {
  background-color: #232323 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 0.25rem !important;
  box-shadow: none !important;
  transition: background 0.2s, border 0.2s;
}
.form-control:focus,
.form-control:hover {
  background-color: #333 !important;
  color: #fff !important;
  border: 1px solid #888 !important;
  outline: none !important;
  box-shadow: none !important;
}
.form-control::placeholder {
  color: #bbb !important;
  opacity: 1;
}

.table-dark {
    background-color: rgba(52, 58, 64, .3);
}

.table-dark.table-hover tbody tr:hover {
    background-color: rgba(80,80,80, .2);
}

.table-striped tbody tr:nth-of-type(2n+1){
    background-color: rgba(100,100,100, 0.2) !important;
}

.table-dark.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(60, 66, 72, .3) !important;
}

.table-dark.table-striped tbody tr:nth-of-type(2n+1):hover {
    background-color: rgba(52, 58, 64, .3) !important;
}



/* CLOSE ICON BOOTSTRAP */
.close {
    color: #fff;
}

.close:hover {
    color: #ccc;
}


/* SUMMERNOTE CHANGES */
/*.note-airframe {
    border: 1px dashed #444 !important;
}*/

/* SUMMERNOTE DISABLE UPLOAD */
.note-group-select-from-files {
    display: none;
  }


/* HEADER SCROLLED */
.navbar.fixed-top {
    transition: background-color 0.3s ease-out;
    background: #202124;
}

.navbar.fixed-top.scrolled {
    /*background-color: rgba(34, 34, 34, .98) !important;*/
    transition: background-color 0.3s ease-out;
}


/* NAV CHANGES */
.nav-item-spacer {
    margin: auto 8px;
}





/* BOOTSTRAP MODAL */
.modal-content {
    background: rgba(52, 58, 64, .95);
    color: #fff;
}


/* FULLSCREEN MODAL */
.modal-full {
    min-width: 80%;
    margin: inherit auto;
}

.modal-full .modal-content {
    min-height: 100vh;
}

.modal-header .close {
    color: #fff;
}

.modal-header .close:hover {
    color: #ccc;
}



/* UPLOAD MANAGER */
.modalgallery {
    width: 100%;
    margin: 20px 0;
}

.filegallery {
    width: 100%;
}

.filegallery_content {
    display: inline-block;
    vertical-align: top;
    margin: 6px 8px;
    border-radius: 2px;
    border: 4px solid #666;
    height: 160px;
    width: 160px;
    transition: 0.6s;
    font-size: 100px;
    text-align: center;
}

.filegallery_content:hover {
    border-color: #bbb;
    transition: 0.6s;
}

.content_active {
    border-color: #d9534f !important;
    transition: 0.6s;
}

.filegallery_content img {
    width: 150px;
    margin: auto 0;
    vertical-align: middle;
}

.upload-preview {
    border: 3px dashed #555;
    border-radius: 3px;
    max-width: 240px;
    transition: 0.8s;
}

.upload-preview:hover {
    border: 3px dashed #bbb;
    transition: 0.8s;
}



/* BOOTSTRAP CARDS */
.card {
    border: 1px solid rgba(255,255,255,.35);
}


.card-dark {
    background: rgba(52, 58, 64, .4) !important;
}

.card-purple {
    background: rgba(100, 6, 151, .4) !important;
}

.card-orange {
    background: rgba(217, 143, 17, .4) !important;
}

.card-footer{
    position:absolute;
    bottom:0;
    width:100%;
}


/* DATEPICKER */

.bootstrap-datetimepicker-widget {
    background-color: #fff !important;
    color: rgba(52, 58, 64, 1) !important;
}
/*
.bootstrap-datetimepicker-widget table {
    color: rgba(52, 58, 64, .7) !important;
  }

.bootstrap-datetimepicker-widget table th.picker-switch{
    color:#FFF !important;
}

.bootstrap-datetimepicker-widget table th{
  color:#FFF !important;
}

.bootstrap-datetimepicker-widget table td{
  color:#000 !important;
}*/





/* COMMENTS */

.comments-precontrol {
    background-color: #f7d05b4f !important
}


/* BOOTSTRAP TOASTS */

.toast {
    max-width: 400px !important;
}

.toast-header {
    color: #fff;
}

.toast-body {
    color: #000;
}

.toast-body h5 {
    font-size: 20px !important;
}


/* FLIP ELEMENTS CURSOR*/
.front {
    cursor: grab;
}

.back {
    cursor: grab;
}



/* FORM - UPLOADER*/
.upload-prev-pdf {
    font-size: 60px;
    margin: 0 30px;
}





/* Fix: Filter-Dropdowns in einer Zeile, nicht 100% breit */
.filter-dropdown-row .bootstrap-select {
    width: auto !important;
    min-width: 180px;
    max-width: 220px;
}





/* --- Bootstrap-select: Dunkles Dropdown-Design global --- */
.bootstrap-select .dropdown-menu {
  background-color: #232323;
  color: #fff;
  border: 1px solid #444;
}

.bootstrap-select .dropdown-menu .dropdown-item {
  background-color: transparent;
  color: #fff;
}

.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active,
.bootstrap-select .dropdown-menu .dropdown-item:hover {
  background-color: #444;
  color: #fff;
}

/* Bootstrap-select: Suchfeld im Dropdown dunkler und mit Fokus-Style */
.bootstrap-select .bs-searchbox input {
  background-color: #232323;
  color: #fff;
  border: 1px solid #444;
  box-shadow: none;
}
.bootstrap-select .bs-searchbox input:focus {
  background-color: #333;
  color: #fff;
  border: 1px solid #888;
  outline: none;
  box-shadow: none;
}

.bootstrap-select .dropdown-menu {
  scrollbar-color: #444 #232323;
  scrollbar-width: thin;
}

/* --- Bootstrap-select: Button im dunklen Design --- */
.bootstrap-select > .btn {
  background-color: #232323;
  color: #fff;
  border: 1px solid #444;
  box-shadow: none;
}

.bootstrap-select > .btn:focus,
.bootstrap-select > .btn:active,
.bootstrap-select > .btn:hover {
  background-color: #333;
  color: #fff;
  border: 1px solid #666;
  outline: none;
  box-shadow: none;
}

/* Caret (Pfeil) auch weiß */
.bootstrap-select > .btn .caret,
.bootstrap-select > .btn::after {
  border-top-color: #fff !important;
}

/* Bootstrap-select: Button aktiv (Dropdown offen) */
.bootstrap-select.show > .btn {
  background-color: #444;
  color: #fff;
  border: 1px solid #888;
  outline: none;
  box-shadow: none;
}

/* Kalender-Suchfeld im dunklen Design (überschreibt .form-control) */
#calendar-search.form-control {
  background-color: #232323 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 0.25rem !important;
  box-shadow: none !important;
  transition: background 0.2s, border 0.2s;
}
#calendar-search.form-control:focus,
#calendar-search.form-control:hover {
  background-color: #333 !important;
  color: #fff !important;
  border: 1px solid #888 !important;
  outline: none !important;
  box-shadow: none !important;
}
#calendar-search.form-control::placeholder {
  color: #bbb !important;
  opacity: 1;
}





 /*Page CSS*/ 


/* appsystem */

.dash-head {
    text-align: center;
    color: #fff;
    font-size: 3rem;
}


    
    #loginform .container- {
    height: 100%;
    align-content: center;
    }
    
    #loginform .card{
        height: 370px;
        margin-top: auto;
        margin-bottom: auto;
        width: 400px;
        background-color: rgba(0,0,0,0.5) !important;
        padding-bottom: 20px;
        border-radius: .5rem;
    }
    
    #loginform .social_icon span{
        font-size: 60px;
        margin-left: 10px;
        color: rgba(52, 58, 64, 1);
    }
    
    #loginform .social_icon span:hover{
    color: white;
    cursor: pointer;
    }

    #loginform .fa-circle {
        color: #fff;
    }
    
    #loginform .card-header h3{
    color: white;
    }
    
    #loginform .social_icon{
    position: absolute;
    right: 20px;
    top: -45px;
    }
    
    #loginform .input-group-prepend span{
    width: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    border:0 !important;
    }
    
    input:focus{
    outline: 0 0 0 0  !important;
    box-shadow: 0 0 0 0 !important;
    
    }
    
    #loginform .remember{
    color: white;
    }
    
    #loginform .remember input
    {
    width: 20px;
    height: 20px;
    margin-left: 15px;
    margin-right: 5px;
    }
    
    #loginform .login_btn{
    color: #000;
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    margin: 8px 0;
    }
    
    #loginform .login_btn:hover{
    color: black;
    background-color: white;
    }
    
    #loginform .links{
    color: white;
    }
    
    #loginform .links a{
    margin-left: 4px;
    }

/* --- Dark Theme for Log Reader --- */
.log-reader-dark-theme .card {
    background-color: #212529;
    color: #f8f9fa;
    border: 1px solid #495057;
}

.log-reader-dark-theme .card-header {
    background-color: #343a40;
    border-bottom: 1px solid #495057;
}

.log-reader-dark-theme .form-control,
.log-reader-dark-theme .form-select {
    background-color: #343a40;
    color: #f8f9fa;
    border: 1px solid #495057;
}

.log-reader-dark-theme .form-control:focus,
.log-reader-dark-theme .form-select:focus {
    background-color: #495057;
    color: #f8f9fa;
    border-color: #80bdff;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.log-reader-dark-theme .form-control::placeholder {
    color: #adb5bd;
}

.log-reader-dark-theme label {
    color: #ced4da;
}

.log-reader-dark-theme .table {
    color: #dee2e6;
}

.log-reader-dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.05);
    color: #dee2e6;
}

.log-reader-dark-theme .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.1);
    color: #f8f9fa;
}

.log-reader-dark-theme .table thead th {
    border-bottom: 2px solid #495057;
}

.log-reader-dark-theme .table td,
.log-reader-dark-theme .table th {
    border-top: 1px solid #343a40;
}

.log-reader-dark-theme .modal-content {
    background-color: #212529;
    color: #f8f9fa;
    border: 1px solid #495057;
}

.log-reader-dark-theme .modal-header {
    border-bottom: 1px solid #495057;
}

.log-reader-dark-theme .modal-header .close {
    color: #f8f9fa;
    text-shadow: none;
    opacity: 0.7;
}

.log-reader-dark-theme .modal-header .close:hover {
    opacity: 1;
}

.log-reader-dark-theme .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.log-reader-dark-theme pre code {
    color: #f8f9fa;
}

/* NG-LOGIN STYLES */
.ng-login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - 40px);
    padding: 20px;
    font-family: 'Inter', sans-serif;
    background-color: #1a1a1a; /* Match error pages */
}
.ng-login-logo img {
    max-height: 36px; /* Increased from 220px */
    height: auto;
    margin-bottom: 1.5rem;
}
.ng-login-slogan {
    font-size: 1.1rem;
    color: #aaa;
    margin-bottom: 2.5rem;
    font-weight: 300;
}
.ng-login-container {
    width: 100%;
    max-width: 420px;
    background-color: #1a1a1a;
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid #444;
}
.ng-login-header h3 {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #fff;
    text-align: center;
}
.ng-input-group {
    position: relative;
    margin-bottom: 1.5rem;
}
.ng-input-group .ng-input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 1.1rem;
}
.ng-input {
    width: 100%;
    padding: 13px 15px 13px 50px;
    background-color: #1e1f22;
    border: 1px solid #555;
    border-radius: 5px;
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.ng-input::placeholder {
    color: #888;
}
.ng-input:focus {
    outline: none;
    border-color: #ccc; /* White/Gray focus */
    box-shadow: 0 0 0 1px #ccc; /* White/Gray focus */
}
.ng-login-btn {
    width: 100%;
    padding: 14px;
    background-color: #333; /* Dark Gray */
    border: none;
    border-radius: 5px;
    color: #fff; /* White Text */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}
.ng-login-btn:hover {
    background-color: #444; /* Lighter Gray on hover */
}
.ng-login-footer {
    margin-top: 1.5rem;
}
.ng-login-footer a {
    color: #ccc; /* White/Gray link */
    text-decoration: none;
    font-weight: 500;
}
.ng-login-footer a:hover {
    text-decoration: underline;
    color: #fff;
}
.ng-login-footer .ng-links-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}
.ng-login-footer .ng-register-link {
     color: #aaa;
}
.ng-login-footer .ng-register-link a {
    margin-left: 5px;
}

/* NG-DASHBOARD STYLES */
.ng-dash-wrapper {
    padding: 40px;
    font-family: 'Inter', sans-serif;
}

.ng-dash-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
}

.ng-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 1600px;
    margin: 0 auto;
}

.ng-dash-card {
    background-color: #2b2d31;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.ng-dash-card:hover {
    transform: translateY(-5px);
    border-color: #666;
}

.ng-dash-card.welcome {
    grid-column: 1 / -1; /* Make welcome card full width */
    text-align: left;
}

.ng-dash-contact-card {
    grid-column: 1 / 2; /* Occupy 50% of the grid width */
}

.ng-dash-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ng-dash-card-content {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.6;
}

.ng-dash-card-content a {
    color: #eee;
    text-decoration: none;
    font-weight: 500;
}
.ng-dash-card-content a:hover {
    text-decoration: underline;
    color: #fff;
}

.ng-dash-version-info {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-top: 5px;
}

.ng-dash-version-watermark {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 0.9rem;
    color: #555;
    font-weight: 300;
    z-index: 999;
}

.ng-dash-contact-card .contact-entry {
    text-align: left;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #444;
}

.ng-dash-contact-card .contact-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ng-dash-contact-card .contact-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
}
.ng-dash-contact-card .contact-header small {
    font-size: 0.8rem;
    color: #888;
    font-weight: 400;
}
.ng-dash-contact-card .contact-subject {
    font-weight: 600;
    color: #bbb;
    margin-bottom: 10px;
}

.ng-dash-contact-card .contact-message {
    font-style: italic;
    color: #999;
}


/* content_aquiso */

/* AQUISO Global Table Styles */
.aq-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.aq-table thead th {
    text-align: left;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #1e3e5d;
    background: #f5f5f0;
    border-bottom: 2px solid #e8e8e8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aq-table tbody td {
    padding: 14px 16px;
    font-size: 15px;
    color: #606060;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: middle;
}

.aq-table tbody tr:hover {
    background: #fafafa;
}

.aq-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Action Links */
.aq-table-action {
    color: #fc5e10;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.aq-table-action:hover {
    color: #1e3e5d;
    text-decoration: underline;
}

/* Badge Styles */
.aq-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.aq-badge-success {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.aq-badge-warning {
    background: rgba(255, 193, 7, 0.15);
    color: #997404;
}

.aq-badge-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.aq-badge-info {
    background: rgba(13, 202, 240, 0.1);
    color: #0dcaf0;
}

.aq-badge-primary {
    background: rgba(30, 62, 93, 0.1);
    color: #1e3e5d;
}

.aq-badge-orange {
    background: rgba(252, 94, 16, 0.1);
    color: #fc5e10;
}

/* NetGrid Table Column Dropdown Styles */
.ng-table-column-dropdown .fa-check[style*="color: #fc5e10"],
.ng-table-column-dropdown .fa-check[style*="color:#fc5e10"] {
    color: #fc5e10 !important;
}

/* Searchable Dropdown Styles */
.aq-select-search {
    position: relative;
    font-family: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.aq-select-search-trigger {
    width: 100%;
    padding: 10px 14px;
    padding-right: 36px;
    font-size: 15px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    color: #1e3e5d;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
    text-align: left;
    position: relative;
}

.aq-select-search-trigger:focus {
    outline: none;
    border-color: #fc5e10;
    box-shadow: 0 0 0 3px rgba(252, 94, 16, 0.1);
}

.aq-select-search-trigger::after {
    content: "▼";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #999;
    transition: transform 0.2s ease;
}

.aq-select-search.open .aq-select-search-trigger::after {
    transform: translateY(-50%) rotate(180deg);
}

.aq-select-search-trigger.placeholder {
    color: #999;
}

.aq-select-search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(30, 62, 93, 0.15);
    max-height: 280px;
    overflow: hidden;
    z-index: 1001;
}

.aq-select-search.open .aq-select-search-dropdown {
    display: block;
}

.aq-select-search-input-wrapper {
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;
}

.aq-select-search-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    color: #1e3e5d;
    background: #f5f5f0;
    font-family: inherit;
}

.aq-select-search-input:focus {
    outline: none;
    border-color: #fc5e10;
    background: #ffffff;
}

.aq-select-search-input::placeholder {
    color: #999;
}

.aq-select-search-options {
    max-height: 200px;
    overflow-y: auto;
}

.aq-select-search-option {
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
    font-size: 15px;
    color: #1e3e5d;
}

.aq-select-search-option:last-child {
    border-bottom: none;
}

.aq-select-search-option:hover,
.aq-select-search-option.highlighted {
    background: #f5f5f0;
}

.aq-select-search-option.selected {
    background: rgba(252, 94, 16, 0.1);
    color: #fc5e10;
    font-weight: 500;
}

.aq-select-search-option.hidden {
    display: none;
}

.aq-select-search-empty {
    padding: 12px 14px;
    color: #999;
    font-style: italic;
    text-align: center;
}

.aq-select-search-separator {
    padding: 8px 14px;
    color: #ccc;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    user-select: none;
}

/* Project contact highlighting */
.aq-select-search-option.project-contact {
    background: rgba(252, 94, 16, 0.08);
    border-left: 3px solid #fc5e10;
}

.aq-select-search-option.project-contact:hover {
    background: rgba(252, 94, 16, 0.15);
}

/* ========================================
   AQUISO Card & Layout Styles
   ======================================== */

.aq-dash-wrapper {
    padding: 2rem;
    width: 90%;
    margin: 0 auto;
    font-family: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.aq-dash-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1e3e5d;
}

.aq-dash-grid {
    display: flex;
    gap: 1.5rem;
}

.aq-dash-card {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0px 4px 20px rgba(30, 62, 93, 0.15);
    transition: box-shadow 0.3s ease;
}

.aq-dash-card:hover {
    box-shadow: 0px 6px 25px rgba(30, 62, 93, 0.2);
}

.aq-dash-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #fc5e10;
    min-height: 52px;
}

.aq-dash-card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #1e3e5d;
}

.aq-dash-card-options {
    display: flex;
    gap: 0.5rem;
}

.aq-dash-option-link {
    font-size: 14px;
    color: #fc5e10;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #fc5e10;
    transition: all 0.3s ease;
}

.aq-dash-option-link:hover,
.aq-dash-option-link:active,
.aq-dash-option-link:focus {
    background: #fc5e10;
    color: #ffffff;
    text-decoration: none;
}

.aq-dash-card-content {
    font-size: 16px;
    color: #606060;
    line-height: 1.6;
}

.aq-dash-card-content a {
    color: #fc5e10;
    text-decoration: none;
}

.aq-dash-card-content a:hover {
    color: #1e3e5d;
    text-decoration: underline;
}

/* Profile Styles */
.aq-profile-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aq-profile-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.aq-profile-row:last-child {
    border-bottom: none;
}

.aq-profile-label {
    font-weight: 600;
    color: #1e3e5d;
    font-size: 14px;
}

.aq-profile-value {
    color: #606060;
}

.aq-profile-value a {
    color: #fc5e10;
    text-decoration: none;
}

.aq-profile-value a:hover {
    text-decoration: underline;
}

.aq-profile-tag {
    display: inline-block;
    padding: 6px 12px;
    margin: 4px 4px 4px 0;
    background: rgba(30, 62, 93, 0.08);
    color: #1e3e5d;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.aq-profile-tag:hover {
    background: #fc5e10;
    color: #fff;
}

.aq-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ========================================
   AQUISO Login Styles
   ======================================== */

.aq-login-wrapper {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10vh;
    background: #ffffff;
    font-family: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
}

.aq-login-card {
    width: 100%;
    max-width: 380px;
    padding: 2.5rem;
    background: #1e3e5d;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(30, 62, 93, 0.3);
}

.aq-login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.aq-login-logo img {
    max-height: 50px;
    width: auto;
}

.aq-login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.aq-login-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.aq-login-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.aq-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.aq-login-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.aq-login-input-group label {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.aq-login-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.aq-login-input-wrapper i {
    position: absolute;
    left: 12px;
    color: #1e3e5d;
    font-size: 14px;
    transition: color 0.3s ease;
}

.aq-login-input {
    width: 100%;
    padding: 12px 12px 12px 38px;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    color: #1e3e5d;
    background: #ffffff;
    font-family: inherit;
    transition: all 0.3s ease;
}

.aq-login-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(252, 94, 16, 0.3);
}

.aq-login-input-wrapper:focus-within i {
    color: #fc5e10;
}

.aq-login-input::placeholder {
    color: #999;
}

.aq-login-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: #fc5e10;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.aq-login-btn:hover {
    background: #e04d0a;
    box-shadow: 0 4px 12px rgba(252, 94, 16, 0.4);
}

.aq-login-btn i {
    font-size: 13px;
}

.aq-login-error {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aq-login-error i {
    font-size: 16px;
}

.aq-login-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.aq-login-footer a {
    color: #fc5e10;
    text-decoration: none;
    font-weight: 600;
    margin-left: 0.25rem;
}

.aq-login-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Remove background shapes */
.aq-login-background {
    display: none;
}

/* Password Strength Indicator */
.aq-login-pw-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.aq-login-pw-strength-bar {
    flex: 1;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.aq-login-pw-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.aq-login-pw-strength-text {
    font-size: 12px;
    font-weight: 600;
    min-width: 90px;
    text-align: right;
    white-space: nowrap;
}

.aq-login-pw-strength-fill.aq-login-pw-level-1 {
    background-color: #dc3545;
}

.aq-login-pw-strength-fill.aq-login-pw-level-2 {
    background-color: #fd7e14;
}

.aq-login-pw-strength-fill.aq-login-pw-level-3 {
    background-color: #ffc107;
}

.aq-login-pw-strength-fill.aq-login-pw-level-4 {
    background-color: #198754;
}

.aq-login-pw-strength-text.aq-login-pw-level-1 {
    color: #dc3545;
}

.aq-login-pw-strength-text.aq-login-pw-level-2 {
    color: #fd7e14;
}

.aq-login-pw-strength-text.aq-login-pw-level-3 {
    color: #997404;
}

.aq-login-pw-strength-text.aq-login-pw-level-4 {
    color: #198754;
}

/* ========================================
   AQUISO Modal Styles
   ======================================== */

.aq-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(30, 62, 93, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

.aq-modal.show {
    display: flex;
}

.aq-modal-content {
    background-color: #ffffff;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(30, 62, 93, 0.2);
    max-width: 600px;
    width: 90%;
    border: 2px solid #1e3e5d;
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.aq-modal-header {
    background-color: #ffffff;
    color: #1e3e5d;
    border-bottom: 3px solid #fc5e10;
    border-radius: 10px 10px 0 0;
    padding: 30px 30px 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.aq-modal-header h2 {
    color: #fc5e10;
    font-weight: 600;
    font-size: 20px;
    margin: 0;
}

.aq-modal-close {
    color: #1e3e5d;
    opacity: 0.7;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    transition: all 0.3s ease;
}

.aq-modal-close:hover,
.aq-modal-close:focus {
    color: #fc5e10;
    opacity: 1;
    transform: scale(1.1);
    outline: none;
}

.aq-modal-body {
    padding: 30px;
    color: #1e3e5d;
    background-color: #ffffff;
    overflow-y: auto;
    flex: 1 1 auto;
}

.aq-modal-footer {
    background-color: #f5f5f0;
    border-top: 1px solid #e0e0e0;
    border-radius: 0 0 10px 10px;
    padding: 20px 30px;
    text-align: right;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.aq-btn {
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-family: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.aq-btn-primary {
    background: #fc5e10;
    color: #fff;
}

.aq-btn-primary:hover {
    background: #e04d0a;
    box-shadow: 0 4px 8px rgba(252, 94, 16, 0.3);
}

.aq-btn-secondary {
    background: #e8e8e8;
    color: #1e3e5d;
    border: 1px solid #d0d0d0;
}

.aq-btn-secondary:hover {
    background: #d0d0d0;
    border-color: #b8b8b8;
}

/* Modal responsive */
@media (max-width: 768px) {
    .aq-modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .aq-modal-header {
        padding: 20px 20px 15px 20px;
    }

    .aq-modal-body {
        padding: 20px;
    }

    .aq-modal-footer {
        padding: 15px 20px;
        flex-direction: column;
    }

    .aq-btn {
        width: 100%;
    }
}

/* content_dancehub */

/* DanceHub Global Table Styles */
.dh-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.dh-table thead th {
    text-align: left;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #2a2a2a;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dh-table tbody td {
    padding: 14px 16px;
    font-size: 15px;
    color: #606060;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: middle;
}

.dh-table tbody tr:hover {
    background: #fafafa;
}

.dh-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Action Links */
.dh-table-action {
    color: #20B2AA;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.dh-table-action:hover {
    color: #2a2a2a;
    text-decoration: underline;
}

/* Badge Styles */
.dh-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dh-badge-success {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.dh-badge-warning {
    background: rgba(255, 193, 7, 0.15);
    color: #997404;
}

.dh-badge-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.dh-badge-info {
    background: rgba(13, 202, 240, 0.1);
    color: #0dcaf0;
}

.dh-badge-primary {
    background: rgba(42, 42, 42, 0.1);
    color: #2a2a2a;
}

.dh-badge-turquoise {
    background: rgba(32, 178, 170, 0.15);
    color: #20B2AA;
}

.dh-badge-secondary {
    background: rgba(108, 117, 125, 0.15);
    color: #6c757d;
}

/* ========================================
   DanceHub Card & Layout Styles
   ======================================== */

.dh-dash-wrapper {
    padding: 2rem;
    width: 90%;
    margin: 0 auto;
    font-family: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: #ffffff;
    min-height: calc(100vh - 65px);
}

.dh-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dh-dash-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    color: #2a2a2a;
}

.dh-dash-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dh-dash-grid-row {
    display: flex;
    gap: 1.5rem;
}

.dh-dash-card {
    flex: 1;
    min-width: 0;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0px 2px 8px rgba(42, 42, 42, 0.08);
    border: 1px solid #e9ecef;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box;
}

.dh-dash-card:hover {
    box-shadow: 0px 4px 12px rgba(42, 42, 42, 0.12);
    border-color: #20B2AA;
}

.dh-dash-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #20B2AA;
    min-height: 52px;
}

.dh-dash-card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #2a2a2a;
}

.dh-dash-card-options {
    display: flex;
    gap: 0.5rem;
}

.dh-dash-option-link {
    font-size: 14px;
    color: #20B2AA;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #20B2AA;
    transition: all 0.3s ease;
}

.dh-dash-option-link:hover,
.dh-dash-option-link:active,
.dh-dash-option-link:focus {
    background: #20B2AA;
    color: #ffffff;
    text-decoration: none;
}

.dh-dash-card-content {
    font-size: 14px;
    color: #606060;
    line-height: 1.6;
}

.dh-dash-card-content a {
    color: #20B2AA;
    text-decoration: none;
}

.dh-dash-card-content a:hover {
    color: #2a2a2a;
    text-decoration: underline;
}

/* ========================================
   DanceHub Login Styles
   ======================================== */

.dh-login-wrapper {
    height: calc(100vh - 65px);
    min-height: calc(100vh - 65px);
    max-height: calc(100vh - 65px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    font-family: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
}

.dh-login-card {
    width: 100%;
    max-width: 380px;
    padding: 2.5rem;
    background: #2a2a2a;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(42, 42, 42, 0.3);
}

.dh-login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.dh-login-logo img {
    max-height: 50px;
    width: auto;
}

.dh-login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.dh-login-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.dh-login-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.dh-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dh-login-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dh-login-input-group label {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.dh-login-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.dh-login-input-wrapper i {
    position: absolute;
    left: 12px;
    color: #2a2a2a;
    font-size: 14px;
    transition: color 0.3s ease;
}

.dh-login-input {
    width: 100%;
    padding: 12px 12px 12px 38px;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    color: #2a2a2a;
    background: #ffffff;
    font-family: inherit;
    transition: all 0.3s ease;
}

.dh-login-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.3);
}

.dh-login-input-wrapper:focus-within i {
    color: #20B2AA;
}

.dh-login-input::placeholder {
    color: #999;
}

.dh-login-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: #20B2AA;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.dh-login-btn:hover {
    background: #1a9b94;
    box-shadow: 0 4px 12px rgba(32, 178, 170, 0.4);
}

.dh-login-btn i {
    font-size: 13px;
}

.dh-login-error {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dh-login-error i {
    font-size: 16px;
}

.dh-login-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.dh-login-footer a {
    color: #20B2AA;
    text-decoration: none;
    font-weight: 600;
    margin-left: 0.25rem;
}

.dh-login-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ========================================
   DanceHub Modal Styles
   ======================================== */

.dh-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(42, 42, 42, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

.dh-modal.show {
    display: flex;
}

.dh-modal-content {
    background-color: #ffffff;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(42, 42, 42, 0.2);
    max-width: 600px;
    width: 90%;
    border: 2px solid #2a2a2a;
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.dh-modal-header {
    background-color: #ffffff;
    color: #2a2a2a;
    border-bottom: 3px solid #20B2AA;
    border-radius: 10px 10px 0 0;
    padding: 30px 30px 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.dh-modal-header h2 {
    color: #20B2AA;
    font-weight: 600;
    font-size: 20px;
    margin: 0;
}

.dh-modal-close {
    color: #2a2a2a;
    opacity: 0.7;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    transition: all 0.3s ease;
}

.dh-modal-close:hover,
.dh-modal-close:focus {
    color: #20B2AA;
    opacity: 1;
    transform: scale(1.1);
    outline: none;
}

.dh-modal-body {
    padding: 30px;
    color: #2a2a2a;
    background-color: #ffffff;
    overflow-y: auto;
    flex: 1 1 auto;
}

.dh-modal-footer {
    background-color: #f5f5f0;
    border-top: 1px solid #e0e0e0;
    border-radius: 0 0 10px 10px;
    padding: 20px 30px;
    text-align: right;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.dh-btn {
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-family: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.dh-btn-primary {
    background: #20B2AA;
    color: #fff;
}

.dh-btn-primary:hover {
    background: #1a9b94;
    box-shadow: 0 4px 8px rgba(32, 178, 170, 0.3);
}

.dh-btn-secondary {
    background: #e8e8e8;
    color: #2a2a2a;
    border: 1px solid #d0d0d0;
}

.dh-btn-secondary:hover {
    background: #d0d0d0;
    border-color: #b8b8b8;
}

/* Form Controls */
.dh-form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 15px;
    color: #2a2a2a;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.dh-form-control:focus {
    outline: none;
    border-color: #20B2AA;
    box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.1);
}

/* Footer Styles (Polai-inspired gray) */
.dh-footer {
    background: #2a2a2a;
    color: #ffffff;
    padding: 2rem;
    margin-top: 3rem;
    border-top: 3px solid #20B2AA;
}

.dh-footer a {
    color: #20B2AA;
    text-decoration: none;
    transition: color 0.3s ease;
}

.dh-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Secondary Background (Footer Gray) */
.dh-bg-secondary {
    background: #2a2a2a;
    color: #ffffff;
}

.dh-bg-secondary-light {
    background: #3a3a3a;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    .dh-dash-wrapper {
        width: 95%;
        padding: 1rem;
    }

    .dh-dash-grid-row {
        flex-direction: column;
    }

    .dh-modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .dh-modal-header {
        padding: 20px 20px 15px 20px;
    }

    .dh-modal-body {
        padding: 20px;
    }

    .dh-modal-footer {
        padding: 15px 20px;
        flex-direction: column;
    }

    .dh-btn {
        width: 100%;
    }
}


/* content_dancepilot */

:root {
    --dp-bg-color: #1A1A1A; /* Sehr dunkles Grau, fast Schwarz */
    --dp-surface-color: #25282C; /* Dunkelgrau für Oberflächen */
    --dp-surface-hover: #2E3237; /* Etwas helleres Grau für Hover */
    --dp-border-color: #3A3F44; /* Dezente Randfarbe */
    --dp-text-primary: #E8EAED; /* Helles Grau für Haupttext */
    --dp-text-primary-rgb: 232, 234, 237;
    --dp-text-secondary: #A8ADB3; /* Mittleres Grau für Sekundärtext */
    --dp-text-secondary-rgb: 168, 173, 179;
    --dp-accent-color: #00a18c; /* Türkis */
    --dp-accent-rgb: 0, 161, 140;
    --dp-success-color: var(--dp-accent-color); /* NEU: Türkis als Success-Farbe */
    --dp-success-rgb: var(--dp-accent-rgb);     /* NEU: Türkis als Success-Farbe */
    --dp-danger-color: #E57373; /* Rot, wird für Warnungen verwendet */
    --dp-danger-rgb: 229, 115, 115;
    --dp-warning-color: #FFCA28;
    --dp-warning-rgb: 255, 202, 40;

    /* NEUE KATEGORIE-FARBEN (angepasst) */
    --dp-cat-warnings-color: var(--dp-danger-color); /* Rot für Warnungen */
    --dp-cat-warnings-rgb: var(--dp-danger-rgb);
    --dp-cat-administration-color: #8E44AD;   /* Lila für Administration */
    --dp-cat-administration-rgb: 142, 68, 173;
    --dp-cat-currentplan-color: var(--dp-accent-color); /* NEU: Türkis für Kurse & Dienstplan */
    --dp-cat-currentplan-rgb: var(--dp-accent-rgb);
    --dp-cat-coursesplanning-color: #3498DB; /* Blau für Kurse & Planung */
    --dp-cat-coursesplanning-rgb: 52, 152, 219;
    --dp-cat-events-color: var(--dp-accent-color); /* Türkis (Standard Akzent) für Events */
    --dp-cat-events-rgb: var(--dp-accent-rgb);
    /* Alte Farbvariablen werden entfernt oder durch die neuen ersetzt */

    /* NEU: Kategorie "Codes" */
    --dp-cat-codes-color: #4A6B82;   /* Stahlblau für Codes */
    --dp-cat-codes-rgb: 74, 107, 130;

    --dp-font-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --dp-font-monospace: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

body {
    font-family: var(--dp-font-sans);
    background-color: var(--dp-bg-color);
    color: var(--dp-text-primary);
    line-height: 1.6;
    font-size: 16px; /* Basis-Schriftgröße */
}

/* Bootstrap Overrides falls nötig, oder generelle Tags */
h1, h2, h3, h4, h5, h6 {
    color: var(--dp-text-primary);
    font-weight: 600;
    margin-top: 0; /* Üblichen Browser-Margin entfernen für konsistente Abstände */
    margin-bottom: 0.75em; /* Konsistenter unterer Margin */
}

/* MODULE BOOTSTRAP OVERRIDES */

/* Define the success color */
/* :root { -- already defined above 
    --success-color: 85,148,77;
    --success-font-color: #fff;
  } */
  
/* Text */
.text-success {
    color: var(--dp-success-color) !important;
}

/* Background */
.bg-success {
    background-color: var(--dp-success-color) !important;
}

/* Buttons */
.btn-success {
    background: var(--dp-success-color) !important;
    border-color: var(--dp-success-color) !important;
    color: #fff !important;
    font-family: var(--dp-font-sans);
}
  
.btn-success:hover {
    background: rgba(var(--dp-success-rgb), 0.8) !important;
    border-color: rgba(var(--dp-success-rgb), 0.8) !important;
    color: #fff !important;
}

.btn-success:focus, .btn-success.focus {
  border-color: var(--dp-success-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--dp-success-rgb), 0.5) !important;
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active {
    background-color: var(--dp-success-color) !important;
    border-color: var(--dp-success-color) !important;
}

.btn-outline-success {
    border-color: var(--dp-success-color) !important;
    color: var(--dp-success-color) !important;
}

.btn-outline-success:hover {
    background-color: var(--dp-success-color) !important;
    color: #fff !important;
}

/* Badge */
.badge-success {
    background-color: var(--dp-success-color) !important;
    color: #fff !important;
}
  
/* Define the danger color */
/* :root { -- already defined above
    --danger-color: 185,62,62;
    --danger-font-color: #fff;
} */
    
/* Text */
.text-danger {
    color: var(--dp-danger-color) !important;
}
    
/* Buttons */
.btn-danger {
    background: var(--dp-danger-color);
    border-color: var(--dp-danger-color);
    color: #fff; 
    font-family: var(--dp-font-sans);
}
    
.btn-danger:hover {
    background: rgba(var(--dp-danger-color), 0.8);
    border-color: rgba(var(--dp-danger-color), 0.8);
    color: #fff;
}

.btn-outline-danger {
    border-color: var(--dp-danger-color);
    color: var(--dp-danger-color);
}

.btn-outline-danger:hover {
    border-color: var(--dp-danger-color);
    background-color: var(--dp-danger-color);
    color: #fff;
}

/* Badge */
.badge-danger {
    background-color: var(--dp-danger-color);
    color: #fff;
}


/* Define the warning color */
/* :root { -- already defined above
--warning-color: 194,173,67;
} */
    
/* Text */
.text-warning {
    color: var(--dp-warning-color) !important;
}
    
/* Buttons */
.btn-warning {
    background: var(--dp-warning-color);
    border-color: var(--dp-warning-color);
    color: #1A1C1E; /* Dunkler Text für guten Kontrast auf Gelb */
    font-family: var(--dp-font-sans);
}
    
.btn-warning:hover {
    background: rgba(var(--dp-warning-color), 0.8);
    border-color: rgba(var(--dp-warning-color), 0.8);
    color: #1A1C1E;
}
    
.btn-outline-warning {
    border-color: var(--dp-warning-color);
    color: var(--dp-warning-color);
}
    
.btn-outline-warning:hover {
    border-color: var(--dp-warning-color);
    background-color: var(--dp-warning-color);
    color: #1A1C1E;
}
    
/* Badge */
.badge-warning {
    background-color: var(--dp-warning-color);
    color: #1A1C1E;
}
    

/* MODULE CSS*/

.cal-container {
    width: 100%;
    margin-bottom: 0;
}

.cal-title {
    width: 100%;
    background: var(--dp-bg-color);
    padding: 10px 1%;
}

.cal-options {
    width: 100%;
    background: rgba(52, 58, 64, .7);
    padding: 3px 1%;
    text-align: center;
}

.cal-option {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
}

.cal-info {
    width: 100%;
    background: rgba(52, 58, 64, .7);
    padding: 20px 1% 10px 1%;
    text-align: center;
}

.cal-head {
    display: table;
    width: 100%;
    margin: 0 0 0 0;
    background: rgba(52, 58, 64, .7);
    padding: 0;
    text-align: center;
    border-top: 1px solid #555;
}

.cal-day {
    width: 14%;
    display: table-cell;
    vertical-align: top;
    min-height: 100%;
}

@media only screen and (max-width: 1279px) {
    .cal-day {
        display: block;
    }

    .cal-day {
        width: 100%;
        display: block;
        min-height: auto;
    }
}

.cal-day-border {
    border-right: 1px solid #555;
}

.cal-day-title {
    font-size: 18px;
    font-weight: bold;
    padding: 3px 0;
    min-height: 40px;
}

.cal-day-entry {
    background-color: #fff;
    color: #000;
    border-radius: 4px;
    border: 1px solid #999;
    margin: 4px 8px;
    padding: 2px 4px;
    font-weight: normal;
    text-align: left;
    text-decoration: none !important;
}



/* TIMELINE */
ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 40px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}



/* HR CORRECTION */
hr {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}


.dpqrshow {
    width: 100%;
    max-width: 400px;
}




li.picker-switch > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > a:nth-child(1) {
    color: #000;
}



/* Fixing word break for import table */
#classimporttbl td{
    word-break: break-word;
  }




.fixed-top {
    padding-bottom: 0 !important;
}


/* NG-Cards Extensions */
.ng-card-100 {
    width: 100%;
}

.ng-card-50 {
    width: 50%;
}

@media screen and (max-width: 1079px) {
    .ng-card-50 {
        width: 100%;
    }
}


/*** CURRENCY FORMAT ***/
.currency {
    padding-left:12px;
}

.currency-symbol {
    position:absolute;
    padding: 2px 5px;
}


/* HIGHLIGHT FOR CLIENT SEARCH */
.clientsearch-highlight {
    background-color: rgba(255, 55, 55, 0.4) ;
}

/* Ensure FullCalendar event content wraps and does not overflow into next column */
.fc .fc-event-title, .fc .fc-event-main, .fc .fc-event-title-container, .fc .fc-event-time {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.3;
}

/* Optionally, make sure the event container does not overflow */
.fc .fc-daygrid-event {
    max-width: 100%;
    overflow: hidden;
}

/* Ensure 'Kalenderwoche' is perfectly centered under the month title */
.fc-kw-display {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.1em;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-top: 2px;
}

/* Force filter bar to be a row on desktop, column on mobile */
.filter-dropdown-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
@media (max-width: 900px) {
    .filter-dropdown-row {
        flex-direction: column !important;
        align-items: stretch;
    }
}

/* FullCalendar: Listenansicht Tageskopf dunkler Hintergrund */
.fc-theme-standard .fc-list-day-cushion {
  background: rgba(52,58,64,0.7) !important;
  color: #fff;
}

/* FullCalendar: Listenansicht Event Hover dunkleres Grau */
.fc .fc-list-event:hover td {
  background: rgba(52,58,64,0.7) !important;
  color: #fff !important;
}



/* FullCalendar: Mehr-Link ("+X weitere") dunkleres Grau */
:root {
  --fc-more-link-bg-color: #232323;
  --fc-neutral-bg-color: #232323;
  --fc-today-bg-color: rgb(236, 255, 230, 0.2);
}

.fc .fc-more-popover .fc-popover-body {
    background-color: #232323;

    
}

/* Dashboard Styles */
.dashboard-layout-container {
    display: flex;
    flex-direction: column; 
    min-height: 100vh; 
    background-color: var(--dp-bg-color);
    overflow: visible; 
    /* margin-top: 15px; */ /* Entfernt, da Header jetzt den Abstand regelt */
}

/* Globaler Header Anpassungen */
.dashboard-global-header {
    display: flex; /* Wiederhergestellt */
    align-items: center; /* Wiederhergestellt */
    padding: 10px 25px; /* Wiederhergestellt - Standard-Padding für den Header */
    background-color: var(--dp-surface-color); /* Wiederhergestellt - Hintergrund für den Header */
    /* border-bottom: 1px solid var(--dp-border-color); */ /* Optional: eine feine Linie unter dem Header, falls gewünscht, sonst bleibt die Linie nur unter dem Titel */
    height: auto; /* Wiederhergestellt - Höhe passt sich dem Inhalt an */
    /* margin: 0; */ /* Standardmäßig 0 oder spezifisch setzen falls nötig */
    /* overflow: visible; */ /* Geändert von hidden zu visible oder entfernen, falls Inhalt nicht überläuft */
    box-sizing: border-box; 
}

/* Styling für den Titel - Selektor bleibt generisch, da er die korrekten Stile enthält */
.appformtitle {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--dp-accent-color); 
    margin-bottom: 0; 
    padding-bottom: 8px; /* Für die Akzentlinie unter dem Text */
    border-bottom: 3px solid var(--dp-accent-color); /* Akzentlinie */
    line-height: 1.2;
    display: inline-block; /* Wichtig für korrekte Darstellung von Padding/Border */
    /* margin-left: 0; */ /* Standardmäßig, keine spezielle Einrückung */
}

.dashboard-global-header .appformheader {
    /* Keine speziellen Styles hier, dient als einfacher Wrapper */
    margin-bottom: 0 !important; /* von Bootstrap, falls nötig */
}

/* Wrapper für Sidebar und Hauptinhalt */
.dashboard-body-content-wrapper {
    display: flex;
    flex-grow: 1;
    overflow: visible; 
}

/* Neue CSS-Regeln für den Titel-Container im Main Content - HIER EINFÜGEN */
.main-content-header {
    padding: 10px 25px 0 25px; /* Oben 10px für Bündigkeit, L/R 25px Standard-Padding, Unten 0 (appformtitle hat Gestaltung) */
    margin-bottom: 20px;      /* Abstand zu den ersten Widgets/Kategorien, vorher 15px, auf 20px erhöht für etwas mehr Luft */
    background-color: transparent; /* Hintergrund wie der Hauptinhalt (body --dp-bg-color) */
}

/* Sidebar - Minimalstil */
.dashboard-sidebar {
    width: 260px;
    background-color: var(--dp-bg-color); 
    padding: 0 15px 20px 15px; /* padding-top auf 0, Rest wie zuvor oder angepasst */
    border-right: 1px solid var(--dp-border-color);
    flex-shrink: 0; 
    box-sizing: border-box; 
    transition: width 0.3s ease, padding 0.3s ease; /* Animation für Kollaps */
    /* overflow-y: auto; für internen Scroll, falls Inhalt länger - wird von .sidebar-fixed behandelt */
}

/* Styles für die kollabierte Sidebar */
.dashboard-sidebar.sidebar-collapsed {
    width: 70px; /* Breite für Icons + Toggle Button */
    padding: 20px 10px;
}

.dashboard-sidebar.sidebar-collapsed .sidebar-navigation {
    display: none; /* Navigations-Menü komplett ausblenden */
}

.dashboard-sidebar.sidebar-collapsed .sidebar-logo-area {
    justify-content: center; /* Toggle Icon zentrieren */
    align-items: center; /* Icon auch vertikal zentrieren */
    padding: 10px 0; /* Etwas Padding oben/unten für das Icon */
    border-bottom: none; /* Keine Trennlinie, wenn Navi weg ist */
    height: auto; /* Höhe an Inhalt anpassen */
}

/* Wiederhergestellte Sidebar Navigations-Styles */
.sidebar-logo-area {
    padding: 10px; /* Einheitliches Padding (10px) oben/unten und links/rechts */
    margin-bottom: 10px; /* Abstand nach unten zu den Nav-Items, da keine border-bottom mehr */
    border-bottom: none; /* Keine Trennlinie mehr unter dem Logo-Bereich */
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    min-height: 0; /* Erlaubt flexible Höhe basierend auf Inhalt und Padding */
    flex-shrink: 0; /* HINZUGEFÜGT: Verhindert Schrumpfen */
}

.sidebar-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-navigation .nav-item {
    display: flex;
    align-items: center;
    padding: 11px 15px; 
    margin-bottom: 5px; 
    border-radius: 5px; 
    color: var(--dp-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem; 
    transition: background-color 0.15s, color 0.15s;
}

.sidebar-navigation .nav-item i {
    margin-right: 12px;
    font-size: 1.05rem; 
    width: 18px; 
    text-align: center;
    color: var(--dp-text-secondary); 
    transition: color 0.15s;
}

.sidebar-navigation .nav-item:hover {
    background-color: var(--dp-surface-hover);
    /* color: var(--dp-text-primary); */ /* Allgemeine Hover-Farbe wird durch spezifische ersetzt */
}
/* .sidebar-navigation .nav-item:hover i { color: var(--dp-accent-color); } */ /* Globale Akzentfarbe entfernt */

.sidebar-navigation .nav-item.active {
    /* background-color: var(--dp-accent-color); */ /* Globale Akzentfarbe entfernt */
    color: #fff; 
    box-shadow: 0 1px 3px rgba(0,0,0, 0.2); /* Angepasster Schatten für bessere Sichtbarkeit mit Kat-Farben */
}

.sidebar-navigation .nav-item.active i {
    color: #fff; 
}

/* --- NEU: Kategorie-spezifisches Styling für Sidebar Nav-Items --- */

/* Warnings (war Overview) */
.sidebar-navigation .nav-item[data-category="warnings"]:hover,
.sidebar-navigation .nav-item[data-category="warnings"]:hover i {
    color: var(--dp-cat-warnings-color);
}
.sidebar-navigation .nav-item[data-category="warnings"].active {
    background-color: var(--dp-cat-warnings-color);
}
.sidebar-navigation .nav-item[data-category="warnings"].active:hover {
    color: #fff; /* Keep text color white on hover for active warning items */
}
.sidebar-navigation .nav-item[data-category="warnings"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active warning items */
}

/* Administration (war Management) */
.sidebar-navigation .nav-item[data-category="administration"]:hover,
.sidebar-navigation .nav-item[data-category="administration"]:hover i {
    color: var(--dp-cat-administration-color);
}
.sidebar-navigation .nav-item[data-category="administration"].active {
    background-color: var(--dp-cat-administration-color);
}
.sidebar-navigation .nav-item[data-category="administration"].active:hover {
    color: #fff; /* Keep text color white on hover for active administration items */
}
.sidebar-navigation .nav-item[data-category="administration"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active administration items */
}

/* Current & Plan (war Operations) */
.sidebar-navigation .nav-item[data-category="currentplan"]:hover,
.sidebar-navigation .nav-item[data-category="currentplan"]:hover i {
    color: var(--dp-cat-currentplan-color);
}
.sidebar-navigation .nav-item[data-category="currentplan"].active {
    background-color: var(--dp-cat-currentplan-color);
}
.sidebar-navigation .nav-item[data-category="currentplan"].active:hover {
    color: #fff; /* Keep text color white on hover for active currentplan items */
}
.sidebar-navigation .nav-item[data-category="currentplan"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active currentplan items */
}

/* Courses & Planning (war Planning) */
.sidebar-navigation .nav-item[data-category="coursesplanning"]:hover,
.sidebar-navigation .nav-item[data-category="coursesplanning"]:hover i {
    color: var(--dp-cat-coursesplanning-color);
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active {
    background-color: var(--dp-cat-coursesplanning-color);
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active:hover {
    color: #fff; /* Keep text color white on hover for active coursesplanning items */
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active coursesplanning items */
}

/* Events (NEU) */
.sidebar-navigation .nav-item[data-category="events"]:hover,
.sidebar-navigation .nav-item[data-category="events"]:hover i {
    color: var(--dp-cat-events-color);
}
.sidebar-navigation .nav-item[data-category="events"].active {
    background-color: var(--dp-cat-events-color);
}
.sidebar-navigation .nav-item[data-category="events"].active:hover {
    color: #fff; /* Keep text color white on hover for active event items */
}
.sidebar-navigation .nav-item[data-category="events"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active event items */
}

/* Codes (NEU) */
.sidebar-navigation .nav-item[data-category="codes"]:hover,
.sidebar-navigation .nav-item[data-category="codes"]:hover i {
    color: var(--dp-cat-codes-color);
}
.sidebar-navigation .nav-item[data-category="codes"].active {
    background-color: var(--dp-cat-codes-color);
}
.sidebar-navigation .nav-item[data-category="codes"].active:hover {
    color: #fff;
}
.sidebar-navigation .nav-item[data-category="codes"].active:hover i {
    color: #fff;
}

/* Reports entfernt - falls wieder benötigt, hier hinzufügen */

/* Hauptinhalt - Minimalstil */
.dashboard-main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Wichtig für Scrollbarkeit des Inhalts */
    padding: 20px 25px; 
    box-sizing: border-box;
}

.dashboard-categories-wrapper {
    flex-grow: 1;
    background-color: var(--dp-bg-color);
    transition: opacity 0.3s ease, transform 0.3s ease; 
    opacity: 0; /* Initial unsichtbar */
    transform: translateY(10px); /* Initial leicht verschoben */
    will-change: opacity, transform; /* NEU: Browser-Optimierungshinweis */
    /* display: none; wird initial nicht gesetzt, damit JS es beim ersten Mal animieren kann, wenn nötig */
    display: flex; /* Haupt-Wrapper als Flex-Container für die Kategorien */
    flex-direction: column;
    gap: 30px; /* Abstand zwischen den Kategorien */
}

/* Styling für die einzelnen dashboard-category-content DIVs */
.dashboard-category-content {
    /* padding-top: 20px; */ /* ENTFERNT - Abstand wird vom Grid übernommen */
    /* border-top: 3px solid transparent; */ /* ENTFERNT - Platzhalter für farbigen Rand */
    /* background-color: rgba(255,255,255,0.01); */ /* Optional: sehr leichter Hintergrund für jede Kategorie */
    border-radius: 0 0 4px 4px; /* Abrundung unten, falls gewünscht */
    /* Wichtig: Der Hintergrundgradient bleibt hier */
}

/* Das Grid innerhalb jeder Kategorie bekommt den oberen Abstand */
.dashboard-category-content .dashboard-grid {
    margin-top: 20px;
    display: grid; /* Hinzugefügt für Grid-Layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Hinzugefügt für responsive Spalten */
    gap: 20px; /* Hinzugefügt für den gewünschten Abstand */
}

.category-is-overview {
    /* border-top-color: var(--dp-cat-overview-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-overview-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT, da Hover-Effekt entfernt wird */
}
/* ENTFERNT .category-is-overview:hover Regel */

.category-is-management {
    /* border-top-color: var(--dp-cat-management-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-management-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-management:hover Regel */

.category-is-operations {
    /* border-top-color: var(--dp-cat-operations-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-operations-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-operations:hover Regel */

.category-is-planning {
    /* border-top-color: var(--dp-cat-planning-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-planning-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-planning:hover Regel */

.category-is-reports {
    /* border-top-color: var(--dp-cat-reports-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-reports-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-reports:hover Regel */

/* NEU: Kategorie-spezifischer Hintergrund für "Codes" */
.category-is-codes {
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-codes-rgb), 0.04) 0%, transparent 35%);
}

/* Zustand, wenn das Dashboard sichtbar und animiert werden soll */
.dashboard-categories-wrapper.dashboard-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Zustand für die Ausblendanimation (bevor display:none gesetzt wird) */
.dashboard-categories-wrapper.dashboard-hidden-animated {
    opacity: 0;
    transform: translateY(10px);
}

/* Klasse .sidebar-fixed für die fixierte Sidebar */
.sidebar-fixed {
    position: fixed;
    top: 0; /* JS sets this to currentGlobalNavHeight + 'px' */
    left: 0;
    width: 260px;
    height: 100vh; /* JS sets this to calc(100vh - currentGlobalNavHeight + 'px') */
    background-color: var(--dp-bg-color);
    border-right: 1px solid var(--dp-border-color);
    padding: 0 15px 20px 15px; /* Angepasst: padding-top 0, Rest konsistent mit .dashboard-sidebar */
    box-sizing: border-box;
    /* overflow-y: auto; */ /* ENTFERNT: Wird durch .sidebar-navigation gehandhabt */
    z-index: 1031; /* ERHÖHT von 1000, um über Standard-Bootstrap-Navbar (1030) zu liegen */
    display: flex; /* HINZUGEFÜGT */
    flex-direction: column; /* HINZUGEFÜGT */
}

.dashboard-loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: var(--dp-text-secondary);
    font-size: 1rem;
}

.dashboard-loading-placeholder .spinner-border {
    margin-bottom: 15px;
}

/* --- Fokus-Bereiche anpassen --- */
.dashboard-focus-area {
    background-color: var(--dp-surface-color);
    border-radius: 6px; 
    padding: 20px; 
    display: flex !important; /* DEBUG: Explizit setzen */
    flex-direction: column !important; /* DEBUG: Explizit setzen */
    gap: 15px; 
    border: 1px solid var(--dp-border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
    margin-bottom: 25px; 
}

.area-title {
    font-size: 1.25rem; 
    font-weight: 600;
    color: var(--dp-text-primary);
    margin: 0;
    display: flex;
    align-items: center; /* Vertically align .title-main-group and .area-title-count */
    /* gap: 10px; */ /* Removed, handled by margin on count or within title-main-group */
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}

/* NEU: Wrapper für Icon und Text, bekommt die Unterstreichung */
.title-main-group {
    display: inline-flex; /* Damit es nicht die volle Breite nimmt, wenn kein Zähler da ist */
    align-items: center;  /* Icon und Text zentrieren */
    gap: 10px;            /* Abstand zwischen Icon und Text */
    padding-bottom: 5px;  /* Für die Unterstreichung */
    border-bottom: 2px solid transparent; /* Basis für Unterstreichung, Farbe kommt von Kategorie */
    color: inherit;       /* Textfarbe von .area-title erben */
}

.area-title i { /* Diese Regel gilt für Icons direkt im .area-title oder in .title-main-group */
    /* color: var(--dp-accent-color); */ /* Globale Akzentfarbe entfernt, wird pro Kategorie gesetzt */
    font-size: 1.2rem; 
}

/* Styling für den Zähler im Area-Titel - bleibt weitgehend gleich */
.area-title-count {
    display: inline-flex; /* Für Padding und Zentrierung */
    align-items: center;
    justify-content: center;
    min-width: 26px; /* Mindestbreite für einheitliches Aussehen */
    height: 26px; /* Feste Höhe für einheitliches Aussehen */
    padding: 0 8px; /* Horizontaler Padding, vertikal durch height kontrolliert */
    border-radius: 13px; /* Für perfekte Kreisform bei fester Höhe/Breite, oder abgerundete Ecken */
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff; /* Standard Textfarbe weiß, gut für die meisten Akzentfarben */
    margin-left: 8px; /* Kleiner Abstand zum Titeltext */
    line-height: 1; /* Wichtig für vertikale Zentrierung des Textes */
}

/* Kategorie-spezifisches Styling für Widget-Titel ANPASSEN */
/* Icons werden über .area-title i selektiert, Unterstreichung über .title-main-group */

.category-is-warnings .title-main-group {
    border-bottom-color: var(--dp-cat-warnings-color);
}
.category-is-warnings .area-title i {
    color: var(--dp-cat-warnings-color);
}
.category-is-warnings .area-title-count {
    background-color: var(--dp-cat-warnings-color);
}

.category-is-administration .title-main-group {
    border-bottom-color: var(--dp-cat-administration-color);
}
.category-is-administration .area-title i {
    color: var(--dp-cat-administration-color);
}
.category-is-administration .area-title-count {
    background-color: var(--dp-cat-administration-color);
}

.category-is-currentplan .title-main-group {
    border-bottom-color: var(--dp-cat-currentplan-color);
}
.category-is-currentplan .area-title i {
    color: var(--dp-cat-currentplan-color);
}
.category-is-currentplan .area-title-count {
    background-color: var(--dp-cat-currentplan-color);
}

.category-is-coursesplanning .title-main-group {
    border-bottom-color: var(--dp-cat-coursesplanning-color);
}
.category-is-coursesplanning .area-title i {
    color: var(--dp-cat-coursesplanning-color);
}
.category-is-coursesplanning .area-title-count {
    background-color: var(--dp-cat-coursesplanning-color);
}

/* Events (NEU) */
.category-is-events .title-main-group {
    border-bottom-color: var(--dp-cat-events-color);
}
.category-is-events .area-title i {
    color: var(--dp-cat-events-color);
}
.category-is-events .area-title-count {
    background-color: var(--dp-cat-events-color);
}

/* Codes (NEU) */
.category-is-codes .title-main-group {
    border-bottom-color: var(--dp-cat-codes-color);
}
.category-is-codes .area-title i {
    color: var(--dp-cat-codes-color);
}
.category-is-codes .area-title-count {
    background-color: var(--dp-cat-codes-color);
}

/* --- NEUE STYLES FÜR 3-WOCHEN-KALENDERANSICHT --- */
.team-calendar-view-area {
    padding: 15px;
    /* overflow-x: auto; */ /* ENTFERNT, da Umbruch pro Woche erfolgt und kein horizontales Scrollen des Gesamtbereichs gewünscht ist */
}

.team-calendar-grid { /* Wird zum Container für die Wochen */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen den Wochenblöcken */
    width: 100%;
    /* Die folgenden Grid-Eigenschaften werden entfernt, da sie jetzt in .calendar-week sind */
    /* grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); */
    /* gap: 5px; */
}

.calendar-week { /* Wird zum Grid-Container für die 7 Tage einer Woche */
    /* display: contents; */ /* ENTFERNT: .calendar-week wird der Grid-Container */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); /* Tage umbrechen innerhalb der Woche */
    gap: 5px; /* Abstand zwischen den Tagen */
    /* Die PHP-Struktur erzeugt bereits einen .calendar-week Div für jede Woche. */
}

.calendar-day {
    background-color: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    border-radius: 6px;
    padding: 8px;
    min-height: 120px; /* Mindesthöhe für einheitliches Aussehen */
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.calendar-day:hover {
    background-color: var(--dp-surface-hover);
    border-color: var(--dp-accent-color);
}

.calendar-day.past {
    background-color: rgba(var(--dp-surface-rgb, 37, 40, 44), 0.7); /* Leicht abgedunkelt und entsättigt */
    color: var(--dp-text-secondary);
}
.calendar-day.past .day-header span {
    color: var(--dp-text-secondary);
}
.calendar-day.past .calendar-job-entry {
    opacity: 0.7;
}


.calendar-day.today {
    border: 1px solid var(--dp-accent-color);
    background-color: var(--dp-surface-hover); /* Hebt den heutigen Tag leicht hervor */
}

.calendar-day.today .day-header .day-number {
    color: var(--dp-accent-color);
    font-weight: bold;
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--dp-border-color);
}

.day-header .day-name {
    font-size: 0.85em;
    color: var(--dp-text-secondary);
    font-weight: 600;
}

.day-header .day-number {
    font-size: 0.9em;
    color: var(--dp-text-primary);
    font-weight: 600;
}

/* NEU: Styling für das Monats-Suffix */
.day-header .day-number .month-suffix {
    font-size: 0.75em; /* Kleiner als die Tageszahl */
    color: var(--dp-text-secondary); /* Etwas dezenter als die Tageszahl */
    font-weight: 500; /* Weniger fett */
    /* opacity: 0.8; */ /* Alternative oder Ergänzung zur Farbänderung */
    margin-left: 1px; /* Kleiner Abstand zum Tag, falls der Punkt nicht reicht */
}

.calendar-day.today .day-header .day-number .month-suffix {
    color: var(--dp-accent-color); /* Auch das Suffix im Akzent, wenn der Tag heute ist, aber weiterhin dezenter */
    opacity: 0.8;
}

/* .day-jobs-list wurde bereits für Scrollbars gestyled, hier ggf. Ergänzungen */
.day-jobs-list {
    flex-grow: 1; /* Damit die Liste den verfügbaren Platz im Tag füllt */
    overflow-y: auto;
    min-height: 50px; /* Mindesthöhe, damit Scrollbar ggf. erscheint */
}


.calendar-job-entry {
    /* background-color: rgba(var(--dp-accent-rgb, 0, 161, 140), 0.15); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
    color: var(--dp-text-primary);
    padding: 6px 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; /* box-shadow zur Transition hinzugefügt */
    /* border-left: 3px solid var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
}

.calendar-job-entry:hover {
    /* background-color: rgba(var(--dp-accent-rgb, 0, 161, 140), 0.3); */ /* Entfernt - Hover Hintergrund bleibt dynamisch */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Behält den Schatten bei Hover */
}

.calendar-job-entry:last-child {
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* background-color: var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
    /* color: #fff; */ /* Farbe wird durch Kontrast zur dynamischen BG-Farbe bestimmt, idealerweise weiß, aber nicht explizit hier gesetzt */
    /* border: 1px solid var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
}

/* .calendar-job-entry:hover .job-code-badge { */
.job-code-badge {
    font-size: 0.8em;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* background-color: var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
    color: var(--dp-text-primary); /* Angepasst für besseren Kontrast auf variablen Hintergründen, ggf. anpassen */
    /* border: 1px solid var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
}

/* Entferne spezifischen Hover-Effekt für das Badge, da Badge-Farbe jetzt dynamisch ist und Hover nicht mehr sinnvoll */
/* .calendar-job-entry:hover .job-code-badge {
    background-color: var(--dp-surface-color);
    color: var(--dp-accent-color);
} */

.job-entry-line-2 {
    font-size: 0.75em; /* Reduced from 0.8em */
    color: var(--dp-text-secondary);
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 992px) { /* Gilt für größere Tablets */
    .team-calendar-view-area {
        overflow-x: visible; /* Sicherstellen, dass hier kein Scrollen erzwungen wird */
    }
    .calendar-week { /* Anpassung der Tagesbreite für diese Bildschirmgröße */
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        /* gap bleibt 5px, wenn nicht hier überschrieben, oder explizit setzen: */
        gap: 5px;
    }
    .team-calendar-grid {
        gap: 12px; /* Ggf. Abstand zwischen Wochen anpassen */
    }
}

@media (max-width: 768px) { /* Gilt für kleinere Tablets */
    .team-calendar-view-area {
        overflow-x: visible;
    }
    .calendar-week { /* Anpassung der Tagesbreite */
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
        gap: 4px;
    }
    .team-calendar-grid {
        gap: 10px; /* Ggf. Abstand zwischen Wochen anpassen */
    }
}

@media (max-width: 576px) { /* Gilt für Mobilgeräte */
    .team-calendar-view-area {
        overflow-x: visible;
        padding: 10px;
    }
    .calendar-week { /* Anpassung der Tagesbreite */
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); /* Kleinere Mindestbreite */
        gap: 4px;
    }
    .team-calendar-grid {
        gap: 8px; /* Ggf. Abstand zwischen Wochen anpassen */
    }
    .calendar-day {
        min-height: 100px; /* Weniger Mindesthöhe, wenn nur ein Tag pro Zeile */
        padding: 6px;
    }
    .day-header {
        padding-bottom: 4px;
        margin-bottom: 4px;
    }
    .calendar-job-entry {
        padding: 5px 7px;
        font-size: 0.8em;
    }
}

/* Globale Anpassung für Bootstrap .modal, um Konflikte mit sticky Headern zu vermeiden, FALLS ein Modal über den Kalender gelegt wird */
.modal {
    z-index: 1050; /* Standard Bootstrap z-index für Modals */
}


/* News List Styling */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Weniger Abstand */
}

.news-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 15px; /* Kompakter */
    background-color: var(--dp-surface-hover); /* Leichter Kontrast zum Area-BG */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, border-left-color 0.2s;
    border-left: 3px solid transparent;
}

.news-item:hover {
    background-color: var(--dp-surface-hover); /* Bleibt gleich oder leicht heller */
    border-left-color: var(--dp-accent-color);
    /* box-shadow: 0 0 10px rgba(var(--dp-accent-rgb),0.1); */ /* Optional: Leichter Hover-Schatten */
}

.news-icon {
    margin-right: 12px;
    font-size: 1.5rem; /* Angepasst */
    color: var(--dp-text-secondary);
    padding-top: 1px;
}

.news-icon i {
    color: var(--dp-accent-color);
}

.news-title {
    font-size: 1rem; /* Angepasst */
    font-weight: 500;
    color: var(--dp-text-primary);
    margin-bottom: 3px;
}

.news-date {
    font-size: 0.8rem;
    color: var(--dp-text-secondary);
}

.news-item-empty {
    padding: 15px;
    text-align: center;
    font-style: italic;
    color: var(--dp-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    background-color: transparent;
    border-radius: 4px;
}

/* Due Jobs & Next Jobs共通 Styling */
.due-jobs-list {
    display: flex; /* Changed from column to row-based flex */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 15px; /* Adjusted gap for a wrapped layout */
    /* flex-direction: column; */ /* Removed, as it's now row-based by default with wrap */
}

.due-job-item {
    display: flex;
    background: var(--dp-surface-hover); /* Leichter Kontrast */
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 12px 15px; /* Kompakter */
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    flex-basis: calc(50% - 8px); /* Aim for 2 items per row, subtracting half the gap */
    min-width: 280px; /* Minimum width before wrapping or shrinking too much */
    box-sizing: border-box; /* Ensure padding and border are included in flex-basis calculation */
}

@media (max-width: 768px) { /* Adjust for smaller screens */
    .due-job-item {
        flex-basis: 100%; /* Full width on smaller screens */
    }
}

.due-job-item:hover {
    border-color: var(--dp-accent-color);
    background: #31353A; /* Etwas hellerer Hover als surface-hover */
}

.due-job-date-time, .next-job-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 60px; /* Etwas schmaler */
    margin-right: 12px;
}

.due-job-day, .next-job-day {
    font-size: 0.8rem;
    font-weight: 600; /* Weniger fett */
    color: var(--dp-text-secondary);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.due-job-date, .next-job-datum {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    margin-top: 1px;
}

.due-job-time, .next-job-time {
    font-size: 0.8rem;
    color: var(--dp-text-secondary);
    margin-top: 1px;
}

.due-job-info, .next-job-info {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Weniger Gap */
    flex-grow: 1; 
}

.due-job-title, .next-job-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    margin-bottom: 0;
}

.due-job-unit, .next-job-unit {
    color: var(--dp-text-secondary);
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 5px;
}

.next-job-location {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    font-weight: 400;
}

.due-job-status-actions {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}

.status-button {
    padding: 4px 10px; /* Kompakter */
    border-radius: 3px;
    font-size: 0.75rem; /* Kleiner */
    font-weight: 500;
    text-decoration: none;
    display: inline-flex; 
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* My Classes Styling */
.my-classes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Schmalere Kacheln */
    gap: 10px; /* Reduzierter Gap */
}

.my-class-item {
    display: flex;
    /* align-items: flex-start; */ /* Nicht mehr nötig ohne Icon */
    background: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 10px 12px; /* Reduziertes Padding */
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.my-class-item:hover {
    border-color: var(--dp-accent-color);
    background: #31353A;
    transform: translateY(-1px); /* Subtilerer Hover-Effekt */
}

/* .my-class-icon-status { */ /* Entfernt, da Icon weg ist */
    /* font-size: 1.5rem;  */
    /* margin-right: 15px; */
    /* padding-top: 2px; */
/* } */

.my-class-info {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Reduzierter Gap */
    width: 100%; /* Sicherstellen, dass es die volle Breite einnimmt */
}

.my-class-title-code {
    display: flex;
    align-items: center;
    gap: 8px; /* Leicht erhöhter Gap für bessere Trennung Code/Name */
    margin-bottom: 0; /* Reduzierter Margin */
}

.my-class-code {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 5px; /* Leicht reduziertes Padding */
    border: 1px solid; 
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.my-class-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.my-class-dates {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
}

.my-class-status-text {
    font-size: 0.75rem;
    font-weight: 500; /* Etwas weniger fett */
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 1px;
}

/* Custom Accordion Styling */
.custom-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 6px; 
}

.accordion-item-modern {
    background-color: var(--dp-surface-hover); 
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    overflow: hidden; 
}

.accordion-button-modern {
    padding: 12px 15px; /* Kompakter */
    font-size: 0.95rem;
}

.accordion-body-modern {
    padding: 15px 15px 15px 15px; /* Einheitliches Padding */
    background-color: rgba(0,0,0,0.08); /* Etwas dunklerer Body */
    border-top: 1px solid var(--dp-border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.code-entry {
    font-size: 0.9rem;
    /* color: var(--dp-text-secondary); */ /* Wird unten spezifischer gesetzt */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0; /* Mehr vertikales Padding */
    border-bottom: 1px solid rgba(var(--dp-border-color-rgb, 58, 63, 68), 0.5); /* Subtilere Trennlinie, explizite RGB-Definition der Border-Color */
    transition: border-color 0.2s ease;
}

.code-entry:last-child {
    border-bottom: none;
}

.code-label {
    color: var(--dp-text-secondary);
    flex-shrink: 0; /* Verhindert, dass das Label schrumpft */
    margin-right: 10px;
    transition: color 0.2s ease;
}

.code-entry-interactive {
    cursor: pointer;
}

.code-entry-interactive:hover .code-label {
    color: var(--dp-accent-color);
}

.code-entry-interactive:hover {
    border-bottom-color: var(--dp-accent-color);
}

.code-value-placeholder {
    color: var(--dp-text-primary);
    font-family: var(--dp-font-monospace); /* Monospace für Code-Optik */
    letter-spacing: 1.5px; /* Etwas mehr Abstand für Platzhalter-Optik */
    background-color: rgba(var(--dp-surface-rgb, 37, 40, 44), 0.5); /* Leicht abgedunkelter Hintergrund */
    padding: 4px 8px;
    border-radius: 3px;
    cursor: default; /* Standard-Cursor, da Interaktion über Buttons */
    min-width: 80px; /* Mindestbreite für den Platzhalter */
    text-align: center;
}

.code-value-placeholder.is-revealed {
    background-color: transparent; /* Kein spezieller Hintergrund, wenn Code sichtbar */
    letter-spacing: normal; /* Normales Letter-Spacing für echten Code */
}

.code-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px; /* Abstand zum Code-Wert/Platzhalter */
}

.btn-toggle-code-visibility,
.btn-copy-code {
    background: transparent;
    border: 1px solid var(--dp-border-color);
    color: var(--dp-text-secondary);
    padding: 5px; /* Kleinere Buttons */
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex; /* Für Icon-Zentrierung */
    align-items: center;
    justify-content: center;
    width: 28px; /* Feste Breite */
    height: 28px; /* Feste Höhe */
}

.btn-toggle-code-visibility:hover,
.btn-copy-code:hover {
    border-color: var(--dp-accent-color);
    color: var(--dp-accent-color);
    background-color: rgba(var(--dp-accent-rgb), 0.05);
}

.btn-toggle-code-visibility i,
.btn-copy-code i {
    font-size: 0.9em; /* Passende Icon-Größe */
}

.code-entry.admin-code .admin-badge {
    /* margin-left: 10px; */ /* Wird durch Flexbox im Parent gesteuert */
    font-size: 0.7rem;
    padding: 2px 6px;
    background-color: rgba(var(--dp-cat-administration-rgb),0.2); /* Lila Akzent für Admin */
    color: var(--dp-cat-administration-color);
    border: 1px solid rgba(var(--dp-cat-administration-rgb),0.3);
    border-radius: 3px;
    white-space: nowrap; /* Verhindert Umbruch des Badges */
}


/* Voucher Orders, Polos, Vacations - Gemeinsames Styling für Items */
.voucher-orders-list, .polos-list, .vacations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1; /* ADDED: Make list content grow */
}

.voucher-order-item, .polo-item, .vacation-item {
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 12px 15px;
}

/* Voucher Order spezifisch */
.voucher-order-item {
    display: flex;
    flex-direction: column; 
    gap: 8px;
}

.voucher-order-info {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    font-weight: 500;
}

.voucher-order-customer {
    color: var(--dp-text-primary);
    font-size: 0.95rem;
}

.voucher-order-value {
    color: var(--dp-accent-color);
    font-size: 0.95rem;
    font-weight: 600;
}

.voucher-order-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--dp-text-secondary);
}

/* Polos spezifisch */
.polo-item {
    display: flex;
    align-items: center; 
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}
.polo-item:hover {
    border-color: var(--dp-accent-color);
    background: #31353A;
}

.polo-info {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.polo-name {
    font-size: 0.95rem;
}

/* Chip Styling */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px; /* Kompakter */
    border-radius: 12px; 
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
}

.chip i {
    margin-right: 5px;
    font-size: 0.85em;
}

.chip.chip-outline {
    background-color: transparent;
    border: 1px solid var(--dp-border-color); /* Dünnerer Rand */
    color: var(--dp-text-secondary);
}

.chip.chip-outline:hover {
    border-color: var(--dp-accent-color);
    color: var(--dp-accent-color);
}

/* Vacations spezifisch */
.vacation-item {
    display: grid; 
    grid-template-columns: 1fr auto; 
    grid-template-areas:
        "info actions"
        "user actions";
    gap: 6px 12px; 
    align-items: center;
}

.vacation-item:hover {
    border-color: var(--dp-accent-color);
    background: #31353A;
}

.vacation-info {
    grid-area: info;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vacation-dates {
    font-size: 0.95rem;
}

.vacation-user {
    grid-area: user;
    font-size: 0.85rem;
}

.vacation-actions {
    grid-area: actions;
    display: flex;
    gap: 6px;
    justify-self: end; 
}

.vacation-actions .btn-sm {
    /* padding: 4px 7px; */ /* OLD - Replaced by fixed W/H and flex centering */
    font-size: 0.85rem; /* Controls icon size, keep this */
    /* min-width: 30px; */ /* OLD - Replaced by fixed width */
    /* text-align: center; */ /* OLD - Flex centering is better */
    /* justify-content: center; */ /* OLD - More specific flex properties below */
    width: 30px; /* Fixed width */
    height: 30px; /* Fixed height */
    padding: 0; /* Remove padding as size is fixed */
    display: inline-flex; /* Use flexbox for centering */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    line-height: 1; /* Ensure line-height doesn't interfere */
    box-sizing: border-box; /* Explicitly set box-sizing */
    border-width: 1px;      /* Unified border width */
    border-style: solid;    /* Unified border style */
    border-radius: 3px;     /* Unified border radius, matches modern buttons */
    /* border-color will be inherited from .btn-success-modern, .btn-danger-modern, .btn-outline-light */
}

/* Ensure icons inside these specific buttons have no extra margin from other general icon rules */
.vacation-actions .btn-sm i {
    margin: 0;
    font-size: 1em; /* Icon takes the font-size of the button */
}

/* Footer für Bereiche */
.area-footer-actions {
    margin-top: 12px; 
    padding-top: 12px;
    border-top: 1px solid var(--dp-border-color);
    display: flex;
    gap: 8px;
    justify-content: flex-start; 
}

.area-footer-actions .btn-sm i {
    margin-right: 4px;
    font-size: 0.85em;
}

/* Placeholder für leere Bereiche */
.area-empty-placeholder {
    padding: 25px 15px; /* Kompakter */
    min-height: 80px; /* Niedriger */
    flex-grow: 1; /* ADDED: Make placeholder content grow */
}

.area-empty-placeholder i {
    font-size: 1.6rem; 
}

.btn-warning-modern {
    background-color: rgba(var(--dp-warning-rgb), 0.2);
    border: 1px solid rgba(var(--dp-warning-rgb), 0.5);
    color: var(--dp-warning-color);
}
.btn-warning-modern:hover {
    background-color: rgba(var(--dp-warning-rgb), 0.3);
    border-color: rgba(var(--dp-warning-rgb), 0.7);
}
.btn-secondary-modern {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.1);
    border: 1px solid rgba(var(--dp-text-secondary-rgb), 0.3);
    color: var(--dp-text-secondary);
}
.btn-secondary-modern:hover {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.2);
    border-color: rgba(var(--dp-text-secondary-rgb), 0.5);
}
.btn-light-modern {
    background-color: rgba(var(--dp-text-primary-rgb), 0.1);
    border: 1px solid rgba(var(--dp-text-primary-rgb), 0.2);
    color: var(--dp-text-primary);
    transition: all 0.2s ease-in-out;
}
.btn-light-modern:hover {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: var(--dp-accent-color);
    color: var(--dp-accent-color);
}

.btn-static { /* To remove hover effects and pointer cursor */
    pointer-events: none;
}

/* New Course Stats Panel */
.course-stat-panel {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.stat-item {
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 15px;
    flex: 1; /* Each item takes equal space */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-item-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-item-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dp-text-primary);
}

.stat-item-value .sub-value {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--dp-text-secondary);
}

.stat-item-value .due-value {
    color: var(--dp-danger-color);
}

.stat-item .badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.stat-item-body {
    margin-top: auto;
}

.stat-item-main-value {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    line-height: 1.3;
}

.stat-item-sub-details {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    margin-top: 5px;
}

.stat-item-sub-details .due-value {
    color: var(--dp-danger-color);
    font-weight: 500;
}

/* New two-column layout for stat items */
.stat-item-body-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.stat-item-body-grid .col-left {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Reduced gap for compactness */
}

.stat-item-body-grid .col-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch; /* Make buttons same width */
    flex-shrink: 0;
}

.date-info .label {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.date-info .date-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.date-info .duration-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dp-text-secondary);
}


/* Buttons Modern - Vereinheitlichen und anpassen */
.btn-success-modern, .btn-danger-modern, .btn-primary-modern {
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 3px;
    /* font-family geerbt */
}

.btn-success-modern {
    background-color: rgba(var(--dp-success-rgb), 0.2); /* Wird jetzt transparentes Türkis */
    border: 1px solid rgba(var(--dp-success-rgb), 0.5); /* Wird jetzt Türkis mit Transparenz */
    color: var(--dp-success-color); /* Wird jetzt Türkis */
}
.btn-success-modern:hover {
    background-color: rgba(var(--dp-success-rgb), 0.3);
    border-color: rgba(var(--dp-success-rgb), 0.7);
    color: var(--dp-success-color); /* Textfarbe bleibt Türkis bei Hover */
}

.btn-danger-modern {
    background-color: rgba(var(--dp-danger-rgb), 0.2);
    border: 1px solid rgba(var(--dp-danger-rgb), 0.5);
    color: var(--dp-danger-color);
}
.btn-danger-modern:hover {
    background-color: rgba(var(--dp-danger-rgb), 0.3);
    border-color: rgba(var(--dp-danger-rgb), 0.7);
}

.btn-primary-modern {
    background-color: rgba(var(--dp-accent-rgb), 0.2); /* Akzentfarbe mit Transparenz */
    border: 1px solid rgba(var(--dp-accent-rgb), 0.5);
    color: var(--dp-accent-color);
}
.btn-primary-modern:hover {
    background-color: rgba(var(--dp-accent-rgb), 0.3);
    border-color: rgba(var(--dp-accent-rgb), 0.7);
}

.btn-sm i, .status-button i, .btn-success-modern i, .btn-danger-modern i, .btn-primary-modern i, .btn-light-modern i, .btn-warning-modern i, .btn-secondary-modern i {
    margin-right: 5px; /* Einheitlicher Icon-Abstand in Buttons */
}

/* Spezifische Anpassungen für .badge */
.badge {
    padding: 3px 7px; /* Etwas kompakter */
    font-size: 0.75rem;
}

.badge.badge-danger {
    /* Bereits angepasst, aber hier zur Überprüfung */
    background: rgba(var(--dp-danger-rgb), 0.15);
    color: var(--dp-danger-color);
    border: 1px solid rgba(var(--dp-danger-rgb),0.3);
}


.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(380px, calc(50% - 10px))), 1fr)); /* Min 380px, Ziel 50% abzgl. halbem Gap */
    column-gap: 20px; /* Geändert auf 20px */
    row-gap: 20px; /* Geändert auf 20px */
}

/* Spezifische Anpassung für das Admin-Grid, um breitere Karten zu ermöglichen */
#grid-administration.dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
}


/* Globaler Header Anpassungen */
.dashboard-global-header {
    /* display: flex; */ /* Nicht mehr benötigt, wenn Header leer ist oder entfernt wird */
    /* justify-content: space-between; */
    /* align-items: center; */
    /* padding: 10px 0px; */
    background-color: var(--dp-bg-color); /* Hintergrund an Hauptbereich angepasst oder transparent lassen */
    border-bottom: none;
    height: 0; /* Nimmt keinen Platz ein, falls noch im DOM aber leer */
    padding: 0;
    margin: 0;
    overflow: hidden; /* Verhindert unerwünschte Layout-Effekte von leeren Elementen */
}

/* .dashboard-global-header .appformtitle wird durch .appformtitle im .main-content-header ersetzt */
/* Die alte Regel für .appformtitle innerhalb von .dashboard-global-header kann entfernt oder angepasst werden,
   wenn .appformtitle jetzt universeller ist oder spezifische Kontextanpassungen benötigt.
   Die bestehende .appformtitle-Regel (Zeile 466ff) ist bereits gut und wird übernommen.
*/

/* Neue CSS-Regeln für den Titel im Main Content */
.main-content-header {
    padding: 10px 25px 0 25px; /* Oben 10px für Bündigkeit, L/R 25px Standard-Padding, Unten 0 (appformtitle hat margin/border) */
    margin-bottom: 15px;      /* Abstand zu den ersten Widgets/Kategorien */
    background-color: transparent; /* Hintergrund wie der Hauptinhalt (body --dp-bg-color) */
}

/* Stellt sicher, dass .appformtitle korrekt angezeigt wird, wenn es als direkter Nachkomme verwendet wird
   oder wenn die alte .dashboard-global-header .appformtitle Regel zu spezifisch war.
   Die bereits existierende .appformtitle Regel (um Zeile 466 oder ähnlich) sollte generisch genug sein.
   Wir stellen sicher, dass display: inline-block oder block verwendet wird, um Padding/Border korrekt zu handhaben.
*/
.appformtitle { /* Wiederverwendete Klasse für die Überschrift */
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--dp-accent-color); 
    margin-bottom: 0; /* Wird durch Container-Margin oder nächsten Element-Margin gesteuert */
    padding-bottom: 8px; /* Für die Akzentlinie unter dem Text */
    border-bottom: 3px solid var(--dp-accent-color); /* Akzentlinie */
    line-height: 1.2;
    display: inline-block; /* Wichtig, damit padding-bottom und border-bottom korrekt wirken */
}

.dashboard-global-header .appformheader {
    /* Keine speziellen Styles hier, dient als einfacher Wrapper */
    margin-bottom: 0 !important; /* von Bootstrap, falls nötig */
}

/* Neue Stile für die zweizeiligen Kalendereinträge */
.job-entry-line-1 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8em; /* Etwas größer für die Hauptinfo */
    font-weight: 500;
    margin-bottom: 3px; /* Kleiner Abstand zur zweiten Zeile */
}

.job-code-badge {
    font-size: 0.8em;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* background-color: var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
    color: var(--dp-text-primary); /* Angepasst für besseren Kontrast auf variablen Hintergründen, ggf. anpassen */
    /* border: 1px solid var(--dp-accent-color); */ /* Entfernt - wird dynamisch via style-Attribut gesetzt */
}

.job-entry-line-2 {
    font-size: 0.75em; /* Reduced from 0.8em */
    color: var(--dp-text-secondary);
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 992px) { /* Beispielhafter Breakpoint, ggf. anpassen */
    .team-calendar-view-area {
        overflow-x: visible; /* Beibehalten oder entfernen, da auto-fit jetzt steuert */
    }
    .team-calendar-grid {
        /* grid-template-columns: repeat(3, 1fr); */ /* ALT */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* NEU: Konsistent mit Desktop */
    }
    .calendar-day {
        min-height: 150px; /* Ggf. Höhe anpassen */
    }
}

@media (max-width: 768px) { /* Gilt für kleinere Tablets */
    .team-calendar-view-area {
        overflow-x: visible; /* Beibehalten oder entfernen */
    }
    .team-calendar-grid {
        /* grid-template-columns: repeat(2, 1fr); */ /* ALT */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* NEU: Konsistent mit Desktop */
    }
}

@media (max-width: 576px) { /* Gilt für Mobilgeräte */
    .team-calendar-view-area {
        overflow-x: visible; /* Beibehalten oder entfernen */
        padding: 10px;
    }
    .team-calendar-grid {
        /* grid-template-columns: 1fr; */ /* ALT */
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* NEU: Mindestbreite ggf. noch weiter reduziert für sehr kleine Schirme */
        gap: 5px; /* Weiter reduzierter Gap für Mobile */
    }
    .calendar-day {
        min-height: 100px; /* Weniger Mindesthöhe, wenn nur ein Tag pro Zeile */
        padding: 6px;
    }
    .day-header {
        padding-bottom: 4px;
        margin-bottom: 4px;
    }
    .calendar-job-entry {
        padding: 5px 7px;
        font-size: 0.8em;
    }
}

/* Styling für die automatische Ausblend-Benachrichtigung */
.auto-hide-notice {
    background-color: rgba(var(--dp-warning-rgb), 0.15);
    color: var(--dp-warning-color);
    border: 1px solid rgba(var(--dp-warning-rgb), 0.3);
    padding: 10px 15px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9rem;
    margin: 0 0 15px 0; /* Angepasster Margin, nur unten */
    position: sticky; /* Bleibt oben im Inhaltsbereich sichtbar */
    top: 0; /* Direkt unter dem (zukünftigen) Haupt-Header */
    z-index: 1000; /* Stellt sicher, dass es über anderen Elementen im Wrapper liegt */
}

/* Spezifische Hover-Effekte für Karten/Listenelemente */
.news-item:hover,
.due-job-item:hover, 
.next-job-card:hover,
.my-class-item:hover,
.polo-item:hover,
.vacation-item:hover {
    border-color: var(--dp-accent-color); 
    background-color: var(--dp-surface-hover); /* Einheitlicher, subtiler Hover-Hintergrund */
    box-shadow: 0 2px 5px rgba(var(--dp-accent-rgb), 0.08); /* Sehr dezenter Schatten bei Hover */
    transform: translateY(0); /* explizit keine Transformation für einen ruhigeren Effekt */
}

/* Sicherstellen, dass Buttons im Footer keine Unterstreichung beim Hover bekommen, falls sie als Links implementiert sind */
.area-footer-actions a.btn:hover,
.area-footer-actions button:hover {
    text-decoration: none;
}

/* Neuer Style für das Toggle-Icon in der Sidebar */
.sidebar-toggle-icon {
    font-size: 1.2rem; 
    color: var(--dp-accent-color); 
    padding: 5px; /* Padding reduziert für kompaktere Darstellung */
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.sidebar-toggle-icon:hover {
    transform: scale(1.1); 
}

/* Wenn Dashboard ausgeblendet ist (Klasse .dashboard-hidden am Icon) */
.sidebar-toggle-icon.dashboard-hidden {
    color: var(--dp-danger-color); /* Rot (Dashboard ausgeblendet -> Einblenden-Aktion) */
}

.sidebar-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-navigation .nav-item {
    display: flex;
    align-items: center;
    padding: 11px 15px; 
    margin-bottom: 5px; 
    border-radius: 5px; 
    color: var(--dp-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem; 
    transition: background-color 0.15s, color 0.15s;
}

.sidebar-navigation .nav-item i {
    margin-right: 12px;
    font-size: 1.05rem; 
    width: 18px; 
    text-align: center;
    color: var(--dp-text-secondary); 
    transition: color 0.15s;
}

.sidebar-navigation .nav-item:hover {
    background-color: var(--dp-surface-hover);
    /* color: var(--dp-text-primary); */ /* Allgemeine Hover-Farbe wird durch spezifische ersetzt */
}
/* .sidebar-navigation .nav-item:hover i { color: var(--dp-accent-color); } */ /* Globale Akzentfarbe entfernt */

.sidebar-navigation .nav-item.active {
    /* background-color: var(--dp-accent-color); */ /* Globale Akzentfarbe entfernt */
    color: #fff; 
    box-shadow: 0 1px 3px rgba(0,0,0, 0.2); /* Angepasster Schatten für bessere Sichtbarkeit mit Kat-Farben */
}

.sidebar-navigation .nav-item.active i {
    color: #fff; 
}

/* --- NEU: Kategorie-spezifisches Styling für Sidebar Nav-Items --- */

/* Warnings (war Overview) */
.sidebar-navigation .nav-item[data-category="warnings"]:hover,
.sidebar-navigation .nav-item[data-category="warnings"]:hover i {
    color: var(--dp-cat-warnings-color);
}
.sidebar-navigation .nav-item[data-category="warnings"].active {
    background-color: var(--dp-cat-warnings-color);
}
.sidebar-navigation .nav-item[data-category="warnings"].active:hover {
    color: #fff; /* Keep text color white on hover for active warning items */
}
.sidebar-navigation .nav-item[data-category="warnings"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active warning items */
}

/* Administration (war Management) */
.sidebar-navigation .nav-item[data-category="administration"]:hover,
.sidebar-navigation .nav-item[data-category="administration"]:hover i {
    color: var(--dp-cat-administration-color);
}
.sidebar-navigation .nav-item[data-category="administration"].active {
    background-color: var(--dp-cat-administration-color);
}
.sidebar-navigation .nav-item[data-category="administration"].active:hover {
    color: #fff; /* Keep text color white on hover for active administration items */
}
.sidebar-navigation .nav-item[data-category="administration"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active administration items */
}

/* Current & Plan (war Operations) */
.sidebar-navigation .nav-item[data-category="currentplan"]:hover,
.sidebar-navigation .nav-item[data-category="currentplan"]:hover i {
    color: var(--dp-cat-currentplan-color);
}
.sidebar-navigation .nav-item[data-category="currentplan"].active {
    background-color: var(--dp-cat-currentplan-color);
}
.sidebar-navigation .nav-item[data-category="currentplan"].active:hover {
    color: #fff; /* Keep text color white on hover for active currentplan items */
}
.sidebar-navigation .nav-item[data-category="currentplan"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active currentplan items */
}

/* Courses & Planning (war Planning) */
.sidebar-navigation .nav-item[data-category="coursesplanning"]:hover,
.sidebar-navigation .nav-item[data-category="coursesplanning"]:hover i {
    color: var(--dp-cat-coursesplanning-color);
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active {
    background-color: var(--dp-cat-coursesplanning-color);
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active:hover {
    color: #fff; /* Keep text color white on hover for active coursesplanning items */
}
.sidebar-navigation .nav-item[data-category="coursesplanning"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active coursesplanning items */
}

/* Events (NEU) */
.sidebar-navigation .nav-item[data-category="events"]:hover,
.sidebar-navigation .nav-item[data-category="events"]:hover i {
    color: var(--dp-cat-events-color);
}
.sidebar-navigation .nav-item[data-category="events"].active {
    background-color: var(--dp-cat-events-color);
}
.sidebar-navigation .nav-item[data-category="events"].active:hover {
    color: #fff; /* Keep text color white on hover for active event items */
}
.sidebar-navigation .nav-item[data-category="events"].active:hover i {
    color: #fff; /* Keep icon color white on hover for active event items */
}

/* Codes (NEU) */
.sidebar-navigation .nav-item[data-category="codes"]:hover,
.sidebar-navigation .nav-item[data-category="codes"]:hover i {
    color: var(--dp-cat-codes-color);
}
.sidebar-navigation .nav-item[data-category="codes"].active {
    background-color: var(--dp-cat-codes-color);
}
.sidebar-navigation .nav-item[data-category="codes"].active:hover {
    color: #fff;
}
.sidebar-navigation .nav-item[data-category="codes"].active:hover i {
    color: #fff;
}

/* Reports entfernt - falls wieder benötigt, hier hinzufügen */

/* Hauptinhalt - Minimalstil */
.dashboard-main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Wichtig für Scrollbarkeit des Inhalts */
    padding: 20px 25px; 
    box-sizing: border-box;
}

.dashboard-categories-wrapper {
    flex-grow: 1;
    background-color: var(--dp-bg-color);
    transition: opacity 0.3s ease, transform 0.3s ease; 
    opacity: 0; /* Initial unsichtbar */
    transform: translateY(10px); /* Initial leicht verschoben */
    will-change: opacity, transform; /* NEU: Browser-Optimierungshinweis */
    /* display: none; wird initial nicht gesetzt, damit JS es beim ersten Mal animieren kann, wenn nötig */
    display: flex; /* Haupt-Wrapper als Flex-Container für die Kategorien */
    flex-direction: column;
    gap: 30px; /* Abstand zwischen den Kategorien */
}

/* Styling für die einzelnen dashboard-category-content DIVs */
.dashboard-category-content {
    /* padding-top: 20px; */ /* ENTFERNT - Abstand wird vom Grid übernommen */
    /* border-top: 3px solid transparent; */ /* ENTFERNT - Platzhalter für farbigen Rand */
    /* background-color: rgba(255,255,255,0.01); */ /* Optional: sehr leichter Hintergrund für jede Kategorie */
    border-radius: 0 0 4px 4px; /* Abrundung unten, falls gewünscht */
    /* Wichtig: Der Hintergrundgradient bleibt hier */
}

/* Das Grid innerhalb jeder Kategorie bekommt den oberen Abstand */
.dashboard-category-content .dashboard-grid {
    margin-top: 20px;
    display: grid; /* Hinzugefügt für Grid-Layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Hinzugefügt für responsive Spalten */
    gap: 20px; /* Hinzugefügt für den gewünschten Abstand */
}

.category-is-overview {
    /* border-top-color: var(--dp-cat-overview-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-overview-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT, da Hover-Effekt entfernt wird */
}
/* ENTFERNT .category-is-overview:hover Regel */

.category-is-management {
    /* border-top-color: var(--dp-cat-management-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-management-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-management:hover Regel */

.category-is-operations {
    /* border-top-color: var(--dp-cat-operations-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-operations-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-operations:hover Regel */

.category-is-planning {
    /* border-top-color: var(--dp-cat-planning-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-planning-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-planning:hover Regel */

.category-is-reports {
    /* border-top-color: var(--dp-cat-reports-color); */ /* ENTFERNT */
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-reports-rgb), 0.04) 0%, transparent 35%);
    /* transition: background-image 0.3s ease-in-out; */ /* ENTFERNT */
}
/* ENTFERNT .category-is-reports:hover Regel */

/* NEU: Kategorie-spezifischer Hintergrund für "Codes" */
.category-is-codes {
    background-image: radial-gradient(circle at top left, rgba(var(--dp-cat-codes-rgb), 0.04) 0%, transparent 35%);
}

/* Zustand, wenn das Dashboard sichtbar und animiert werden soll */
.dashboard-categories-wrapper.dashboard-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Zustand für die Ausblendanimation (bevor display:none gesetzt wird) */
.dashboard-categories-wrapper.dashboard-hidden-animated {
    opacity: 0;
    transform: translateY(10px);
}

/* Klasse .sidebar-fixed für die fixierte Sidebar */
.sidebar-fixed {
    position: fixed;
    top: 0; /* JS sets this to currentGlobalNavHeight + 'px' */
    left: 0;
    width: 260px;
    height: 100vh; /* JS sets this to calc(100vh - currentGlobalNavHeight + 'px') */
    background-color: var(--dp-bg-color);
    border-right: 1px solid var(--dp-border-color);
    padding: 0 15px 20px 15px; /* Angepasst: padding-top 0, Rest konsistent mit .dashboard-sidebar */
    box-sizing: border-box;
    /* overflow-y: auto; */ /* ENTFERNT: Wird durch .sidebar-navigation gehandhabt */
    z-index: 1031; /* ERHÖHT von 1000, um über Standard-Bootstrap-Navbar (1030) zu liegen */
    display: flex; /* HINZUGEFÜGT */
    flex-direction: column; /* HINZUGEFÜGT */
}

.dashboard-loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: var(--dp-text-secondary);
    font-size: 1rem;
}

.dashboard-loading-placeholder .spinner-border {
    margin-bottom: 15px;
}

/* --- Fokus-Bereiche anpassen --- */
.dashboard-focus-area {
    background-color: var(--dp-surface-color);
    border-radius: 6px;
    padding: 20px;
    display: flex !important; /* DEBUG: Explizit setzen */
    flex-direction: column !important; /* DEBUG: Explizit setzen */
    gap: 15px;
    border: 1px solid var(--dp-border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
    margin-bottom: 25px; 
}

.area-title {
    font-size: 1.25rem; 
    font-weight: 600;
    color: var(--dp-text-primary);
    margin: 0;
    display: flex;
    align-items: center; /* Vertically align .title-main-group and .area-title-count */
    /* gap: 10px; */ /* Removed, handled by margin on count or within title-main-group */
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}

.status-db-found {
    background-color: var(--dp-success-color); /* Türkis */
    color: #fff !important; /* Ensure text is white, overriding potential global badge text color */
}

.status-db-not-found {
    background-color: var(--dp-danger-color); /* Rot */
    color: #fff !important; /* Ensure text is white */
}

.course-details .course-info {
    font-size: 0.9rem;
}

.leader-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
}
.leader-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.details-box {
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 15px;
    margin-top: 20px;
}

.details-box-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.details-box-content .category-info {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    margin-bottom: 8px;
}

.details-box-content .content-info {
    font-size: 0.9rem;
    color: var(--dp-text-secondary);
    line-height: 1.5;
}


.date-info .label {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.date-info .date-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.date-info .duration-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dp-text-secondary);
}

/*
==============================================
 Kurstermine Liste (Classes Dashboard)
==============================================
*/
.job-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.job-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    padding: 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.job-list-item:hover {
    border-color: var(--dp-accent-color);
}

.job-item-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    gap: 12px;
    width: 100%;
}

.job-item-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--dp-border-color);
}

.job-item-main-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex-grow: 1;
}

.job-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dp-text-primary);
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    max-width: 50%;
}

.job-item-meta {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.job-item-meta-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.job-item-meta-line-1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.job-item-meta-line-2 {
    display: flex;
}

.meta-time-group,
.meta-item-primary,
.meta-item-secondary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.meta-item-primary {
    color: var(--dp-text-primary);
    font-weight: 500;
}

.meta-item-primary i {
    color: var(--dp-text-primary);
}

.meta-item-secondary {
    color: var(--dp-text-secondary);
}

.meta-item-secondary i {
    color: var(--dp-text-secondary);
}

.job-item-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.job-unit-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--dp-success-color);
    padding: 4px 9px;
    border-radius: 5px;
}

.job-unit-badge--past {
    background-color: transparent;
    color: var(--dp-success-color);
    border: 1px solid var(--dp-success-color);
    padding: 3px 8px; /* Adjust padding to account for border */
}

.job-item-meta i {
    color: var(--dp-text-secondary);
}

.job-item-workers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    max-width: 50%;
}

.worker-item-button {
    display: inline-flex;
    flex-direction: column;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    text-align: left;
    transition: all 0.2s ease;
    text-decoration: none;
}

.worker-item-button:not(.is-static):hover {
    border-color: var(--dp-accent-color);
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-decoration: none;
}

.worker-item-button.is-static,
.worker-item-button.is-static:hover {
    text-decoration: none;
    cursor: default;
}

.worker-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--dp-text-primary);
    line-height: 1.3;
}

.worker-name i {
    margin-right: 5px;
    color: var(--dp-text-secondary);
}

.worker-role {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
    padding-left: 18px; /* Align with text, not icon */
}

a.worker-item-button.is-static {
    background-color: rgba(var(--dp-danger-rgb), 0.1);
    border-color: rgba(var(--dp-danger-rgb), 0.3);
}

a.worker-item-button.is-static:hover {
    border-color: var(--dp-danger-color);
}

.worker-item-button.is-static {
    background-color: rgba(var(--dp-danger-rgb), 0.1);
    border-color: rgba(var(--dp-danger-rgb), 0.3);
}

.worker-name.text-danger {
    color: var(--dp-danger-color) !important;
}

.worker-name.text-danger i {
    color: var(--dp-danger-color);
}

/* Bottom Row: Participant Actions and Status Actions */
.job-item-participants-actions,
.job-item-status-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-separator {
    width: 1px;
    height: 24px;
    background-color: var(--dp-border-color);
    margin: 0 6px;
}

/* Making buttons smaller and uniform */
.job-item-actions-row .btn.btn-sm {
    padding: 4px 8px;
    font-size: 0.8rem;
}

.job-item-actions-row .btn.btn-sm i {
    margin-right: 0; /* Remove right margin if only icon is present */
}

/* Make icon-only buttons square */
.job-item-participants-actions a.btn.btn-sm,
.job-item-status-actions a.btn.btn-sm {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.job-item-participants-actions .dropdown-toggle.btn-sm {
    /* Keep padding for text+icon */
    padding: 4px 8px;
}
.job-item-participants-actions .dropdown-toggle.btn-sm i {
    margin-right: 5px; /* Add margin back for icon in button with text */
}

.chip.chip-danger {
    background-color: rgba(var(--dp-danger-rgb), 0.15);
    border: 1px solid rgba(var(--dp-danger-rgb),0.3);
    color: var(--dp-danger-color);
}

.location-code-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
    text-transform: uppercase;
}

.job-item-meta i {
    color: var(--dp-text-secondary);
}

/*
==============================================
 Custom Dark Tooltip
==============================================
*/
.tooltip > .tooltip-inner {
    background-color: var(--dp-surface-hover, #384055);
    color: var(--dp-text-primary, #e0e0e0);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: left;
    max-width: 250px;
    border: 1px solid var(--dp-success-color);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .arrow::before {
    border-top-color: var(--dp-surface-hover, #384055);
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--dp-surface-hover, #384055);
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .arrow::before {
    border-left-color: var(--dp-surface-hover, #384055);
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .arrow::before {
    border-right-color: var(--dp-surface-hover, #384055);
}

.job-item-meta-line-2 .meta-item-secondary {
    color: var(--dp-text-primary);
    font-weight: 500;
}

.job-item-meta-line-2 .meta-item-secondary i {
    color: var(--dp-text-primary);
}

/*
==============================================
 Ticket List (Classes Dashboard)
==============================================
*/
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ticket-item {
    display: flex;
    background: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 10px 12px;
    transition: border-color 0.18s, background 0.18s;
}

.ticket-item[onclick]:hover {
    cursor: pointer;
    border-color: var(--dp-accent-color);
    background: #31353A;
}

.ticket-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ticket-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticket-price-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 3px 8px;
    border: 1px solid var(--dp-accent-color);
    color: var(--dp-accent-color);
    border-radius: 4px;
    white-space: nowrap;
}

.ticket-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dp-text-primary);
}

.ticket-products-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ticket-sub-details {
    font-size: 0.85rem;
    color: var(--dp-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/*
==============================================
 Ticket List (Classes Dashboard) - New Style
==============================================
*/
.ticket-list-new {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    gap: 10px; /* Reduced gap */
    align-content: flex-start; /* ADDED: Prevent stretching of items */
}

.ticket-item-new {
    background-color: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    border-radius: 4px;
    padding: 12px; /* Reduced padding */
    display: flex;
    flex-direction: column; /* Changed to column for vertical flow */
    gap: 10px; /* Reduced gap between info blocks */
    transition: border-color 0.2s, background-color 0.2s;
    flex: 0 1 calc(33.333% - 10px); /* 3 items per row, no grow */
    min-width: 250px; /* Further reduced for responsiveness */
    position: relative; /* For absolute positioning of price and button */
    padding-bottom: 45px; /* Reduced space for the button at the bottom */
}

.ticket-item-new[role="button"]:hover {
    cursor: pointer;
    border-color: var(--dp-accent-color);
    background-color: var(--dp-surface-hover);
}

.ticket-item-info {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Reduced gap */
    flex-grow: 1;
}

.ticket-item-price-container {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ticket-item-price {
    font-size: 1rem; /* Reduced font size */
    font-weight: 600;
    color: var(--dp-accent-color);
    white-space: nowrap;
}

.ticket-item-price-subtext {
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.ticket-item-name {
    font-size: 0.9rem; /* Reduced font size */
    font-weight: 500;
    color: var(--dp-text-primary);
    padding-right: 85px; /* Adjusted space for the absolute positioned price */
}

.ticket-item-products {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Reduced gap */
}

.chip-product {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.1);
    border: 1px solid rgba(var(--dp-text-secondary-rgb), 0.2);
    border-radius: 4px;
    padding: 4px 8px; /* Reduced padding */
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.chip-product .product-name {
    font-size: 0.8rem; /* Reduced font size */
    font-weight: 500;
    color: var(--dp-text-primary);
}

.chip-product .product-name .product-chip-prefix {
    font-weight: 600;
    color: var(--dp-text-secondary);
    font-size: 0.7rem;
    margin-right: 5px;
    text-transform: uppercase;
}

.chip-product .product-participation {
    font-size: 0.7rem; /* Reduced font size */
    color: var(--dp-text-secondary);
}

.ticket-item-footer {
    font-size: 0.8rem; /* Reduced font size */
    color: var(--dp-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced gap */
    margin-top: auto; /* Push to bottom of flex container */
}

.ticket-item-actions {
    flex-shrink: 0;
    position: absolute;
    bottom: 12px; /* Adjusted position */
    right: 12px; /* Adjusted position */
}

.ticket-item-actions .btn {
    width: 30px; /* Reduced size */
    height: 30px; /* Reduced size */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ticket-item-actions .btn i {
    margin: 0;
}

/* Style for product rows inside the edit modal */
.product-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgba(0,0,0,0.1);
    padding: 8px;
    border-radius: 4px;
}

.product-form-row .chip-product {
    flex-grow: 1;
    margin-bottom: 0;
}

/* Color variation for Kurs */
.chip-product--class {
    background-color: rgba(var(--dp-accent-color-rgb), 0.15);
    border-color: rgba(var(--dp-accent-color-rgb), 0.3);
}

.chip-product--class .product-chip-prefix {
    color: var(--dp-accent-color);
}

/* Color variation for Kategorie */
.chip-product--category {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.15);
    border-color: rgba(var(--dp-text-secondary-rgb), 0.3);
}

.chip-product--category .product-chip-prefix {
    color: var(--dp-text-secondary);
}

.product-chip-button-wrapper.btn-warning-modern .product-chip-delete:hover {
    background-color: var(--dp-danger-color);
    border-color: var(--dp-danger-color);
    color: #fff;
}

.product-chip-text {
    white-space: normal;
    text-align: left;
    line-height: 1.3;
}

.product-chip-text i {
    margin-right: 8px;
}

.product-chip-delete {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
    transition: all 0.2s ease;
}

.product-chip-delete:hover {
    background-color: var(--dp-danger-color);
    border-color: var(--dp-danger-color);
    color: #fff;
}


/* Style for product rows inside the edit modal */
.product-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgba(0,0,0,0.1);
    padding: 8px;
    border-radius: 4px;
}

.product-form-row .chip-product {
    flex-grow: 1;
    margin-bottom: 0;
}

/* Color variation for Kurs */
.chip-product--class {
    background-color: rgba(var(--dp-accent-color-rgb), 0.15);
    border-color: rgba(var(--dp-accent-color-rgb), 0.3);
}

.chip-product--class .product-chip-prefix {
    color: var(--dp-accent-color);
}

/* Color variation for Kategorie */
.chip-product--category {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.15);
    border-color: rgba(var(--dp-text-secondary-rgb), 0.3);
}

.chip-product--category .product-chip-prefix {
    color: var(--dp-text-secondary);
}

/*
==============================================
 Ticket Modal Product Editor (New)
==============================================
*/
.product-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.product-chip-item {
    display: inline-block;
    position: relative;
}

.product-chip-button-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 45px 10px 15px;
    border-radius: 6px;
    color: #fff;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    min-height: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.product-chip-button-wrapper.btn-success-modern {
    background-color: var(--dp-success-color);
}
.product-chip-button-wrapper.btn-warning-modern {
    background-color: var(--dp-warning-color);
    color: #1A1C1E; /* Dark text on yellow background */
}

.product-chip-button-wrapper.btn-warning-modern .product-chip-delete {
    color: #1A1C1E;
    border-color: rgba(0,0,0,0.2);
}

.product-chip-button-wrapper.btn-warning-modern .product-chip-delete:hover {
    background-color: var(--dp-danger-color);
    border-color: var(--dp-danger-color);
    color: #fff;
}

.product-chip-text {
    white-space: normal;
    text-align: left;
    line-height: 1.3;
}

.product-chip-text i {
    margin-right: 8px;
}

.product-chip-delete {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
    transition: all 0.2s ease;
}

.product-chip-delete:hover {
    background-color: var(--dp-danger-color);
    border-color: var(--dp-danger-color);
    color: #fff;
}


/* Style for product rows inside the edit modal */
.product-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgba(0,0,0,0.1);
    padding: 8px;
    border-radius: 4px;
}

.product-form-row .chip-product {
    flex-grow: 1;
    margin-bottom: 0;
}

/* Color variation for Kurs */
.chip-product--class {
    background-color: rgba(var(--dp-accent-color-rgb), 0.15);
    border-color: rgba(var(--dp-accent-color-rgb), 0.3);
}

.chip-product--class .product-chip-prefix {
    color: var(--dp-accent-color);
}

/* Color variation for Kategorie */
.chip-product--category {
    background-color: rgba(var(--dp-text-secondary-rgb), 0.15);
    border-color: rgba(var(--dp-text-secondary-rgb), 0.3);
}

.chip-product--category .product-chip-prefix {
    color: var(--dp-text-secondary);
}

/*
==============================================
 Ticket Modal Product Editor (New)
==============================================
*/
.product-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.product-chip-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-accent-color);
    padding: 8px 12px;
    padding-right: 75px; /* Space for two buttons */
    border-radius: 6px;
    min-width: 150px;
    transition: all 0.2s ease;
}

.product-chip-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.product-chip-item.chip-product--class {
    border-color: var(--dp-accent-color);
    font-size: 0.8rem;
    color: var(--dp-text-secondary);
}

.product-chip-actions {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
}

.product-chip-actions .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid transparent;
    background-color: rgba(0,0,0,0.2);
    color: var(--dp-text-secondary);
    transition: all 0.2s ease;
}

.product-chip-actions .btn:hover {
    color: #fff;
    border-color: transparent;
}

.product-chip-actions .product-chip-edit:hover {
    background-color: var(--dp-accent-color);
}

.product-chip-actions .product-chip-delete:hover {
    background-color: var(--dp-danger-color);
}


/* Style for product rows inside the edit modal */
.product-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgba(0,0,0,0.1);
    padding: 8px;
    border-radius: 4px;
}

.product-form-row .chip-product {
    flex-grow: 1;
    margin-bottom: 0;
}

.area-title.area-title--success .title-main-group {
    border-bottom-color: var(--dp-success-color);
}

.area-title.area-title--success i {
    color: var(--dp-success-color);
}

.area-title-count {
    background-color: var(--dp-accent-color);
}


/*
==============================================
 Anmeldung Box (Classes Dashboard)
==============================================
*/
.anmeldung-box-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
    gap: 12px;
}

.anmeldung-sub-status-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.anmeldung-sub-status-group .btn {
    cursor: default;
}

.anmeldung-status-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.anmeldung-status-display .btn {
    cursor: default;
    font-size: 0.9rem;
    padding: 8px 12px;
}

.anmeldung-period-text {
    font-size: 0.8rem;
    color: var(--dp-text-secondary);
    padding-left: 5px;
}

.worker-item-button .worker-name,
.worker-item-button .worker-name i {
    color: var(--dp-text-primary);
}

.worker-item-button .worker-role {
    color: var(--dp-text-secondary);
}

.worker-item-button {
    display: inline-flex;
    flex-direction: column;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--dp-surface-hover);
    border: 1px solid var(--dp-border-color);
    text-align: left;
    transition: all 0.2s ease;
    text-decoration: none;
}

.worker-item-button:not(.is-static):hover {
    border-color: var(--dp-accent-color);
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-decoration: none;
}

.worker-item-button.is-static,
.worker-item-button.is-static:hover {
    text-decoration: none;
    cursor: default;
}

.anmeldung-main-status-button {
    display: inline-flex;
    flex-direction: column;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: left;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: default;
}

.anmeldung-main-status-button .worker-name,
.anmeldung-main-status-button .worker-name i {
    color: var(--dp-text-primary);
}

.anmeldung-main-status-button .worker-role {
    color: var(--dp-text-secondary);
}

.anmeldung-main-status-button .is-deemphasized {
    opacity: 0.6;
}


/* MODAL FIX */
.modal {
    z-index: 9999999;
}

/* MARGIN FIX FOR DATATABLES */
.table-responsive {
    margin-top: 20px;
}

/* BOOTSTRAP CONFIRMATION DIALOG STYLES */
.popover {
    z-index: 99999999;
    background-color: var(--dp-surface-color);
    border: 1px solid var(--dp-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: var(--dp-text-color);
}

.popover .popover-header {
    background-color: var(--dp-surface-hover);
    border-bottom: 1px solid var(--dp-border-color);
    color: var(--dp-text-color);
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 16px;
    border-radius: 8px 8px 0 0;
}

.popover .popover-body {
    background-color: var(--dp-surface-color);
    color: var(--dp-text-color);
    padding: 16px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.popover .popover-footer {
    background-color: var(--dp-surface-hover);
    border-top: 1px solid var(--dp-border-color);
    padding: 12px 16px;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.popover .popover-footer .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.popover .popover-footer .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.popover .popover-footer .btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.popover .popover-footer .btn-light {
    background-color: var(--dp-surface-hover);
    border-color: var(--dp-border-color);
    color: var(--dp-text-color);
}

.popover .popover-footer .btn-light:hover {
    background-color: var(--dp-border-color);
    border-color: var(--dp-text-secondary);
}

/* Popover arrow styling */
.popover .arrow::before {
    border-color: var(--dp-border-color);
}

.popover .arrow::after {
    border-color: var(--dp-surface-color);
}