:root {
--primary-color: #007bff;
--primary-hover: #0056b3;
--background-color: #f4f7f9;
--text-color: #333;
--border-color: #ddd;
--success-color: #28a745;
--error-color: #dc3545;
--progress-bg: #e9ecef;
--card-bg: #fff;
--map-invert: 0;
}
[data-theme="dark"] {
--background-color: #121212;
--text-color: #e0e0e0;
--border-color: #333;
--card-bg: #1e1e1e;
--progress-bg: #222;
--map-invert: 0.9;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
display: flex;
flex-direction: column;
align-items: center; 
min-height: 100vh;
line-height: 1.6;
}

.branding {
text-align: center;
background-color: var(--card-bg);
border-bottom: 1px solid var(--border-color);
width: 100%;
}

.branding h1 {
font-size: 1.5rem;
margin-top: 0.5rem;
}

.logo {
max-width: 150px;
height: auto;
}

main {
flex: 1;
display: flex;
flex-direction: column; 
justify-content: center;
align-items: center;
padding: 2rem 1rem;
width: 100%;
}

#upload-container {
width: 100%;
max-width: 600px;
background-color: var(--card-bg);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
overflow: hidden;
}

#drop-zone {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 3rem 1rem;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
margin: 1.5rem;
}

#drop-zone.drag-over {
background-color: #eef8ff;
border-color: var(--primary-color);
}

.drop-zone-prompt p {
font-size: 1.2rem;
font-weight: 500;
}

.drop-zone-prompt span {
display: block;
margin: 1rem 0;
color: #888;
}

#browse-btn {
font-size: 1rem;
padding: 0.75rem 1.5rem;
background-color: var(--primary-color);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease;
}

#browse-btn:hover {
background-color: var(--primary-hover);
}

#progress-area {
padding: 0 1.5rem 1.5rem;
max-height: 40vh;
overflow-y: auto;
}

.file-progress {
display: flex;
align-items: center;
margin-bottom: 1rem;
gap: 1rem;
}
.file-progress:last-child {
margin-bottom: 0;
}

.file-icon {
font-size: 1.5rem;
width: 30px;
text-align: center;
}

.file-details {
flex: 1;
min-width: 0; 
}

.file-name {
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.progress-bar {
width: 100%;
height: 8px;
background-color: var(--progress-bg);
border-radius: 4px;
overflow: hidden;
margin-top: 0.25rem;
}

.progress {
width: 0%;
height: 100%;
background-color: var(--primary-color);
transition: width 0.1s linear;
}

.file-meta {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: #666;
margin-top: 0.25rem;
}

.status-icon {
font-size: 1.5rem;
width: 30px;
text-align: center;
}
.status-icon.success { color: var(--success-color); }
.status-icon.error { color: var(--error-color); }

/* --- Styles for File List (User Page) --- */
#file-list-container {
width: 100%;
max-width: 600px;
background-color: var(--card-bg);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
margin-top: 2rem;
padding: 1.5rem;
}

#file-list-container h2 {
margin-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.5rem;
font-size: 1.2rem;
}

.file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0.5rem;
border-radius: 5px;
transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
gap: 1rem;
}
.file-item:not(:last-child) {
border-bottom: 1px solid var(--border-color);
}
.file-item:hover {
background-color: var(--background-color);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.file-item-details {
flex-grow: 1;
min-width: 0;
}

.file-item-name {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}

.file-item-meta {
font-size: 0.75rem;
color: #888;
margin-top: 0.2rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.file-item-meta strong {
color: var(--text-color);
font-weight: 500;
}

.file-item-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}

.file-item-thumbnail {
max-width: 40px;
height: 40px;
object-fit: cover;
border-radius: 3px;
border: 1px solid var(--border-color);
}
.file-item-thumbnail-placeholder {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 0.75rem;
color: #ccc;
border: 1px dashed var(--border-color);
border-radius: 3px;
background-color: #fafafa;
}

.download-btn {
font-size: 0.9rem;
text-decoration: none;
padding: 0.4rem 0.8rem;
background-color: var(--primary-color);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease;
white-space: nowrap; 
}

.download-btn:hover {
background-color: var(--primary-hover);
}

/* New Styles for Global Progress and Toasts */
.global-progress {
margin-bottom: 1rem;
padding: 0.5rem;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 5px;
}
.global-status {
display: block;
text-align: center;
font-size: 0.9rem;
margin-top: 0.25rem;
}
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 0.75rem 1.5rem;
border-radius: 5px;
color: #fff;
animation: fadeInOut 3s ease;
z-index: 1000;
}
.toast.success { background: var(--success-color); }
.toast.error { background: var(--error-color); }
.toast.info { background: var(--primary); }

