/* Dark theme styles */
body {
    background-color: #121212; /* Dark grey background */
    color: #d3d3d3; /* Default light grey text for general readability */
    font-family: 'Arial', sans-serif;
}

.container {
    padding-top: 20px;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* Added to ensure the dropdown aligns relative to this container */
}

.font-weight-bold {
    font-weight: bold;
}

.card {
    background-color: #1e1e1e; /* Slightly lighter dark grey for the card */
    color: #d3d3d3; /* Default light grey text for body content */
    border: none;
}

.card-header {
    background-color: #333333; /* Even lighter grey for the header */
    color: #ffffff; /* White text for headers */
}

.list-group-item {
    background-color: #1e1e1e; /* Matching the card background */
    color: #d3d3d3; /* Light grey for message text */
    border-color: #333; /* Darker lines for subtle separation */
}

.chat-name {
    color: #ffffff; /* White text for names */
    font-weight: bold; /* Make name text bold */
}

.chat-msg {
    color: #d3d3d3; /* Light grey text for messages */
}

.chat-date, .chat-time {
    color: #d3d3d3; /* Even lighter grey for date and time */
}

/* Ensure links are also visible */
a {
    color: #4ea1d3; /* Light blue link color */
}

a:hover {
    color: #81cbee; /* Lighter blue on hover */
}

#spinner {
    width: 100%;
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
}

#spinner img {
    width: 20%; /* Set the spinner image to 20% of its original size */
    max-width: 100px; /* Optional: ensures it doesn't get too large on small devices */
    animation: spin 1s linear infinite; /* Optional: adds a spinning animation */
}

.container {
    width: 100%; // Ensure the main container takes full width
}

.message-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px; // Adjusts padding to provide space between scrollbar and content
    box-sizing: border-box; // Ensures padding does not add to the width
}

.message-card {
    width: 80%; /* Adjust width for better appearance */
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.message-right {
    align-self: flex-end;
    background-color: #ADD8E6; /* Light blue background */
    color: #000; /* Black text */
    margin-left: auto; /* Ensures it aligns to the right */
}

.message-left {
    background-color: #444; /* Darker background for incoming messages */
    color: #fff; /* White text */
}

.two-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em; /* Adjust based on your line-height to fit exactly two lines */
    line-height: 1.5em; /* Adjust line height as needed */
}

.input-group {
    background-color: #333; /* Dark background for the input group */
    border: 1px solid #ccc; /* Light border as requested */
    border-radius: 5px; /* Optional: rounded borders for the input group */
}

.form-control {
    background-color: #333; /* Dark background for the text field */
    border: none; /* Removes the border inside the input group */
    color: #fff; /* Light color text */
}

.form-control::placeholder {
    color: #bbb; /* Lighter color for placeholder text */
}

.send-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    color: #ffffff; /* You can adjust the color to fit your design */
}

.send-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.send-btn:active {
    background-color: rgba(255, 255, 255, 0.3);
}

.send-btn i {
    font-size: 24px; /* Adjust size as needed */
}

.input-group {
    display: flex;
    align-items: center;
    padding: 10px 20px; // Ensures padding around the entire group
    background-color: #333; // Dark gray background for the group
    margin: 0 20px; // Adds margin to left and right for outer spacing
    width: calc(100% - 40px); // Adjusts width considering the margin
}

#message-input {
    flex-grow: 1;
    padding: 8px 12px; // Adds padding, including on the right side
    background-color: #222; // Ensures the background remains dark
    color: white; // Ensures text color is white for visibility
    border: 1px solid #444; // Slightly lighter border for visibility
    outline: none; // Removes the outline on focus
}

#message-input:focus {
    background-color: #222; /* Keeps background dark when focused */
    color: white; /* Ensures text color remains white when focused */
}

#message-input::placeholder {
    color: #ccc; // Light grey color for placeholders to ensure visibility
}

.send-btn {
    margin-left: 10px; // Space between the input and the send button
    background-color: #444; // Dark gray background for the button
    border: none; // No border for a cleaner look
    color: white; // White icon color for visibility
    border-radius: 50%; // Makes the button rounded
    padding: 10px; // Ensures sufficient padding for visual appeal
    cursor: pointer; // Indicates the button is clickable
}

