/* Import Roboto font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* --- Variables (Optional, but good for consistency) --- */
:root {
    --google-blue: #4285F4;
    --google-red: #DB4437;
    --google-green: #0F9D58;
    --google-yellow: #F4B400;
    --text-primary: #202124; /* Dark grey for text */
    --text-secondary: #5f6368; /* Lighter grey for secondary text */
    --surface-background: #FFFFFF;
    --background-light-grey: #F8F9FA;
    --border-color: #DADCE0;
    --box-shadow-sm: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    --box-shadow-md: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
    --border-radius: 8px; /* Slightly more rounded corners */
}

/* --- General Styles --- */
body {
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--background-light-grey);
    color: var(--text-primary);
    font-size: 16px; /* Base font size */
}

.container {
    width: 90%;
    max-width: 1200px; /* Max width for larger screens */
    margin: 20px auto;
    padding: 24px;
    background-color: var(--surface-background);
    box-shadow: var(--box-shadow-sm);
    border-radius: var(--border-radius);
}

/* --- Header & Navigation --- */
header {
    background: var(--google-blue);
    color: #fff;
    padding: 16px 0; /* Reduced padding */
    border-bottom: none; /* Remove old border */
    box-shadow: var(--box-shadow-sm);
}

header .container {
    background-color: transparent; /* Header container doesn't need its own background */
    box-shadow: none;
    padding: 0 24px; /* Align with overall container padding */
    width: 100%;
    max-width: none;
    margin: 0;
}


header a {
    color: #fff;
    text-decoration: none;
    font-weight: 500; /* Medium weight for nav links */
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease-in-out;
}

header a:hover, header a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

header ul {
    padding: 0;
    list-style: none;
    text-align: center;
}

header li {
    display: inline;
    margin: 0 8px; /* Spacing between nav items */
}

header #branding {
    text-align: center;
    margin-bottom: 10px;
}

header #branding h1 {
    margin: 0;
    font-size: 1.75em; /* Slightly larger */
    font-weight: 500;
}

nav {
    margin-top: 0; /* Removed top margin */
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 400; /* Regular weight for headers by default */
    margin-top: 0;
    margin-bottom: 0.75em;
}

h1 { font-size: 2em; }       /* Approx 32px */
h2 { font-size: 1.5em; }     /* Approx 24px */
h3 { font-size: 1.25em; }    /* Approx 20px */

p {
    margin-bottom: 1em;
}

a {
    color: var(--google-blue);
    text-decoration: none;
    font-weight: 500;
}

a:hover, a:focus {
    text-decoration: underline;
    color: darken(var(--google-blue), 10%);
}

hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 24px 0;
}

/* --- Forms --- */
form div {
    margin-bottom: 20px;
}

form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500; /* Medium weight for labels */
    font-size: 0.875em; /* 14px */
    color: var(--text-secondary);
}

form input[type="text"],
form input[type="url"],
form input[type="file"],
form textarea,
form select {
    width: 100%;
    padding: 12px; /* Increased padding */
    border: 1px solid var(--border-color);
    border-radius: 4px; /* Softer corners */
    box-sizing: border-box;
    font-size: 1em; /* 16px */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

form input[type="text"]:focus,
form input[type="url"]:focus,
form input[type="file"]:focus,
form textarea:focus,
form select:focus {
    border-color: var(--google-blue);
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2); /* Focus ring */
    outline: none;
}

form textarea {
    min-height: 120px;
    resize: vertical;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    background-color: #e0e0e0; /* Default grey button */
    color: var(--text-primary);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9375em; /* 15px */
    font-weight: 500;
    border-radius: 4px;
    margin-right: 8px;
    text-transform: uppercase; /* Google style buttons are often uppercase */
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: var(--box-shadow-sm);
}

.btn:hover, .btn:focus {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    background-color: #d5d5d5; /* Slightly darker on hover */
    text-decoration: none;
    outline: none;
}

.btn-primary {
    background-color: var(--google-blue);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: darken(var(--google-blue), 8%);
}

.btn-danger {
    background-color: var(--google-red);
    color: #fff;
}

.btn-danger:hover, .btn-danger:focus {
    background-color: darken(var(--google-red), 8%);
}

.btn-sm { /* Smaller button variant */
    padding: 6px 12px;
    font-size: 0.8125em; /* 13px */
}

form button[type="submit"] { /* Make form submit buttons stand out a bit more by default */
    background-color: var(--google-blue);
    color: #fff;
}
form button[type="submit"]:hover, form button[type="submit"]:focus {
     background-color: darken(var(--google-blue), 8%);
}


/* --- Tables --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    background-color: var(--surface-background);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius); /* Rounded corners for the table */
    overflow: hidden; /* For border-radius to apply to th/td */
    box-shadow: var(--box-shadow-sm);
}

