body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8fafc;
}
.content {
padding: 20px;
margin-left: 250px; /* Adjusted for the sidebar width */
margin-right: 0;
height: calc(100vh - 60px); /* Subtract the footer height for proper scrolling */
overflow-y: auto; /* Make content scrollable */
}

.ticket-list-container {
background: white;
border-radius: 0; /* Remove rounded corners for flush edges */
box-shadow: none; /* Remove shadow for a cleaner edge */
overflow: hidden;
width: calc(100% - 0cm); /* Dynamically calculate width based on sidebar */
margin: 0; /* Remove default margin */
}

.ticket-header {
  padding: 15px 20px;
  font-size: 24px;
  font-weight: bold;
  border-bottom: 1px solid #e5e7eb;
}
/* Search & Create Ticket */
.search-bar {
  display: flex;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
}

.search-bar input {
  flex: 1;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 15px;
}

/* Search & Create Ticket Buttons */
.search-bar button {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* Form Styling (Mobile Number & Request ID) */
.form-group {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 10px;
}

.form-group label {
  font-weight: bold;
  font-size: 14px;
}

.form-group input {
  flex: 1;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 15px;
}

.table {
width: 100%;
border-collapse: collapse;
text-align: left;
}

.table th,
.table td {
padding: 12px 20px;
border-bottom: 1px solid #e5e7eb;
font-size: 14px;
}

.table th {
background-color: #f3f4f6;
font-weight: bold;
}

.table tbody tr:hover {
background-color: #f9fafb;
}

.pagination {
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed; /* Fix pagination to the bottom of the viewport */
bottom: 0;
left: 270px; /* Offset by the sidebar width */
width: calc(100% - 330px); /* Adjust width to exclude sidebar */
background-color: #f3f4f6; /* Optional: Background to make it stand out */
border-top: 1px solid #e5e7eb; /* Add a dividing line */
z-index: 10; /* Ensure it stays on top of other content */
}


/* Sidebar Styles */
.sidebar {
width: 250px;
height: 100vh;
background-color: #000;
color: #fff;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between; /* Spaces content evenly */
padding: 20px 0;
}

/* Navigation Links Container */
.sidebar nav {
flex-grow: 1;
padding-top: 147px; /* Adjust space from the top */
}

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

.sidebar nav ul li {
padding: 15px 20px; /* Reduce padding */
}

.sidebar nav ul li a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
font-size: 16px;
position: relative;
margin-left: 0.50cm; /* Move buttons 20cm to the right */
transition: color 0.3s ease;
}

.sidebar nav ul li a i {
margin-right: 10px; /* Adjust space between icon and text */
font-size: 18px; /* Reduce icon size */
}

/* Align buttons downward */
.sidebar nav ul li:last-child {
margin-top: auto; /* Push to bottom */
}

/* Classic Hover Effect */
.sidebar nav ul li a:hover {
color: #007bff;
}

.sidebar nav ul li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: white;
transition: width 0.3s ease;
}

.sidebar nav ul li a:hover::after {
width: 100%;
}

/* Active Link Styling */
.sidebar nav ul li a.active {
color: #00aaff;
font-weight: bold;
}
/* Dropdown styles */
.ticket-dropdown {
display: none;
position: absolute;
background-color: #000;
min-width: 200px; /* Adjust width to fit icons and text */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-left: 0.5cm; /* Align with the Tickets button */
list-style: none;
padding: 0;
}

.ticket-dropdown li {
padding: 8px 15px; /* Adjust padding */
}

.ticket-dropdown li a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
font-size: 16px; /* Match sidebar button font size */
padding: 5px 10px;
}

/* Adjust icon spacing */
.ticket-dropdown li a i {
margin-right: 8px; /* Space between icon and text */
}



    /* Move the icon 2cm (20px) to the right */
    #ticket-icon {
        margin-left: 20px;  
        transition: transform 0.3s ease;
    }
    /* Hide dropdown by default */
    .ticket-dropdown {
        display: none;
    }


    .table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      table-layout: fixed; /* Ensures columns respect defined widths */
      font-size: 16px; /* Increase overall table font size */
  }
  
  .table th,
  .table td {
      padding: 14px 24px; /* Increase padding for better spacing */
      border-bottom: 1px solid #e5e7eb;
      font-size: 16px; /* Increase font size for better visibility */
      text-align: left;
  }
  
  /* Shift 'No' column slightly to the right */
  .table th:first-child,
  .table td:first-child {
      padding-left: 1cm;
      width: 6%;
  }
  
  /* Adjust width for 'Customer' */
  .table th:nth-child(2),
  .table td:nth-child(2) {
      width: 22%;
  }
  
/* Adjust width for 'Service' */
.table th:nth-child(3),
.table td:nth-child(3) {
    width: 22%;
    padding-right: 1cm; /* Move the content towards left by 0.50 cm */
}
  
  /* Add space (2cm left & right) for 'Location' */
  .table th:nth-child(4),
  .table td:nth-child(4) {
      width: 60%;

  }
  
  /* Adjust 'Status' column */
  .table th:nth-last-child(2),
  .table td:nth-last-child(2) {
      text-align: right;
      padding-right: 1.5cm;
      width: 14%;
  }
  
  /* Move 'Created On' 1.5cm to the left */
  .table th:last-child,
  .table td:last-child {
      text-align: left;
      width: 13%;
      padding-right: 1cm; /* Shift it left */
  }
  
  /* Make headers bold and larger */
  .table th {
      font-size: 16px;
      font-weight: bold;
      background-color: #f3f4f6; /* Light gray background */
  }
  
  /* Increase row height for better spacing */
  .table tbody tr {
      height: 50px;
  }
    /* Edit button styles */
.edit-button {
  padding: 5px 10px;
  border: 1px solid #3498db;
  background: #3498db;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.edit-button:hover {
  background: #2980b9;
  border-color: #2980b9;
}

.edit-button:disabled {
  background: #bdc3c7;
  border-color: #bdc3c7;
  cursor: not-allowed;
}