/* public/css/custom.css */

/* Core layout styles (previously inline in header.php) */
body {
    display: flex; /* Enables flex layout for the main body */
    min-height: 100vh; /* Ensures the body takes at least the full viewport height */
    overflow-x: hidden; /* Prevents horizontal scrollbar, often an issue with offcanvas */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Default Bootstrap font stack for consistency */
    background-color: #f8f9fa; /* A light background for the page */
}

.sidebar-nav-menu {
    width: 280px; /* Width of the sidebar */
    min-height: 100vh; /* Sidebar tries to be full height */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    /* bg-dark and text-white classes are applied in HTML */
}

.content-wrapper {
    display: flex; /* Enables flex for stacking navbar and main content */
    flex-direction: column; /* Stacks children (navbar, main) vertically */
    flex-grow: 1; /* Takes up remaining horizontal space */
    /*width: 100%; /* */
    transition: margin-left 0.2s ease-in-out; /* Smooth transition for sidebar toggling effect on margin */
    background-color: #ffffff; /* White background for the content area including navbar */
}

.drop-zone-wrapper {
    border: 2px dashed #007bff; /* Example: Bootstrap primary color dashed border */
    background-color: #f8f9fa; /* Light background */
    transition: background-color 0.2s ease-in-out;
}

.drop-zone-wrapper.drag-over { /* We'll add this class with JS later when a file is dragged over */
    background-color: #e9ecef; /* Slightly darker background on drag over */
    border-color: #0056b3;
}


@media (min-width: 992px) { /* 992px is Bootstrap's 'lg' breakpoint */
    .sidebar-nav-menu.offcanvas-lg.offcanvas-start .offcanvas-header {
        display: flex !important; /* Bootstrap's default for .offcanvas-header is display: flex */
        visibility: visible !important; /* Just in case visibility is also being affected */
    }
}


.top-navbar {
    /* Navbar takes the width of its container (.content-wrapper) */
    position: sticky; /* Makes it stick to the top when scrolling within .content-wrapper */
    top: 0;
    z-index: 1020; /* Standard z-index for navbars, above content, below modals */
    /* bg-light and border-bottom classes are applied in HTML */
}

.content-area {
    flex-grow: 1; /* Main content area takes available vertical space in .content-wrapper */
    padding: 1.5rem; /* Standard padding around content */
}

/* Responsive adjustments for when sidebar is visible on large screens */
@media (min-width: 992px) { /* Corresponds to Bootstrap's 'lg' breakpoint */
    /*.content-wrapper {
        margin-left: 280px; 
        width: calc(100% - 280px);
    }*/
    /* On large screens, .offcanvas-lg.offcanvas-start is displayed as a block element by Bootstrap */
}

.page-footer {
    /* Footer takes width of its container (.content-wrapper) */
    /* bg-light, text-center, border-top classes are applied in HTML */
    /* mt-auto pushes it to the bottom of the flex container (.content-wrapper) */
}


/* Additional custom styles can go here */
/* Example: Styling for cards in dashboard */
.card.border-left-primary { /* Just an example from your dashboard widget */
    border-left: .25rem solid #0d6efd !important; /* Bootstrap primary color */
}

.text-gray-300 { color: #dddfeb !important; } /* Example utility color */
.text-gray-800 { color: #5a5c69 !important; } /* Example utility color */

/* You might want to ensure the sidebar links have good contrast and hover states */
.sidebar-nav-menu .nav-link {
    /* text-white is applied in HTML */
    border-radius: .375rem; /* Slight rounding of nav links */
    margin-bottom: .125rem; /* Small margin between links */
}
.sidebar-nav-menu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover effect */
}
.sidebar-nav-menu .nav-link.active {
    background-color: #0d6efd; /* Bootstrap primary color for active link */
    font-weight: bold;
}

.sidebar-nav-menu .nav-link .bi { /* Bootstrap icons in nav links */
    margin-right: 0.5rem; /* Space between icon and text */
    font-size: 1.1rem; /* Slightly larger icons */
    vertical-align: text-bottom; /* Align icons nicely with text */
}

/* Styling for the sidebar header link */
.sidebar-nav-menu .offcanvas-header .offcanvas-title a:hover {
    opacity: 0.8; /* Slight hover effect for the logo/appname link */
}

/* --- Styles for Image Preview Thumbnails --- */
#selectedFilesPreview .preview-list {
    display: flex;
    flex-direction: column; /* This is the default */
    gap: 0.75rem;
}

#selectedFilesPreview .preview-list-item {
    display: flex; 
    align-items: center; 
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #fff;
    overflow: hidden;
}

#selectedFilesPreview .preview-image-container {
    flex-shrink: 0;
    margin-right: 0.75rem;
}

#selectedFilesPreview .preview-image {
    display: block;
    height: 70px;  /* Default height for mobile */
    width: 70px;   /* Default width for mobile - makes it square */
    object-fit: cover;
    border-radius: 0.25rem;
}

#selectedFilesPreview .preview-file-info {
    flex-grow: 1;
    overflow: hidden;
    font-size: 0.9rem;
}

#selectedFilesPreview .preview-file-info .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.1rem !important;
    font-weight: 500;
}


/* Styles for large screens (e.g., Bootstrap's lg breakpoint) */
@media (min-width: 992px) {
    #selectedFilesPreview .preview-list {
        flex-direction: row;
        flex-wrap: wrap;
        /* gap: 0.75rem; /* This is already defined above and will apply */
    }

    #selectedFilesPreview .preview-list-item {
        flex-direction: column; /* Stack image and text vertically within each item */
        align-items: center;    /* Center content if list item is wider than preview image */
        width: calc(25% - 0.75rem * 3 / 4); /* Example: Aim for 4 items per row - adjust as needed*/
        width: 150px; /* Let's try a fixed width for the item first for predictability */
        margin-bottom: 0.75rem; /* Re-add margin if gap isn't sufficient or preferred for column items */
    }

    #selectedFilesPreview .preview-image-container {
        width: 120px;  /* Define a fixed width for the image's container */
        height: 120px; /* Define a fixed height, making it square */
        margin-right: 0; /* No right margin when image is above text */
        margin-bottom: 0.5rem; /* Space between image container and text below it */
        /* background-color: #f0f0f0; /* Optional: for debugging container size */
    }

    #selectedFilesPreview .preview-image {
        width: 100%;   /* Image fills its square container width */
        height: 100%;  /* Image fills its square container height */
        object-fit: cover; /* Ensures the image covers the 120x120px area */
    }

    #selectedFilesPreview .preview-file-info {
        width: 100%; /* Ensure file info takes full width below image */
        text-align: center; /* Center the text info below the image */
    }
}
/* Example for even smaller items on very large screens if you want more per row */
@media (min-width: 1200px) { /* Bootstrap's xl breakpoint */
    #selectedFilesPreview .preview-list-item {
         /* Example: Aim for 5 or 6 items per row */
        width: calc(20% - 0.75rem * 4 / 5);
    }
}

/* --- Styles for Gallery Image Preview Thumbnails (Bootstrap 3 compatible) --- */
#gallerySelectedFilesPreview .preview-item {
    margin-bottom: 15px;
    padding: 4px;
}

#gallerySelectedFilesPreview .preview-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

#gallerySelectedFilesPreview .preview-item .caption {
    padding: 9px;
    color: #333;
}