th, td {
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px; /* Increased padding */
    text-align: left;
    font-size: 0.9375em; /* 15px */
}

th {
    background-color: var(--background-light-grey); /* Lighter header for table */
    font-weight: 500; /* Medium weight for table headers */
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.8125em; /* 13px */
    letter-spacing: 0.5px;
}

tr:last-child td {
    border-bottom: none; /* No border for the last row */
}

tr:hover {
    background-color: #f5f5f5; /* Subtle hover for table rows */
}

/* --- Messages & Alerts --- */
.message {
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-weight: 500;
    display: flex;
    align-items: center;
}
/* Basic icon styling (could be enhanced with actual SVG icons) */
.message::before {
    margin-right: 10px;
    font-size: 1.2em;
}

.message.success {
    color: darken(var(--google-green), 10%);
    background-color: lighten(var(--google-green), 55%);
    border-color: lighten(var(--google-green), 40%);
}
.message.success::before {
    content: "✔"; /* Simple checkmark */
    color: var(--google-green);
}

.message.error {
    color: darken(var(--google-red), 10%);
    background-color: lighten(var(--google-red), 40%);
    border-color: lighten(var(--google-red), 30%);
}
.message.error::before {
    content: "✖"; /* Simple X */
    color: var(--google-red);
}

/* --- Artwork Specific Styles --- */
.artwork-image { /* For thumbnails in tables/forms */
    max-width: 100px;
    max-height: 100px;
    display: block;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.artwork-detail-image { /* For the main image on the detail page */
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    max-height: 500px; /* Limit max height */
    display: block;
    margin: 0 auto 24px auto; /* Center image */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-md);
    border: 1px solid var(--border-color);
}

/* --- Card Layout (for view_catalogue.php) --- */
.artwork-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive columns */
    gap: 24px; /* Spacing between cards */
}

.artwork-card {
    background-color: var(--surface-background);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: var(--box-shadow-sm);
    transition: box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

.artwork-card:hover {
    box-shadow: var(--box-shadow-md);
}

.artwork-card img, .artwork-card .no-image-placeholder {
    width: 100%;
    height: 200px; /* Fixed height for image container */
    object-fit: cover; /* Crop image to fit */
    border-radius: 4px; /* Rounded corners for image inside card */
    margin-bottom: 12px;
    background-color: #e0e0e0; /* Placeholder background */
}
.artwork-card .no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.875em;
}


.artwork-card h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.125em; /* 18px */
    font-weight: 500;
}
.artwork-card h3 a {
    color: var(--text-primary);
}
.artwork-card h3 a:hover {
    color: var(--google-blue);
    text-decoration: none;
}

.artwork-card p {
    font-size: 0.875em; /* 14px */
    color: var(--text-secondary);
    margin-bottom: 8px;
    flex-grow: 1; /* Allows text to take available space before button */
}
.artwork-card p strong {
    color: var(--text-primary);
    font-weight: 500;
}

.artwork-card .btn { /* Button at the bottom of the card */
    margin-top: auto; /* Pushes button to the bottom if content above is short */
    width: 100%;
    text-align: center;
}

/* --- Utility & Form Validation --- */
.error { /* For inline form field errors */
    color: var(--google-red);
    font-size: 0.875em;
    margin-top: 4px;
}

.invalid-feedback { /* Bootstrap-like class, if you use its JS validation */
    display: none; /* Hidden by default */
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--google-red);
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: var(--google-red);
    padding-right: calc(1.5em + .75rem); /* Adjust if using background icons for validation */
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
    border-color: var(--google-red);
    box-shadow: 0 0 0 0.2rem rgba(219, 68, 55, 0.25);
}
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
    padding-right: calc(1.5em + .75rem);
    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem);
}

/* --- Footer --- */
footer {
    text-align: center;
    padding: 24px;
    background: var(--background-light-grey);
    color: var(--text-secondary);
    margin-top: 30px;
    font-size: 0.875em;
    border-top: 1px solid var(--border-color);
}
footer p {
    margin: 0;
}

/* --- Responsive Adjustments (Basic) --- */
@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: 16px;
    }

    header ul {
        /* Consider a mobile-friendly navigation pattern here (e.g., hamburger menu) */
        /* For now, just stack them */
    }
    header li {
        display: block;
        margin: 8px 0;
    }

    .artwork-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 16px;
    }

    h1 { font-size: 1.75em; }
    h2 { font-size: 1.3em; }

    .btn {
        padding: 10px 15px;
        font-size: 0.875em;
    }
}

@media (max-width: 480px) {
    .artwork-grid {
        grid-template-columns: 1fr; /* Single column on very small screens */
    }
}