/* stranica/theme.css */

/* --- Base styles (Light Theme Defaults) --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* gray-100 */
    color: #1f2937; /* gray-800 */
    /* Prevent horizontal scroll */
    overflow-x: hidden;
}
.nav-main { /* Renamed from nav for specificity */
     background-color: #ffffff; /* white */
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
footer {
     background-color: #e5e7eb; /* gray-200 */
     color: #4b5563; /* gray-600 */
}
.fade-in-slow { animation: fadeInSlow 1.5s ease-in-out; }
@keyframes fadeInSlow { from { opacity: 0; } to { opacity: 1; } }
/* Apply transitions more selectively */
a, button, input, textarea, select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, box-shadow 0.2s ease;
}
body, .nav-main, footer, .mobile-menu {
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.title-overlay h1 {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.theme-toggle-button { /* Shared class for both buttons */
    color: #6b7280; /* gray-500 */
    background-color: #ffffff;
    border-color: #d1d5db; /* gray-300 */
}
.theme-toggle-button:hover {
    background-color: #f9fafb; /* gray-50 */
}
.lang-switcher-link { /* Shared class for both buttons */
    border-color: #d1d5db; /* gray-300 */
    color: #6b7280; /* gray-500 */
}
.lang-switcher-link:hover {
    background-color: #f9fafb; /* gray-50 */
    color: #374151; /* gray-700 */
}
#main-image { background-color: #d1d5db; }
.gallery-button { background-color: #2563eb; color: #ffffff; }
.gallery-button:hover { background-color: #1d4ed8; }
footer a { color: #4b5563; }
footer a:hover { color: #2563eb; }
.image-container { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

/* --- Custom Dark Theme Styles --- */
html.dark body { background-color: #111827; color: #d1d5db; } /* gray-900, gray-300 */
html.dark .nav-main { background-color: #1f2937; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); } /* gray-800 */
html.dark footer { background-color: #000000; color: #6b7280; } /* black, gray-500 */
html.dark .nav-main a { color: #d1d5db; } /* Applied to logo and desktop links */
html.dark .nav-main a:hover { color: #60a5fa; } /* Hover for logo and desktop links */
html.dark .theme-toggle-button { color: #9ca3af; background-color: transparent; border-color: #4b5563; } /* gray-400, gray-600 */
html.dark .theme-toggle-button:hover { background-color: #374151; color: #f9fafb; } /* gray-700, gray-50 */
html.dark .lang-switcher-link { border-color: #4b5563; color: #9ca3af; background-color: transparent; } /* gray-600, gray-400 */
html.dark .lang-switcher-link:hover { background-color: #374151; color: #f9fafb; } /* gray-700, gray-50 */
html.dark #main-image { background-color: #374151; }
html.dark .gallery-button { background-color: #1d4ed8; }
html.dark .gallery-button:hover { background-color: #1e40af; }
html.dark footer a { color: #6b7280; }
html.dark footer a:hover { color: #d1d5db; }
html.dark .title-overlay h1 { text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); }
html.dark .image-container { box-shadow: none; }


/* --- Mobile Menu Specific Styles --- */
.mobile-menu {
    background-color: #ffffff; /* Light mode background */
    border-top: 1px solid #e5e7eb; /* gray-200 Light mode border */
}
html.dark .mobile-menu {
    background-color: #1f2937; /* gray-800 Dark mode background */
    border-top: 1px solid #374151; /* gray-700 Dark mode border */
}
/* Base styles for links in mobile menu */
.mobile-menu a {
    color: #1f2937; /* gray-800 Light mode text */
}
html.dark .mobile-menu a {
    color: #d1d5db; /* gray-300 Dark mode text */
}
/* Hover/Focus styles for mobile links */
.mobile-menu a:hover,
.mobile-menu a:focus {
    background-color: #f3f4f6; /* gray-100 Light mode hover background */
    color: #111827; /* gray-900 Light mode hover text */
    outline: none; /* Remove default focus outline if adding custom */
}
html.dark .mobile-menu a:hover,
html.dark .mobile-menu a:focus {
    background-color: #374151; /* gray-700 Dark mode hover background */
    color: #ffffff; /* white Dark mode hover text */
}
/* Active link style override for light mode */
.mobile-menu a.text-blue-600 {
    color: #2563eb !important; /* blue-600 */
    font-weight: 600;
    background-color: #eff6ff; /* blue-50 */
}
/* Active link style override for dark mode */
html.dark .mobile-menu a.text-blue-600 {
    color: #93c5fd !important; /* blue-300 */
    font-weight: 600;
    background-color: #1e3a8a; /* blue-900 */
}
/* Hamburger button */
.mobile-menu-button {
    color: #374151; /* gray-700 Light mode icon color */
}
html.dark .mobile-menu-button {
    color: #d1d5db; /* gray-300 Dark mode icon color */
}
.mobile-menu-button:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Slight background on hover */
}
html.dark .mobile-menu-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
/* Separator in mobile menu */
.mobile-menu-divider {
    border-color: #e5e7eb; /* gray-200 Light mode */
}
html.dark .mobile-menu-divider {
    border-color: #374151; /* gray-700 Dark mode */
}
/* Specific style for mobile logout link */
.mobile-logout-link {
    color: #dc2626; /* red-600 */
}
html.dark .mobile-logout-link {
    color: #f87171; /* red-400 */
}
.mobile-logout-link:hover,
.mobile-logout-link:focus {
    background-color: #fee2e2 !important; /* red-100 */
    color: #b91c1c !important; /* red-700 */
}
html.dark .mobile-logout-link:hover,
html.dark .mobile-logout-link:focus {
    background-color: #450a0a !important; /* red-950 */
    color: #fecaca !important; /* red-200 */
}


/* --- Admin Specific Styles --- */
.message { padding: 1rem; margin-bottom: 1rem; border-radius: 0.375rem; border-width: 1px; }
.message-success { background-color: #dcfce7; border-color: #bbf7d0; color: #166534; }
.message-error   { background-color: #fee2e2; border-color: #fecaca; color: #991b1b; }
.message-warning { background-color: #fef3c7; border-color: #fde68a; color: #92400e; }
html.dark .message-success { background-color: #064e3b; border-color: #059669; color: #d1fae5; }
html.dark .message-error   { background-color: #7f1d1d; border-color: #dc2626; color: #fee2e2; }
html.dark .message-warning { background-color: #7c2d12; border-color: #d97706; color: #fef3c7; }
.form-container { background-color: #ffffff; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
html.dark .form-container { background-color: #1f2937; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); }
.form-label { color: #374151; }
html.dark .form-label { color: #d1d5db; }
.form-input { border-color: #d1d5db; background-color: #ffffff; color: #1f2937; border-radius: 0.375rem; padding: 0.5rem 0.75rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.form-input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }
html.dark .form-input { border-color: #4b5563; background-color: #374151; color: #f9fafb; }
 html.dark .form-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); }
 .form-input-file { border-color: #d1d5db; background-color: #ffffff; color: #6b7280; border-radius: 0.375rem; padding: 0; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); line-height: 1.5; }
 html.dark .form-input-file { border-color: #4b5563; background-color: #374151; color: #9ca3af; }
 .form-input-file::file-selector-button { background-color: #2563eb; color: #ffffff; border: 0; border-right: 1px solid #d1d5db; padding: 0.5rem 1rem; margin-right: 1rem; cursor: pointer; font-weight: 600; font-size: 0.875rem; transition: background-color 0.2s ease; }
 .form-input-file::file-selector-button:hover { background-color: #1d4ed8; }
 html.dark .form-input-file::file-selector-button { background-color: #1d4ed8; color: #dbeafe; border-right-color: #4b5563; }
 html.dark .form-input-file::file-selector-button:hover { background-color: #1e40af; }
 .form-helper { color: #6b7280; }
 html.dark .form-helper { color: #9ca3af; }
 .button { font-weight: bold; padding: 0.5rem 1rem; border-radius: 0.5rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); transition: background-color 0.3s ease; width: 100%; }
 .button:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); }
 .button-primary { background-color: #1d4ed8; color: #ffffff; }
 .button-primary:hover { background-color: #1e40af; }
 .button-primary:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4); }
 html.dark .button-primary { background-color: #2563eb; }
 html.dark .button-primary:hover { background-color: #1d4ed8; }
 html.dark .button-primary:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); }
 .button-success { background-color: #059669; color: #ffffff; }
 .button-success:hover { background-color: #047857; }
 .button-success:focus { box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.4); }
 html.dark .button-success { background-color: #10b981; color: #064e3b; }
 html.dark .button-success:hover { background-color: #059669; }
 html.dark .button-success:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4); }
 /* Logout button specific style (used on desktop) */
 .button-danger {
     color: #dc2626; /* red-600 */
     padding: 0.5rem 0.75rem; /* Adjust padding if needed */
     border-radius: 0.375rem; /* rounded-md */
     transition: background-color 0.2s ease, color 0.2s ease;
 }
 .button-danger:hover {
     background-color: #fee2e2; /* red-100 */
     color: #b91c1c; /* red-700 */
 }
 html.dark .button-danger {
     color: #f87171; /* red-400 */
 }
 html.dark .button-danger:hover {
     background-color: #450a0a; /* red-900 */
     color: #fecaca; /* red-200 */
 }

 .delete-gallery-item { position: relative; overflow: hidden; border-radius: 0.375rem; background-color: #f3f4f6; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
 html.dark .delete-gallery-item { background-color: #1f2937; }
 .delete-gallery-item img { display: block; width: 100%; height: 100px; object-fit: cover; }
 .delete-button { position: absolute; top: 4px; right: 4px; background-color: rgba(220, 38, 38, 0.8); color: white; border: none; border-radius: 9999px; width: 24px; height: 24px; font-size: 14px; font-weight: bold; line-height: 24px; text-align: center; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: background-color 0.2s ease; }
 .delete-button:hover { background-color: rgba(185, 28, 28, 0.9); }
 hr { border-color: #d1d5db; }
 html.dark hr { border-color: #374151; }


/* --- Gallery Specific Styles (Moved from gallery.php <style> block) --- */
.fade-in { animation: fadeIn 0.8s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.aspect-w-1 { position: relative; padding-bottom: 100%; } /* For square aspect ratio */
.aspect-w-1 > img { position: absolute; height: 100%; width: 100%; inset: 0px; object-fit: cover; color: transparent; }

/* Lightbox specific styles */
.lightbox {
    display: none; /* Hidden by default */
    position: fixed; /* Take up full screen */
    z-index: 9999; /* Sit on top */
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85); /* Dark semi-transparent background */
    /* Flexbox to center content */
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Indicate close on click background */
    -webkit-tap-highlight-color: transparent; /* Remove blue tap highlight on mobile */
}
.lightbox img {
    max-width: 90%; max-height: 85%; /* Limit image size */
    display: block; margin: auto; /* Center image */
    border-radius: 8px;
    cursor: default; /* Default cursor over image itself */
    user-select: none; -webkit-user-drag: none; /* Prevent dragging */
    background-color: #374151; /* Dark placeholder bg while loading */
}
html:not(.dark) .lightbox img { background-color: #d1d5db; /* Light placeholder bg */ }
.lightbox-close {
    position: absolute; top: 20px; right: 30px;
    font-size: 35px; font-weight: bold; color: white;
    cursor: pointer; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Show arrows on hover over lightbox background */
.lightbox:hover .nav-arrow { opacity: 0.7; }
.nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 3rem; color: white;
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-in-out;
    z-index: 10000; /* Above image */
    padding: 1rem; user-select: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.nav-arrow.prev { left: 15px; }
.nav-arrow.next { right: 15px; }
.nav-arrow:hover { opacity: 1; } /* Fully visible on hover */
/* Prevent body scroll when lightbox is open */
body.lightbox-open { overflow: hidden; }

/* Pagination button styles */
.pagination-link {
    border: 1px solid #d1d5db; background-color: #ffffff; color: #374151;
    padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-decoration: none; /* Ensure no underline */
    display: inline-block; /* Correct alignment */
    line-height: 1.25rem; /* Match padding */
}
.pagination-link:hover { background-color: #f3f4f6; }
.pagination-link.active { border-color: #2563eb; background-color: #2563eb; color: #ffffff; cursor: default; }
/* Dark mode pagination */
html.dark .pagination-link { border-color: #4b5563; background-color: #374151; color: #d1d5db; }
html.dark .pagination-link:hover { background-color: #4b5563; }
html.dark .pagination-link.active { border-color: #1d4ed8; background-color: #1d4ed8; color: #ffffff; }

/* Gallery Item background/shadow */
.gallery-item { background-color: #e5e7eb; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
html.dark .gallery-item { background-color: #1f2937; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); }

/* Error message colors (Gallery specific potentially redundant with Admin) */
.error-alert { background-color: #fef2f2; border-color: #fecaca; color: #b91c1c; }
html.dark .error-alert { background-color: #450a0a; border-color: #991b1b; color: #fecaca; }
.error-alert strong { color: #991b1c; }
html.dark .error-alert strong { color: #fca5a5; }

/* No images text color */
.no-images-text { color: #6b7280; }
html.dark .no-images-text { color: #9ca3af; }

/* Tag filter button styles */
.tag-filter-button {
    border: 1px solid #d1d5db; /* Light mode border */
    color: #374151; /* Light mode text */
}
.tag-filter-button:hover {
    background-color: #f3f4f6; /* Light mode hover */
}
html.dark .tag-filter-button {
    border-color: #4b5563; /* Dark mode border */
    color: #d1d5db; /* Dark mode text */
}
html.dark .tag-filter-button:hover {
    background-color: #374151; /* Dark mode hover */
}
.tag-filter-button.active {
    background-color: #2563eb; /* blue-600 */
    color: white;
    border-color: #2563eb; /* blue-600 */
}
html.dark .tag-filter-button.active {
     background-color: #1d4ed8; /* blue-700 */
     border-color: #1d4ed8; /* blue-700 */
     color: white;
}
.tag-filter-button {
     transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}