/* static/css/base.css */

/* General Styles */
body {
    background-color: #f5f5f5;
    font-family: 'Roboto', sans-serif; /* Updated font family */
    margin: 0;
    padding: 0;
}

/* Navbar Styles */
.navbar {
    border-bottom: 2px solid #007bff;
    margin-bottom: 15px; /* Reduced bottom margin */
    padding: 6px 20px; /* Further reduced padding for compactness */
    min-height: 50px; /* Reduced navbar height */
}
.navbar-brand img {
    height: 30px; /* Further reduced logo size */
    margin-right: 8px; /* Reduced margin */
}

/* Adjust Navbar Links */
.navbar-nav .nav-link {
    padding-right: 10px; /* Further reduced horizontal padding between links */
    padding-left: 10px;
    font-size: 14px; /* Consistent font size */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.navbar-nav .nav-link:hover {
    color: #0056b3; /* Darker blue on hover */
}

/* Dropdown Toggle Button Styles */
.navbar .dropdown-toggle {
    border: none;
    background-color: #007bff; /* Attractive blue background */
    color: #fff; /* White icon color for contrast */
    font-size: 24px; /* Larger font size for better visibility */
    line-height: 1;
    padding: 6px 12px; /* Adjusted padding */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

.navbar .dropdown-toggle:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Container Styles */
.container-fluid {
    padding: 0 10px; /* Further reduced side padding for compactness */
    margin-top: 0; /* Remove any top margin */
}

/* Heading Styles */
h1, h2 {
    font-weight: bold;
    color: #333;
    font-size: 24px; /* Maintain readability */
    margin-bottom: 10px; /* Reduced bottom margin */
    line-height: 1.2; /* Tighter line height */
}

/* Snippet Card Styles */
.snippet-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px; /* Slightly smaller border radius */
    padding: 12px; /* Further reduced padding */
    margin-bottom: 12px; /* Consistent bottom margin */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease; /* Smooth shadow transition */
    position: relative; /* To position badges */
}
.snippet-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
}
.snippet-card h3 {
    font-weight: bold;
    color: #444;
    margin-top: 0;
    font-size: 20px; /* Increased font size */
}
.snippet-description {
    margin-bottom: 8px; /* Further reduced bottom margin */
    font-size: 16px; /* Increased font size */
    color: #555;
}

/* **New CSS Rule: Change Description Color for the First Snippet** */
/* Targets the first .snippet-card and changes the color of its .snippet-description */
.snippet-card:first-of-type .snippet-description {
    color: #800080; /* Dark Purple */
}

/* Code Block Styles */
.code-block {
    background-color: #f8f9fa;
    padding: 8px; /* Further reduced padding */
    border-radius: 4px; /* Slightly smaller border radius */
    margin-top: 8px; /* Further reduced margin-top */
}
.code-block pre {
    margin: 0;
    font-size: 14px; /* Increased font size */
    line-height: 1.4;
    font-family: Consolas, Monaco, "Andale Mono", monospace;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Buttons and Forms Styles */
.code-buttons {
    margin-top: 6px; /* Further reduced top margin */
    display: flex;
    gap: 5px;
}
.btn-xxs {
    padding: 0.15rem 0.25rem; /* Smaller padding for extra small buttons */
    font-size: 0.65rem; /* Smaller font size */
    line-height: 1;
    border-radius: 0.2rem;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
}
.btn-xxs:hover {
    opacity: 0.8; /* Slight transparency on hover */
}
.add-snippet-form, .edit-snippet-form, .add-step-form {
    padding: 10px; /* Reduced padding */
    background-color: #f1f1f1;
    border-radius: 6px; /* Slightly smaller border radius */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin-top: 8px; /* Further reduced margin-top */
    transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}
.edit-snippet-form, .add-step-form {
    display: none;
}

/* Search Bar Styles */
.search-bar {
    margin-bottom: 12px; /* Further reduced bottom margin */
}

/* Snippet Titles and Search Results Container */
.snippet-titles-container, .search-results-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Further reduced gap */
}
.snippet-titles-container .search-result, .search-results-container .search-result {
    flex: 1 1 calc(11.11% - 6px); /* 9 per row (100/9 ≈ 11.11%) with reduced gap */
    background-color: #fff;
    padding: 8px; /* Further reduced padding */
    border: 1px solid #ddd;
    border-radius: 4px; /* Slightly smaller border radius */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    text-align: center; /* Center align text */
    /* Removed fixed height to make boxes flexible */
    min-height: 50px; /* Reduced minimum height for uniformity */
    display: flex;
    flex-direction: column; /* Stack title and description vertically */
    justify-content: center;
    transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}