/* Upload queue feedback (helps on mobile when selecting lots of files) */
.queue-status {
display: block;
text-align: center;
font-size: 0.8rem;
opacity: 0.85;
margin-top: 0.2rem;
}
.selection-status {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.85rem;
margin-top: 0.35rem;
}
.mini-spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-top-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: inline-block;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fadeInOut {
0% { opacity: 0; transform: translate(-50%, 20px); }
10% { opacity: 1; transform: translateX(-50%); }
90% { opacity: 1; transform: translateX(-50%); }
100% { opacity: 0; transform: translate(-50%, 20px); }
}

/* Media Queries for Mobile/Tablet */
@media (max-width: 768px) {
#upload-container { max-width: 100%; padding: 1rem; }
#drop-zone { padding: 4rem 1rem; border-width: 3px; } /* Larger drop area */
#browse-btn, .full-width-btn { width: 100%; font-size: 1.2rem; padding: 1rem; margin-top: 1rem; }
.file-item { flex-direction: column; align-items: flex-start; } /* Stack for readability */
.file-item-actions { width: 100%; justify-content: space-between; }
#file-list-container { max-width: 100%; }
.table { overflow-x: auto; display: block; } /* Scrollable tables for admin */
.client-section { margin-bottom: 2rem; }
}
.full-width-btn { display: none; } /* Show only on mobile */
@media (max-width: 768px) { .full-width-btn { display: block; } }

/* --- Footer --- */
.site-footer {
width: 100%;
background: var(--card-bg);
border-top: 1px solid var(--border-color);
padding: 1rem;
text-align: center;
color: #666;
}
.site-footer a {
color: var(--primary-color);
text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }

/* Screen-reader-only helper */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}


/* --- EXIF / GPS notice --- */
.exif-notice {
max-width: 900px;
margin: 1rem auto 1.25rem;
padding: 1rem 1.1rem;
border: 1px solid var(--border-color);
border-radius: 12px;
background: var(--card-bg);
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.exif-notice h2 {
font-size: 1.05rem;
margin: 0 0 0.5rem 0;
}

.exif-notice p {
margin: 0.4rem 0;
color: #444;
line-height: 1.4;
}

.exif-notice details {
margin-top: 0.6rem;
}

.exif-notice summary {
cursor: pointer;
font-weight: 700;
color: var(--primary-color);
outline: none;
}

.exif-notice .notice-body {
margin-top: 0.75rem;
}

.exif-notice h3 {
margin: 0.75rem 0 0.35rem;
font-size: 0.95rem;
}

.exif-notice ul {
margin: 0.25rem 0 0.75rem 1.25rem;
color: #444;
}

.exif-notice li {
margin: 0.25rem 0;
}

.exif-notice .notice-small {
font-size: 0.9rem;
color: #666;
}


/* --- GPS / EXIF status --- */
.gps-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.5rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 700;
border: 1px solid var(--border-color);
background: var(--card-bg);
}

.gps-badge.gps-ok { color: #1b5e20; }
.gps-badge.gps-missing { color: #8a6d00; }

.gps-actions {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
margin-top: 0.35rem;
}

.set-location-btn {
padding: 0.35rem 0.6rem;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--card-bg);
cursor: pointer;
font-weight: 700;
}

.set-location-btn:hover { filter: brightness(0.98); }

.map-link {
font-weight: 700;
text-decoration: none;
color: var(--primary-color);
}

.map-link:hover { text-decoration: underline; }

/* --- Modal (map picker) --- */
.modal.hidden { display: none; }

.modal {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 1rem;
}

.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
}

.modal-content {
position: relative;
width: min(920px, 100%);
background: rgba(255,255,255,0.8);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
padding: 1rem;
}
[data-theme="dark"] .modal-content {
background: rgba(30,30,30,0.8);
border: 1px solid rgba(255,255,255,0.05);
}

.modal-help { color: #555; margin: 0.25rem 0 0.75rem; }

.location-map {
width: 100%;
height: 380px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-color);
}

.modal-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 0.9rem;
}

/* Simple button styles for modal */
.btn-primary, .btn-secondary {
border-radius: 12px;
padding: 0.55rem 0.9rem;
font-weight: 800;
cursor: pointer;
border: 1px solid var(--border-color);
}

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

.btn-primary:disabled {
opacity: 0.55;
cursor: not-allowed;
}

