.mobile-form {
  display: none;
}


@media (max-width: 800px) {
  .desktop-form {
    display: none !important;
  }

  .mobile-form {
    display: block !important;
  }
}


/* Base styles for the body */

body {
  background-color: #3e3d3d !important; /* Dark background */
  color: #E0E0E0; /* Light text */
  font-size: clamp(14px, 1.1vw, 18px);

  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

input.form-control,
textarea.form-control,
select.form-control {
  font-size: clamp(14px, 1vw, 17px);
}



body.container {
  padding-left: 15px !important;
  padding-right: 0px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* Header styles */
h1, h2, h4, h5 {
  color: #ffffff !important; /* White text for headings */
  /* margin-bottom: 20px; */
    display: block;
    font-size: 2.0em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
  /* margin-top: 15px; */
}

h4 {
  font-size: 1.5em;
}

h4 a {
  text-decoration: none; /* Removes the underline */
  color: inherit; /* Ensures the link adopts the color of the parent (h4) */
}

h4 a:hover {
  text-decoration: none; /* Keeps the underline removed on hover */
  color: #007bff; /* Optional: Changes the color on hover */
}


/* Input and textarea styles */
input, textarea, select {
  background-color: #1E1E1E; /* Dark input backgrounds */
  color: #E0E0E0; /* Light text for inputs */
  border: 1px solid #424242; /* Dark border */
}

input::placeholder, textarea::placeholder {
  color: #B0B0B0; /* Lighter placeholder text */
}

/* Button styles */
.btn {
  color: wheat; /* Light button text */
  border: none; /* Remove default borders */
}

.btn:hover {
  background-color: #575757; /* Darker on hover */
}

/* Link styles */
a {
  color: #BB86FC; /* Light purple for links */
}

a:hover {
  color: #FF79B0; /* Pink on hover */
}

/* Section styles */


/* List styles */
ul {
  list-style: none; /* Remove default list styles */
  padding: 0; /* Remove padding */
}

li {
  margin-bottom: 10px; /* Space between list items */
}

/* Label styles */
label {
  font-weight: bold; /* Make labels bold */
  display: block; /* Ensure labels are on their own line */
  margin-bottom: 5px; /* Add some space below the label */
  padding-top: 10px; /* Add padding on top of labels */
  color: white !important;

}

/* Custom button styles */

.btn {
  padding: 6px;
  margin-right: 10px;
  font-weight: bold;
}

.btn2 {
  padding: 6px;
  margin-right: 10px;
  font-weight: bold;
 
}

.btn-custom {
  padding: 6px;
  margin-right: 10px
}

/* Collapse button styles */
.btn-link {
  color: #ffffff; /* Purple for collapse buttons */
  text-decoration: none; /* Keeps the underline removed on hover */
}

.btn-link:hover {
  color: #c1ff79; /* Pink on hover */
}


/* Flexbox for the Enter Project ID section */
.project-id-group {
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Center items vertically */
}

.project-id-group input {
  flex: 1; /* Allow input to grow and take available space */
  margin-right: 10px; /* Space between input and buttons */
}
/* Add a triangle before the link */
.toggle-collapse::before {
  content: "\25B6"; /* Unicode for the right-pointing triangle */
  display: inline-block;
  margin-right: 5px; /* Space between triangle and text */
  transition: transform 0.3s ease; /* Animation for rotation */
}

.toggle-collapse[aria-expanded="true"]::before {
  transform: rotate(90deg); /* Rotate triangle down when expanded */
}
.btn-custom-width {
  width: 150px;
}
/* Additional styles for contact table */
#contactTable {

  color: #fafafa; /* Dark text for better readability */
  border-collapse: collapse; /* Ensure borders collapse */
}

#contactTable th, #contactTable td {
  border: none; /* Remove all borders */
  padding: 10px; /* Add padding for better spacing */
  vertical-align: middle; /* Center align text vertically */
}

#contactTable td {
  border-bottom: 2px solid white; /* Add a bottom border only */
}

#contactTable th {
  background-color: lightgray;
  color: black; /* Dark text for better readability */
  border-bottom: 2px solid white; /* Add a bottom border to the header */
  border-top: 2px solid white; /* Add a bottom border to the header */
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none; /* Could be hiding the arrow */
}

