/*──────────────────────────────────────────────────────────────────────────*/
/* Korvidae Webapp Theme                                                */
/*──────────────────────────────────────────────────────────────────────────*/
:root {
  /* Base colors */
  --bg-dark:          #0d0d0f; /* almost black */
  --text-light:       #e5e7eb; /* off-white */
  --border-muted:     #374151; /* dark grey */

  /* Accent colors */
  --accent-primary:   #2563eb; /* blue-600 */
  --accent-primary-hover:#3b82f6; /* blue-500 */

  --accent-secondary: #7c3aed; /* purple-600 */
  --accent-secondary-hover:#9333ea; /* purple-500 */

  --accent-event:     #ca8a04; /* yellow-600 */
  --accent-event-hover:#d97706; /* yellow-500 */

  --accent-zone:      #dc2626; /* red-600 */
  --accent-zone-hover:#ef4444; /* red-500 */

  --accent-toggle:    #374151; /* gray-700 */
  --accent-toggle-hover:#4b5563; /* gray-600 */
}

/*──────────────────────────────────────────────────────────────────────────*/
/* Global Reset & Layout                                                  */
/*──────────────────────────────────────────────────────────────────────────*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

/*──────────────────────────────────────────────────────────────────────────*/
/* Header, Sidebar, Panels, Logs                                           */
/*──────────────────────────────────────────────────────────────────────────*/
.header {
  background-color: var(--bg-dark);
  border-bottom: 1px solid var(--border-muted);
}
.sidebar {
  background-color: var(--bg-dark);
  border-right: 1px solid var(--border-muted);
}
.panel {
  background-color: #1f2937; /* Tailwind gray-800 */
  padding: 1rem;
  border-radius: 0.375rem;
}
.log {
  background-color: var(--bg-dark);
  border: 1px solid var(--border-muted);
  padding: 0.75rem;
  border-radius: 0.375rem;
  color: #9ca3af; /* Tailwind gray-400 */
}

.sidebar {
  max-height: 100vh;
  overflow-y: auto;
}

#sidebar {
  /* make sure it can scroll vertically */
  overflow-y: auto;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-dark);
}

/* WebKit browsers */
#sidebar::-webkit-scrollbar {
  width: 8px;
}
#sidebar::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
#sidebar::-webkit-scrollbar-thumb {
  background-color: var(--accent-primary);
  border-radius: 4px;
  border: 2px solid var(--bg-dark);
}

/* Mobile sidebar collapse animation */
@media (max-width: 767px) {
  #sidebar {
    max-height: 100vh;
    overflow: hidden;
    transition: max-height 300ms ease;
  }
  /* ensure the same collapse animation works on mobile */
  #sidebar.collapsed {
    max-height: 0;
    display: block; /* override any Tailwind “w-full” fallback if needed */
  }
}

#history-log {
  /* ensure it can scroll vertically */
  overflow-y: auto;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-dark);
}

/* WebKit browsers */
#history-log::-webkit-scrollbar {
  width: 8px;
}
#history-log::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
#history-log::-webkit-scrollbar-thumb {
  background-color: var(--accent-primary);
  border-radius: 4px;
  border: 2px solid var(--bg-dark);
}


/*──────────────────────────────────────────────────────────────────────────*/
/* Buttons                                                                */
/*──────────────────────────────────────────────────────────────────────────*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  color: #fff;
  transition: background-color 0.2s ease;
}
.btn-primary {
  background-color: var(--accent-primary);
}
.btn-primary:hover {
  background-color: var(--accent-primary-hover);
}
.btn-secondary {
  background-color: var(--accent-secondary);
}
.btn-secondary:hover {
  background-color: var(--accent-secondary-hover);
}
.btn-event {
  background-color: var(--accent-event);
}
.btn-event:hover {
  background-color: var(--accent-event-hover);
}
.btn-zone {
  background-color: var(--accent-zone);
}
.btn-zone:hover {
  background-color: var(--accent-zone-hover);
}
.btn-toggle {
  background-color: var(--accent-toggle);
}
.btn-toggle:hover {
  background-color: var(--accent-toggle-hover);
}

/*──────────────────────────────────────────────────────────────────────────*/
/* Cookie Banner                                                           */
/*──────────────────────────────────────────────────────────────────────────*/
#cookie-banner {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#cookie-banner.show {
  opacity: 1;
  transform: translateY(0);
}


/*──────────────────────────────────────────────────────────────────────────*/
/* Mailchimp                                                           */
/*──────────────────────────────────────────────────────────────────────────*/


#mc_embed_signup {
  background:--bg-dark; 
  padding: 1rem; 
  border-radius: 0.375rem; 
  false;clear:left;
  width: px;
}