/* Custom styles for Auto Siero theme */

:root {
    --siero-red: #e4002b; /* Example red from Auto Siero logo */
    --siero-dark: #212529; /* Dark background for navbar/footer */
    --siero-light-gray: #f8f9fa; /* Light background for body */
    --siero-text-color: #343a40; /* Dark text color */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--siero-text-color);
    background-color: var(--siero-light-gray);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.bg-dark-siero {
    background-color: var(--siero-dark) !important;
}

.bg-light-siero {
    background-color: var(--siero-light-gray) !important;
}

.navbar-brand img {
    margin-right: 10px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
}

.btn-primary {
    background-color: var(--siero-red);
    border-color: var(--siero-red);
}

.btn-primary:hover {
    background-color: darken(var(--siero-red), 10%); /* Darken on hover */
    border-color: darken(var(--siero-red), 10%);
}

.card {
    border-radius: .5rem;
    border: none;
}

.card-header {
    border-bottom: none;
}

.footer {
    background-color: var(--siero-dark);
    color: white;
}

/* Roadmap specific styles */
.roadmap-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.roadmap-item-container {
    /* This is the li element, which now contains the main item row and the comment section */
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem; /* Add padding to the bottom of the container */
    border-bottom: 1px solid #eee;
}

.roadmap-item-container:last-child {
    border-bottom: none;
}

.roadmap-item {
    display: flex; /* Use flexbox for horizontal alignment */
    align-items: center; /* Vertically align items in the middle */
    /* No padding here, it's on the container */
    /* No border-bottom here, it's on the container */
}

.roadmap-item .form-check-input {
    margin-top: 0; /* Align checkbox vertically */
    margin-right: 1rem;
    flex-shrink: 0;
    /* Make checkboxes larger and more visible */
    width: 1.5em; /* Increase width */
    height: 1.5em; /* Increase height */
    border: 2px solid #6c757d; /* Add a more prominent border */
}

.roadmap-item-text {
    flex-grow: 1; /* Allow text to take up available space */
    margin-right: 0.5rem; /* Space between text and icons */
    /* Ensure text doesn't overflow into action buttons */
    word-break: break-word; /* Break long words */
    overflow-wrap: break-word; /* Break long words */
}

.roadmap-item-text.completed {
    text-decoration: line-through;
    color: #6c757d;
}

.roadmap-item-actions {
    display: flex; /* Use flexbox for action buttons */
    align-items: center;
    flex-shrink: 0; /* Prevent actions from shrinking */
    white-space: nowrap; /* Keep buttons on one line */
}

.roadmap-item-actions .btn {
    /* Bootstrap's ms-1, ms-2 classes handle margin-left */
}

.comment-section {
    margin-top: 0.5rem; /* Reduced margin-top to bring it closer to the item */
    padding-left: calc(1rem + 1rem); /* Align with text, considering checkbox margin */
    /* No border-top here, as it's part of the item container */
}

.comment {
    background-color: #f1f1f1;
    padding: 0.5rem;
    border-radius: 0.3rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.comment-timestamp {
    font-size: 0.8rem;
    color: #6c757d;
    margin-left: 0.5rem;
}

.editable-text {
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    min-height: 38px; /* Match input height */
    cursor: text;
    background-color: #fff;
    display: block; /* Ensure it takes full width if needed */
    width: 100%; /* Ensure it takes full width if needed */
}

.editable-text:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    outline: 0;
}

.editable-text-area {
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    min-height: 100px; /* Adjust as needed for multi-line text */
    cursor: text;
    background-color: #fff;
    /* Removed white-space: pre-wrap; as HTML handles newlines */
}

.editable-text-area:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    outline: 0;
}

/* Input group for comments */
.comment-section .input-group {
    width: 100%; /* Ensure the input group takes full width */
}