/* Make the tab container a flexbox */
.tab {
  display: flex; /* Use flex layout */
  flex-wrap: nowrap; /* Prevent wrapping */
  overflow-x: auto; /* Allow horizontal scrolling if needed */
}

/* Tab button styles */
.tablinks {
  flex: 1; /* Make each button take up equal space */
  text-align: center; /* Center text in the button */
  white-space: nowrap; /* Prevent text from wrapping */
  background-color: #2c7ac4; /* Original dark background */
  color: wheat; /* Light button text */
  padding: 6px; /* Padding for better touch targets */
  border: none; /* Remove default border */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s; /* Smooth transition */
  margin-right: 10px;
}

.tablinks:hover {
  background-color: #575757; /* Darker background on hover */
}

.tablinks.active {
  background-color: #e54141; /* Active tab background */
  color: #ffffff; /* White text for active tab */
}








@media (max-width: 820px) {
  /* Ensure items in the project ID section wrap neatly */
  .project-id-group {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: space-between; /* Distribute items evenly */
    gap: 5px; /* Add spacing between elements */
}

.project-id-group input,
.project-id-group button {
    flex: 1 1 45%; /* Each element takes 48% of the row */

    text-align: center; /* Center text inside buttons */
}
/* Ensure date fields are in two columns on small screens */
#project_dates .form-group.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Ensures even spacing */
}

#project_dates .col-4 {
  width: 48%; /* Two inputs per row (leaving some space between them) */
  margin-bottom: 10px; /* Space between rows */
}

#project_financials .form-group.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Ensures even spacing */
}

#project_financials .col-3 {
  width: 48%; /* Two inputs per row */
  margin-bottom: 10px; /* Space between rows */
}

}







@media screen and (max-width: 820px) {
  .table-responsive {
    display: none;
  }

  .mobile-project-list {
    display: block;
  }

}

/* Default: Show table and hide cards on large screens */
@media screen and (min-width: 820px) {
  .mobile-project-list {
    display: none;
  }
}

#emailTable {
  width: 50%;
  table-layout: fixed; /* Ensures columns respect width assignments */
}


#projectTable {
  width: 100%;
  table-layout: auto; /* Ensures columns respect width assignments */
  border-collapse: collapse; /* Ensure full width without gaps */
}

#projectTable th, #projectTable td {
  padding: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid white;
} 

.project-header {
  background-color: #3e3d3d; /* match body */
  color: #E0E0E0;
  border-bottom: 1px solid #666;
padding-bottom: 10px !important;

  
}

.project-header h2#pageTitle {
  margin-bottom: 288px; /* reduce or increase space under the title */
}

.table-header-row {
  display: flex;
  font-weight: bold;
  

}

.table-header-row > div {
  padding: 15px 4px 4px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




#projectTable th:nth-child(2), 
#projectTable td:nth-child(2) { /* Customer Name Column */
  width: 20%; /* Increase width */
}

#projectTable th:nth-child(5), 
#projectTable td:nth-child(5) { /* Project Description Column */
  width: 35%; /* Increase width */
}

#projectTable th:nth-child(9), 
#projectTable td:nth-child(9),
#projectTable th:nth-child(10), 
#projectTable td:nth-child(10) { /* Item and Edit Buttons */
  width: 5%; /* Reduce button space */
  text-align: center;
}

#projectTable_all {
  width: 100%;
  border-collapse: collapse; /* Ensure full width without gaps */
}

#projectTable_all th, 
#projectTable_all td {
  padding: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid white;
}

#projectTable_all th:nth-child(1), 
#projectTable_all td:nth-child(1) { /* Customer Name Column */
  width: 5%;
}


#projectTable_all th:nth-child(2), 
#projectTable_all td:nth-child(2) { /* Customer Name Column */
  width: 10%;
}

#projectTable_all th:nth-child(3), 
#projectTable_all td:nth-child(3) { /* Project Description Column */
  width: 35%;
  white-space: normal; /* Allow wrapping to prevent text cutoff */
}

