/*
 * Kruger Park Sightings – Upmarket Theme
 *
 * This stylesheet defines a dark, high‑contrast interface for the Kruger Park
 * wildlife sighting application.  Colours are chosen to evoke the natural
 * palette of the African bush while maintaining good readability and
 * accessibility.  Layout uses modern CSS features such as flexbox and
 * position utilities to create a responsive, polished experience.
 */

/* CSS variables for easy theming */
:root {
  --bg-color: #0f1116;          /* primary background (near black) */
  --surface-color: #1a1c22;     /* card/modal surfaces */
  --accent-color: #3fa15b;      /* primary accent (lush green) */
  --accent-hover: #53c174;      /* accent hover state */
  --secondary-color: #e5a50a;   /* secondary accent (safari amber) */
  --text-color: #eaecef;        /* high contrast text */
  --muted-text: #9ca3af;        /* muted/placeholder text */
  --header-height: 60px;        /* fixed header height */
  --border-radius: 8px;         /* consistent rounding */
  --transition-duration: 0.25s; /* default transition */
}

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

body {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.5;
  height: 100vh;
  overflow: hidden; /* prevent body scroll when overlay is open */
}

/* Header styling */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: var(--surface-color);
  display: flex;
  align-items: center;
  padding-left: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  z-index: 1000;
}

.app-header .logo {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent-color);
}

/* Map container fills remaining viewport below header */
#map {
  position: absolute;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

/* Floating action button (FAB) */
.fab {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: var(--accent-color);
  color: var(--surface-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: background-color var(--transition-duration), transform var(--transition-duration);
  z-index: 500;
}

.fab:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
}

.fab:focus {
  outline: none;
}

/* Overlay covers entire viewport when visible */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity var(--transition-duration) ease;
}

.overlay.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Modal dialog for adding a sighting */
.modal {
  background-color: var(--surface-color);
  color: var(--text-color);
  padding: 24px;
  width: 90%;
  max-width: 480px;
  border-radius: var(--border-radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  max-height: 90vh;
  overflow-y: auto;
}

.modal h2 {
  margin-bottom: 16px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent-color);
}

/* Form elements */
form label {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

form label input,
form label textarea {
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #333;
  border-radius: var(--border-radius);
  background-color: #2a2d37;
  color: var(--text-color);
  font-size: 0.9rem;
}

form label input::placeholder,
form label textarea::placeholder {
  color: var(--muted-text);
}

form label input[readonly] {
  background-color: #25272f;
  color: #888;
  cursor: not-allowed;
}

/* File inputs */
form input[type="file"] {
  background-color: transparent;
  border: none;
  color: var(--text-color);
  font-size: 0.9rem;
}

/* Modal actions: cancel and submit buttons */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.btn {
  padding: 8px 16px;
  font-size: 0.9rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition-duration), transform var(--transition-duration);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.cancel {
  background-color: transparent;
  color: var(--muted-text);
}

.btn.cancel:hover {
  color: var(--secondary-color);
  transform: translateY(-1px);
}

.btn.submit {
  background-color: var(--accent-color);
  color: var(--surface-color);
  font-weight: 600;
}

.btn.submit:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

.btn.submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrollbar styling for modal */
.modal::-webkit-scrollbar {
  width: 8px;
}

.modal::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 4px;
}

.modal::-webkit-scrollbar-track {
  background-color: #2a2d37;
}