.snippet-titles-container .search-result:hover, .search-results-container .search-result:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
}

/* Font Color Differentiation */
/* All Snippet Titles Section */
.snippet-titles-container .search-result h4 {
    font-size: 16px; /* Increased font size */
    margin: 0;
    color: #007bff; /* Blue color for All Snippet Titles */
    word-wrap: break-word;
    font-weight: bold; /* Make titles bold */
    transition: color 0.3s ease; /* Smooth color transition */
}

.snippet-titles-container .search-result h4:hover {
    color: #0056b3; /* Darker blue on hover */
}

/* Search Results Section */
.search-results-container .search-result h4 {
    font-size: 16px; /* Increased font size */
    margin: 0;
    color: #8B4513; /* Brown color for Search Results */
    word-wrap: break-word;
    font-weight: bold; /* Make titles bold */
    transition: color 0.3s ease; /* Smooth color transition */
}

.search-results-container .search-result h4:hover {
    color: #5a2a0a; /* Darker brown on hover */
}

.search-results-container .search-result p {
    font-size: 14px; /* Increased font size for descriptions */
    color: #555;
    margin-top: 5px; /* Add space between title and description */
    flex-grow: 1; /* Allow description to take up remaining space */
}

/* Pagination Styles */
#all-snippet-titles, .search-results-section {
    padding: 8px 8px; /* Further reduced side padding */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px; /* Slightly smaller border radius */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px; /* Further reduced bottom margin */
    transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}
#all-snippet-titles:hover, .search-results-section:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow on hover */
}

/* Responsive Design Adjustments */
@media (max-width: 1200px) {
    .snippet-titles-container .search-result, .search-results-container .search-result {
        flex: 1 1 calc(16.66% - 6px); /* 6 per row */
    }
}

@media (max-width: 992px) {
    .snippet-titles-container .search-result, .search-results-container .search-result {
        flex: 1 1 calc(25% - 6px); /* 4 per row */
    }
}

@media (max-width: 768px) {
    .snippet-titles-container .search-result, .search-results-container .search-result {
        flex: 1 1 calc(33.33% - 6px); /* 3 per row */
    }
}

@media (max-width: 576px) {
    .snippet-titles-container .search-result, .search-results-container .search-result {
        flex: 1 1 calc(50% - 6px); /* 2 per row */
    }
}

@media (max-width: 400px) {
    .snippet-titles-container .search-result, .search-results-container .search-result {
        flex: 1 1 100%; /* 1 per row */
    }
}

/* Notification Area Styles */
#notification-area {
    position: fixed;
    z-index: 9999;
    right: 20px;
    top: 20px;
    width: auto;
}

/* Button Styles */
.btn-link {
    padding: 0;
    font-size: 12px;
}

/* Toggle Button Styles */
#toggle-titles-btn {
    border-radius: 20px; /* Rounded edges */
    padding: 6px 12px; /* Further reduced padding for compactness */
    font-size: 14px; /* Consistent font size */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    background-color: #28a745; /* Attractive green background */
    color: #fff; /* White text for contrast */
}

#toggle-titles-btn:hover {
    background-color: #218838; /* Darker green on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Smooth Transitions for Elements */
.snippet-card, .search-result, .add-snippet-form, .edit-snippet-form, .add-step-form {
    transition: all 0.3s ease;
}

/* Highlight Class for Smooth Scroll */
.highlight {
    background-color: #ffffcc; /* Light yellow */
    transition: background-color 0.5s ease;
}

/* Adjust the top margin of the container to eliminate space above the navbar */
.container-fluid {
    margin-top: 0; /* Ensure no top margin */
}

/* Optional: Remove any default margin/padding that might be causing space above the navbar */
body > .container-fluid {
    padding-top: 0; /* Remove top padding */
}

/* Dropdown Menu Styles */
.dropdown-menu {
    min-width: 150px; /* Adjust as needed */
}

/* **Additional Styling for Attachments** */
.attachments img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    margin-right: 10px;
    width: 100px; /* Fixed width for thumbnails */
    height: auto;
}

/* Ownership Badge Styles */
.badge-primary {
    background-color: #007bff;
    color: #fff;
    margin-left: 5px;
}

.badge-success {
    background-color: #28a745;
    color: #fff;
    margin-left: 5px;
}

/* **New CSS Class for Code-With-URLs** */
.code-with-urls a.btn {
    margin-left: 5px;
}