/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Feb 27, 2026, 12:52:48 PM
    Author     : wesselvanderhorst
*/

@font-face {
  font-family: 'filson-pro';
  src: 
      url('../webfonts/filson-pro/FilsonProMedium.otf') format('opentype'),
      url('../webfonts/filson-pro/FilsonProBold.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'quicksand';
  src: 
      url('../webfonts/quicksand/Quicksand-Medium.ttf') format('ttf'),
      url('../webfonts/quicksand/Quicksand-Bold.ttf') format('ttf');
  font-weight: 500;
  font-style: normal;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer[aria-expanded="false"] + .collapse-divider {
    display: block;
   
}

.cursor-pointer[aria-expanded="true"] + .collapse-divider {
    display: none;
}
/* Arrow rotation logic */
.transition-arrow {
    transition: transform 0.3s ease;
    display: inline-block;
    margin-left: 50% !important;
}

/* When the parent is NOT collapsed (i.e., it's open), rotate the arrow */
[aria-expanded="true"] .transition-arrow {
    transform: rotate(180deg);
}

/* Styling for the expanded area */
.bg-light {
    background-color: #f8f9fa !important;
    border-radius: 0 0 10px 10px;
}

.month, .availability, .assigned-project, .customer, .assignedproject, .planned, .assignedservice, .written, .openhours, .person-name {
    font-size: 16px;
    font-family: 'filson-pro', sans-serif;
  
}

.planned-hours, .availability-hours, .projectId, .writing-hours, .open-hours, .project-hours {
    font-family: 'quicksand', sans-serif;
    font-weight: bold;
    color: white;
}


.startMonth, .customer-name, .projectname, .projectId, .servicename{
    font-family: 'quicksand', sans-serif;
    font-weight: bold;
    font-size: 17px;
    color: black;
}

.startmonth-customer {
    margin-left: 25px !important;
    margin-right: -20px !important;
}

.planned-hours, .project-hours {
    background-color: #99342C;
    border-radius: 10px;
    width: 70px;
    height: 45px;
    padding: 10px;
    margin: 5px;
}

.availability-hours, .assigned-availability-hours{
    background-color: #DE4F34;
    border-radius: 10px;
    width: 70px;
    height: 45px;
    padding: 10px;
    margin: 5px;
}

.writing-hours {
    background-color: #B63F31;
    border-radius: 10px;
    width: 70px;
    height: 45px;
    padding: 10px;
    margin: 5px;
}

.open-hours {
    background-color: #DC5D3F;
    border-radius: 10px;
    width: 70px;
    height: 45px;
    padding: 10px;
    margin: 5px;
}


.table-headers {
    background-color: #EEE6DB;
    
}

.carousel-inner {
    max-width: 80%;
    overflow: hidden !important;
    white-space: nowrap; /* Prevents text from trying to wrap */
}

/* 2. Force buttons to shrink if the space is too tight */
.month-selector .btn {
    padding: 5px 8px;   /* Reduce horizontal padding */
       /* Slightly smaller font to save space */
    flex: 1 1 auto;     /* Allows buttons to shrink if needed */
    white-space: nowrap;
}

/* 3. Ensure the flex wrapper doesn't expand beyond 100% */
.carousel-item .d-flex {
    width: 100%;
    margin: 0 auto;
}

/*.carousel-inner {
    max-width: 37%;
} */

.carousel-control-prev, .carousel-control-next {
    position: relative;
    width: auto;
    opacity: 1;
}

.month-selector a {
    border: 2px solid #EDE6DC;
    color: black;
    font-family: "filson-pro", sans-serif;
    font-size: 16px;
    
}

.month-selector a:hover {
    background-color:  #EDE6DC !important;
    color: white;
    border: 2px solid #EDE6DC;
}

.month-selector.btn-group {
    margin-bottom: 0 !important;
    height: 40px;
}

.month-selector btn {
    border-radius: 20px;
    border: none;
}

.month-selector .btn-primary {
    background-color: #EDE6DC !important;
}

.month-selector .btn-outline-primary {
    background-color: #FFFFFF !important;
}

.custom-nav-btn i {
    color: #6c757d;    /* Grey by default */
    font-size: 1.2rem; /* Adjust size here */
    transition: color 0.2s ease;
}

/* Hover effect for the icons */
.custom-nav-btn:hover i {
    color: #333333;    /* Darker on hover */
    font-size: 24px;
    font-weight: 900;
}

.custom-carousel-btn {
    position: relative;
    flex: 0 0 auto;
    width: 35px;
    height: 35px;
    background: none;
    border: none;
    opacity: 1;
    color: #333 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) grayscale(100) brightness(0.5);
    width: 20px;
    height: 20px;
}

#carouselMonths {
    margin-bottom: 30px !important;
}

/*.table-secondary th {
    padding: 12px 8px !important;
    font-weight: 600;
} */

.projects-and-hours .hours {
    width: 1%;
    text-align: center;
    justify-content: center;
}