.send-btn:hover {
    background-color: #555; // Slightly lighter on hover for visual feedback
}

.input-group-text {
    background: #333;
    border: 1px solid #444;
    color: white;
    cursor: pointer;
}

.input-group-text i {
    display: block;  /* Ensures the icon centers within the label */
}

#file-input {
    display: none;  /* Hides the actual file input element */
}

.chat-image {
    max-width: 50%; /* Adjusts image width to be less than container width */
    height: auto; /* Keeps image aspect ratio intact */
    border-radius: 8px; /* Optional: Adds rounded corners */
    margin: 5px 0; /* Adds space above and below the image */
    display: block; /* Ensures the image does not align with text */
    margin-left: auto; /* Centers image */
    margin-right: auto; /* Centers image */
}

/* Login Page Styles */
.login-body {
    display: flex;
    align-items: center; /* Centers vertically */
    justify-content: center; /* Centers horizontally */
    height: 100vh; /* Full height of the viewport */
    background-color: #121212; /* Dark background */
    margin: 0; /* Removes default margin */
}

.login-container {
    width: 100%; /* Full width to contain the form */
    max-width: 400px; /* Maximum width of the form */
    padding: 15px;
    background-color: #222; /* Slightly lighter dark background for the form */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Optional: Adds shadow for better visibility */
}


.login-form-control, .login-form-control:focus {
    background-color: #333;
    border: 1px solid #444;
    color: #fff;
}

.login-form-floating > label {
    color: #aaa; /* Light gray label */
}

.login-btn-primary {
    background-color: #017bff;
    border: none;
}

.login-btn-primary:hover {
    background-color: #0056b3;
}

button:hover {
    background-color: #0056b3; /* Darker blue when hovering over the button */
}

.description-header {
    margin-bottom: 0;  /* Remove margin below the header if any */
    padding-bottom: 3px;  /* Reduce padding at the bottom of the header */
}
/* Assuming .description-text is the class for your text field container */
.description-text {
    padding-top: 3px;  /* Reduce the top padding above the text field */
}

#chat-card .card-header .float-end a {
    margin-left: 15px; /* Increase space between icons */
    font-size: 0.8rem; /* Adjust icon size if needed */
    color: #fff; /* Adjust color to fit your theme */
}

#chat-card .card-header .float-end a:first-child {
    margin-left: 0; /* No margin for the first icon to align it properly */
}

#chat-card .card-header .float-end a:hover {
    color: #cccccc; /* Highlight color on hover */
}

.filter-dropdown {
    display: none; /* Starts hidden */
    position: absolute; /* Absolute position relative to the nearest positioned ancestor */
    top: 100%; /* Below the button */
    left: 0; /* Align with the left edge of the filter button */
    background-color: #333; /* Dark theme background */
    color: #fff; /* Text color */
    padding: 5px; /* Padding around items */
    border-radius: 10px; /* Optional: rounded corners */
    z-index: 100; /* Ensures dropdown is on top of other content */
    width: auto; /* Adjust width as necessary */
}

/* Specific styles for the conversations page */
.conversations-container .filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background-color: #333;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    padding: 10px;
    width: max-content;
}

.conversations-container .message-header {
    position: relative; /* Needed to position the dropdown relative to the header */
}

.color-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.label-edit {
    margin-bottom: 10px;
}

.label-edit input[type="text"] {
    background-color: #333; /* Dark background */
    color: #fff; /* Light text */
    border: 1px solid #555; /* Subtle border */
}

.label-edit input[type="color"] {
    border: 2px solid #ddd; /* Thinner border */
    height: 30px; /* Match height with other inputs */
    width: 40px; /* Enough width to display color */
}

.checkbox label {
    display: block; /* Ensure labels are in block format for better readability */
}

.selected-labels, .business-selector-container, #filter-btn {
    margin-right: 10px; /* Adjust spacing as needed */
}

.selected-labels .color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .chat-image {
        max-width: 100%;
        height: auto;
    }
}