#projectTable_all th:nth-child(4), 
#projectTable_all td:nth-child(4),
#projectTable_all th:nth-child(5), 
#projectTable_all td:nth-child(5),
#projectTable_all th:nth-child(6), 
#projectTable_all td:nth-child(6),
#projectTable_all th:nth-child(7), 
#projectTable_all td:nth-child(7),
#projectTable_all th:nth-child(8), 
#projectTable_all td:nth-child(8),
#projectTable_all th:nth-child(9), 
#projectTable_all td:nth-child(9),
#projectTable_all th:nth-child(10), 
#projectTable_all td:nth-child(10),
#projectTable_all th:nth-child(11),
#projectTable_all td:nth-child(11) {
  width: 6%;
  text-align: right;
}



#projectTable_admin {
  width: 100%;
  border-collapse: collapse; /* Ensure full width without gaps */
}

#projectTable_admin th, 
#projectTable_admin td {
  padding: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid white;
}






/* Reduce button size */
.item-button {
  padding: 4px 6px;
  font-size: 14px;
}



.subtext {
  padding-left: 8px;
  color: #E0E0E0;
  font-style: italic;
  font-size: 10px;
}

/* Dark Theme Modal Styling */
.modal-content {
  background-color: #2a2a2a; /* Dark background */
  color: #f8f9fa; /* Light text */
  border-radius: 8px; /* Smooth rounded corners */
  border: 1px solid #444; /* Subtle border */
}

.modal-header {
  background-color: #1f1f1f; /* Darker shade for the header */
  border-bottom: 1px solid #444; /* Subtle separator */
}

.modal-title {
  font-weight: bold;
  font-size: 1.2rem;
  color: #fff; /* White title */
}

.modal-body {
  font-size: 1rem;
  color: #ddd; /* Slightly lighter than white */
  text-align: center;
  padding: 20px;
}

.modal-footer {
  background-color: #1f1f1f;
  border-top: 1px solid #444;
  display: flex;
  justify-content: center;
}

/* Dark theme for buttons */
.modal-footer .btn-primary {
  background-color: #0d6efd;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 5px;
}

.modal-footer .btn-primary:hover {
  background-color: #0b5ed7;
}

/* Close button adjustments */
.btn-close {
  filter: invert(1); /* Makes it white for dark backgrounds */
  opacity: 0.8;
}

.btn-close:hover {
  opacity: 1;
}

/* Turn calculate tax button red in edit pro cuss when amount changes */
#calculate_tax_btn {
  transition: background-color 0.3s ease-in-out; /* Smooth color transition */
}


.white-font {
  color: white;
}

.tab {
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: nowrap !important;
  overflow-x: auto; /* Optional: allows scroll if screen too narrow */
}

.tab .btn {
  /* min-width: 120px; */
  text-align: center;
  white-space: nowrap;
  flex: 1 1 auto;
}
#projectAdminTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

#projectAdminTable th, #projectAdminTable td {
  padding: 6px 8px;
  border-bottom: 1px solid white;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Allow text to wrap where needed */
#projectAdminTable td:nth-child(3) {
  white-space: normal;
}

/* Optional: constrain max width */
#projectAdminTable td,
#projectAdminTable th {
  max-width: 200px;
}

/* Right-align numeric data */
#projectAdminTable td:nth-child(4),
#projectAdminTable td:nth-child(5),
#projectAdminTable td:nth-child(6),
#projectAdminTable td:nth-child(7),
#projectAdminTable td:nth-child(8) {
  text-align: right;
}

/* Center buttons */
#projectAdminTable td:nth-child(9),
#projectAdminTable td:nth-child(10),
#projectAdminTable th:nth-child(9),
#projectAdminTable th:nth-child(10) {
  text-align: center;
  width: 1%;
}

.table-container {
  overflow-x: auto;
  width: 100%;
} 
#task-table {
  width: 100%;
  border-collapse: collapse;
}


.table-mobile {
  display: none;
}

.project-card {
  background-color: #2a2a2a;
  border: 1px solid #555;
  border-radius: 6px;
  margin-bottom: 15px;
  padding: 10px;
  color: #E0E0E0;
}

.project-card .card-header {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 5px;
}

.project-card .card-body div {
  margin-bottom: 4px;
}
@media (max-width: 768px) {
  .table-desktop {
    display: none;
  }
  .table-mobile {
    display: block;
  }
}