.btn-secondary {
background: var(--card-bg);
color: var(--text-color);
}

.theme-toggle-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;position:absolute;top:1rem;right:1rem;padding:0.5rem;border-radius:50%;transition:background 0.2s}
.theme-toggle-btn:hover{background:var(--background-color)}
.branding{position:relative}
.compression-toggle-container{padding:0.75rem 1.5rem;border-bottom:1px solid var(--border-color)}
.compression-toggle-container label{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer}
#pre-upload-container{padding:1.5rem;border-bottom:1px solid var(--border-color)}
#pre-upload-container h3{font-size:1.1rem;margin-bottom:1rem}
#pre-upload-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}
.pre-upload-card{display:flex;gap:1rem;padding:0.75rem;border:1px solid var(--border-color);border-radius:8px;background:var(--background-color);transition:transform 0.15s ease,box-shadow 0.15s ease}
.pre-upload-card:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.pre-upload-thumb{width:60px;height:60px;object-fit:cover;border-radius:4px;border:1px solid var(--border-color)}
.pre-upload-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.35rem}
.pre-upload-info .file-name{font-weight:bold;font-size:0.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pre-upload-info .file-size{font-size:0.8rem;color:#888}
.pre-upload-fields{display:flex;flex-wrap:wrap;gap:0.5rem}
.pre-upload-fields input{flex:1;min-width:120px;padding:0.25rem 0.5rem;border:1px solid var(--border-color);border-radius:4px;background:var(--card-bg);color:var(--text-color);font-size:0.85rem}
.pre-upload-fields button{padding:0.25rem 0.5rem;font-size:0.8rem;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-color);border-radius:4px;cursor:pointer}
.pre-upload-fields button:hover{background:var(--border-color)}
.pre-upload-remove{border:none;background:none;color:var(--error-color);cursor:pointer;font-size:1.2rem;align-self:flex-start}
.pre-upload-actions{display:flex;gap:1rem;margin-top:1rem}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
.lightbox.hidden{display:none}
.lightbox-content img,.lightbox-content video{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:4px;box-shadow:0 10px 25px rgba(0,0,0,0.5)}
.lightbox-close{position:absolute;top:1.5rem;right:2rem;color:#fff;font-size:2.5rem;font-weight:bold;cursor:pointer;user-select:none;transition:color 0.2s}
.lightbox-close:hover{color:var(--primary-color)}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.1);color:#fff;border:none;font-size:2rem;padding:1rem;cursor:pointer;border-radius:4px;transition:background 0.2s;user-select:none}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,0.25)}
.lightbox-prev{left:2rem}
.lightbox-next{right:2rem}
.leaflet-tile-container{filter:invert(var(--map-invert)) hue-rotate(180deg)}
.hidden{display:none !important}
.glass-card{background:rgba(255,255,255,0.75);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2)}
[data-theme="dark"] .glass-card{background:rgba(30,30,30,0.75);border:1px solid rgba(255,255,255,0.05)}
[data-theme="dark"] select,[data-theme="dark"] input[type="text"],[data-theme="dark"] input[type="date"]{background:var(--background-color);color:var(--text-color);border-color:var(--border-color)}
[data-theme="dark"] table{color:var(--text-color)}
[data-theme="dark"] .date-separator td{background:#181818}
.admin-search-panel{margin-bottom:1.5rem;padding:1rem;border-radius:8px}
.admin-search-panel form{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.admin-search-panel .form-group{margin-bottom:0;display:flex;align-items:center;gap:0.5rem}
#admin-master-map{width:100%;height:350px;margin-bottom:2rem;border-radius:12px;border:1px solid var(--border-color)}
.bulk-actions-panel{margin-bottom:1rem;padding:0.75rem;border-radius:8px;display:flex;gap:1rem;align-items:center}


/* --- Grouping by date --- */
.date-group {
max-width: 900px;
margin: 0 auto 1rem;
}

.date-group-title {
margin: 1rem 0 0.5rem;
font-size: 1.05rem;
font-weight: 900;
color: #333;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.35rem;
}


/* Admin date separators */
.date-separator td {
background: #f7f7f7;
font-weight: 900;
}


/* Admin day grouping */
.admin-date-group {
margin-top: 0.75rem;
margin-bottom: 1.25rem;
}

.admin-date-title {
margin: 0.75rem 0 0.5rem;
font-size: 1.05rem;
font-weight: 900;
border-left: 5px solid var(--primary-color);
padding-left: 0.6rem;
}

.admin-date-count {
font-weight: 800;
color: #666;
}