/*
 * wwwroot/css/site.css
 * 
 * This file contains the global styles for the PhotoGallery application.
 * It has been significantly updated to provide a more modern and cohesive look and feel,
 * moving away from default Bootstrap aesthetics.
 */

/*
 * 1. Root CSS Variables for Color Palette
 *    These custom properties (CSS variables) define a consistent color palette
 *    that can be easily reused and modified throughout the stylesheet.
 *    Changes: Introduced a comprehensive color palette for better visual consistency.
 */
:root {
    --primary-color: #007bff; /* Bootstrap's default blue, used for primary actions and branding */
    --secondary-color: #6c757d; /* Bootstrap's default gray, used for secondary text/elements */
    --accent-color: #28a745; /* A vibrant green, suitable for success messages or prominent actions */
    --background-light: #f8f9fa; /* A very light gray for the overall page background */
    --text-dark: #343a40; /* Dark charcoal for primary text, ensuring good readability */
    --text-light: #ffffff; /* Pure white for text on dark backgrounds (e.g., navbar) */
    --border-color: #dee2e6; /* Light gray for borders, consistent with Bootstrap's default */
    --card-bg: #ffffff; /* White background for card components */
    --card-shadow: rgba(0, 0, 0, 0.08); /* Subtle shadow for cards to give depth */
}

/*
 * 2. Base HTML and Body Styles
 *    Defines global typography and background for the entire application.
 *    Changes:
 *    - Increased base font size for better readability.
 *    - Switched to a modern, clean sans-serif font stack.
 *    - Applied a light background color from the defined palette.
 */
html {
    font-size: 16px; /* Base font size for better readability across devices */
    position: relative;
    min-height: 100%;
    /* Modern sans-serif font stack for clean and readable text */
    font-family: 'Montserrat', sans-serif; /* Primary font for headings and general text */
    color: var(--text-dark); /* Default text color from palette */
}

/* Media query for larger screens to slightly increase font size */
@media (min-width: 768px) {
    html {
        font-size: 17px;
    }
}

/* For the fixed navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030; /* Ensure it stays on top of other content */
}

/* Adjust body padding to prevent content from being hidden behind the fixed navbar */
body {
    padding-top: 70px; /* Adjust based on your navbar's height */
    margin-bottom: 60px; /* Space for the footer */
    background-color: var(--background-light); /* Page background color from palette */
    font-family: 'Roboto', sans-serif; /* Secondary font for body text */
}

/*
 * 3. General Button and Form Control Focus Styles
 *    Ensures consistent and branded focus indicators for interactive elements.
 *    Changes: Modified box-shadow color to use the primary color for focus states.
 */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    /* Custom focus ring using palette colors for consistency */
    box-shadow: 0 0 0 0.1rem var(--background-light), 0 0 0 0.25rem var(--primary-color);
}

/*
 * 4. Card Styling for Albums and Photos
 *    Applies a modern card aesthetic with subtle shadows and hover effects.
 *    Changes:
 *    - Added border-radius and box-shadow for a softer, elevated look.
 *    - Implemented a subtle transform and shadow change on hover for interactivity.
 *    - Ensured consistent image sizing and object-fit for thumbnails.
 */
.card {
    border: 1px solid var(--border-color); /* Border color from palette */
    border-radius: 0.5rem; /* Slightly rounded corners for a modern feel */
    box-shadow: 0 0.125rem 0.25rem var(--card-shadow); /* Subtle shadow for depth */
    /* Smooth transition for hover effects */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    overflow: hidden; /* Ensures content respects border-radius */
}

.card:hover {
    transform: translateY(-3px); /* Lifts the card slightly on hover */
    box-shadow: 0 0.25rem 0.5rem var(--card-shadow); /* Increases shadow on hover */
}

.card-img-top {
    width: 100%;
    height: 180px; /* Consistent height for all album/photo thumbnails */
    object-fit: cover; /* Ensures images fill the area without distortion, cropping if necessary */
    /* Apply border-radius to top corners to match card */
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
}

.placeholder-image {
    background-color: var(--border-color); /* Background color from palette */
    color: var(--secondary-color); /* Text color from palette */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    height: 180px; /* Matches card-img-top height */
    /* Apply border-radius to top corners to match card */
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
}

.card-body {
    padding: 1rem;
    background-color: var(--card-bg); /* Card body background from palette */
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    /*color: var(--primary-color); /* Card title color from palette */
	color:	black;
}

.footer {
    background-color: #fff;
    border-top: 1px solid var(--border-color);
    padding: 1rem 0;
    font-size: 0.9rem;
    color: var(--secondary-color);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
}

.thumbnail-overlay-container {
    position: relative;
    width: 100%;
    height: 180px; /* Match card-img-top height */
    overflow: hidden;
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
}

.album-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: var(--text-light); /* White text */
    padding: 0.5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    /* Ensure text is vertically centered if needed, or adjust padding */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px; /* Minimum height for the overlay */
}

.album-title-overlay h5 {
    margin-bottom: 0;
    color: inherit;
    font-family: 'Montserrat', sans-serif;
}

/* Manage Albums Page Styles */
.table-vcenter td, .table-vcenter th {
    vertical-align: middle;
}

.permissions-container {
    max-height: 60px;
    overflow-y: auto;
}

.sub-album-table {
    background-color: #f8f9fa;
}