/*─────────────────────────────────────────*/
/* ReduxCrew: Dark/Light Theme & Layout   */
/*─────────────────────────────────────────*/
/* Add these inside your :root and [data-theme="light"] blocks */

:root {
  /* …existing dark vars… */
  --accent:    var(--link);       /* use your link color as the accent */
  --bg-secondary: var(--card-border); /* a slightly darker bg for pagelinks */
}

[data-theme="light"] {
  /* …existing light overrides… */
  --accent:    #007bff;           /* bootstrap‐blue for lightmode */
  --bg-secondary: #e9ecef;        /* light grey for pagelink bg in lightmode */
}
/* 1) Theme variables */
/* Dark mode (default) */
:root {
  --bg:            #111;
  --text:          #f1f1f1;
  --header:        #222;
  --link:          #e00;
  --card-bg:       #1a1a1a;
  --card-border:   #333;
  --btn-bg:        #c00;
  --btn-hover:     #a00;
  --btn-text:      #fff;
  --radius:        6px;
  --gap:           1rem;
  --pad:           1rem;
  --font:          sans-serif;
}

/* Light mode override */
[data-theme="light"] {
  --bg:            #fff;
  --text:          #111;
  --header:        #f0f0f0;
  --link:          #0066cc;
  --card-bg:       #fafafa;
  --card-border:   #ccc;
  --btn-bg:        #0066cc;
  --btn-hover:     #0055aa;
  --btn-text:      #fff;
}

/*─────────────────────────────────────────*/
/* 2) Global Resets                        */
/*─────────────────────────────────────────*/
* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: var(--font);
  background:   var(--bg);
  color:        var(--text);
  line-height: 1.5;
}
a {
  color:        var(--link);
  text-decoration: none;
}

/*─────────────────────────────────────────*/
/* 3) Header & Navigation                  */
/*─────────────────────────────────────────*/
header, footer {
  background:   var(--header);
  text-align:   center;
  padding:      var(--pad);
}
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  color: red;
  font-size: 1.5rem;
  text-decoration: none;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger-line {
  width: 24px; height: 3px;
  background: var(--text);
}

/* Nav Links */
.nav {
  display: flex;
  gap: var(--gap);
}
.nav-link {
  display: inline-block;
  padding: 0.5em 1em;
  color: var(--text);
}
.nav-link:hover {
  background: var(--card-border);
  border-radius: var(--radius);
}

/* Mobile menu */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav {
    position: absolute;
    top: 64px; left: 0;
    width: 100%;
    flex-direction: column;
    background: var(--header);
    display: none;
    padding: var(--pad) 0;
  }
  .nav.active { display: flex; }
}

/*─────────────────────────────────────────*/
/* 4) Theme‐Toggle Link                    */
/*─────────────────────────────────────────*/
#theme-toggle {
  display: inline-block;                /* show text */
  padding: 0.5em 1em;
  color: var(--text) !important;
  background: none !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
}
#theme-toggle:hover {
  background: var(--card-border);
  border-radius: var(--radius);
}

/*─────────────────────────────────────────*/
/* 5) Container & Footer                   */
/*─────────────────────────────────────────*/
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--gap);
}
footer p {
  margin: 0;
}

/*─────────────────────────────────────────*/
/* 6) Event Cards                          */
/*─────────────────────────────────────────*/
.calendar-event {
  display: flex;
  gap: var(--gap);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: var(--gap);
}
@media (max-width: 600px) {
  .calendar-event { flex-direction: column; }
}

.calendar-date {
  flex: 0 0 60px;
  text-align: center;
  border-right: 1px solid var(--card-border);
  padding-right: var(--gap);
}
@media (max-width: 600px) {
  .calendar-date {
    border-right: none;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: var(--gap);
    margin-bottom: var(--gap);
  }
}
.calendar-date .day   { color: #aaa; font-size: 0.9rem; }
.calendar-date .date  { color: #f44; font-size: 1.8rem; }
.calendar-date .month { color: var(--link); font-size: 0.8rem; }

.calendar-details {
  flex: 1;
}
.event-title {
  font-size: 1.2rem;
  color: var(--link);
  margin-bottom: 0.5rem;
}
.event-meta {
  font-size: 0.9rem;
  color: #bbb;
  margin-bottom: 0.8rem;
}
.description {
  margin-bottom: 1rem;
}

.calendar-image {
  flex: 0 0 220px;
  max-width: 220px;
}
@media (max-width: 600px) {
  .calendar-image { max-width: 100%; margin-top: var(--gap); }
}
.calendar-image img {
  width: 100%;
  border-radius: var(--radius);
}

/*─────────────────────────────────────────*/
/* 7) RSVP Button                          */
/*─────────────────────────────────────────*/
.rsvp-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--gap);
}
.rsvp-block .btn {
  background: var(--btn-text);
  color: var(--btn-bg);
  border: 1px solid #666;
  padding: 0.4em 0.8em;
  border-radius: var(--radius);
  cursor: pointer;
}
.rsvp-block .btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.welcome-container p.spacer {
  margin-bottom: 1.5rem;  /* or any size you like */
}
/*─────────────────────────────────────────*/
/* 8) Rating Stars                         */
/*─────────────────────────────────────────*/
.rating-block {
  display: flex;
  gap: var(--gap);
  margin: var(--gap) 0;
}
.rating-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.star-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #666;
}
.star-btn.filled {
  color: #f5c518;
}
.star-btn:hover,
.star-btn:focus {
  color: #fa0;
}
.avg {
  font-size: 0.9rem;
  color: #ccc;
}

/*─────────────────────────────────────────*/
/* 9) Forms & Inputs                       */
/*─────────────────────────────────────────*/
.event-form,
.form-container {
  max-width: 600px;
  margin: 0 auto 2rem;
  background: var(--card-bg);
  padding: 2rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3rem;
  color: var(--link);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.6em;
  background: var(--header);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  color: var(--text);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 5px var(--link);
}
.submit-btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  padding: 0.8em 1.5em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s ease;
}
.submit-btn:hover {
  background: var(--btn-hover);
}

/*─────────────────────────────────────────*/
/* 10) Misc                                */
/*─────────────────────────────────────────*/
.read-more {
  color: var(--link);
  cursor: pointer;
  font-size: 0.9rem;
}
.read-more:hover {
  text-decoration: underline;
}
/*─────────────────────────────────────────*/
/* 10) Pagination                         */
/*─────────────────────────────────────────*/
.pagination {
  text-align: center;
  margin: 2em 0;
}

.pagination a {
  display: inline-block;
  margin: 0 .25em;
  padding: .5em .75em;
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.pagination a:hover,
.pagination a:focus {
  background: var(--accent);
  color: var(--btn-text);
}

.pagination a.current {
  background: var(--accent);
  color: var(--btn-text);
  font-weight: bold;
}
.day-separator {
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  font-weight: bold;
  color: var(--link);
  border-bottom: 1px solid var(--card-border);
}
/* 1) Ensure header sits above everything */
.header {
  position: relative;
  z-index: 1100;
}

/* 2) Mobile navigation as a sliding overlay */
@media (max-width: 768px) {
  .nav {
    position: fixed;      /* take out of flow */
    top:    0;            /* just under the header */
    left:   0;
    width:  100%;
    height: calc(100vh - var(--header-height)); /* fill screen below header */
    background: var(--header);
    transform: translateY(-100%); /* hidden by default */
    transition: transform 0.3s ease;
    overflow-y: auto;
    z-index: 1000;        /* above content, below header */
  }
  /* slide down when active */
  .nav.active {
    transform: translateY(0);
  }
}
.events-page {
  display: flex;
}
.events-sidebar {
  width: 320px;
  overflow-y: auto;
}
.events-map {
  flex: 1;
  position: relative;
}
#map {
  width: 100%;
  /* height will be set by JS */
}
/* Bottom tour list container */
.tour-list-container {
    margin-top: 2rem;
    padding: 1rem;
    background-color: #111;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Each tour item */
.tour-entry {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
}

/* Buttons on one line */
.tour-actions {
    margin-top: 6px;
}

.tour-actions a {
    margin-right: 8px;
}

/* Share link input */
.share-input {
    margin-top: 6px;
    width: 100%;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #444;
    background-color: #222;
    color: #eee;
    font-size: 0.9rem;
}
/* Make tour section text more readable */
.tour-entry {
    font-size: 1rem;
    color: #e0e0e0;
}

.tour-entry strong {
    font-size: 1.05rem;
}

.tour-actions a {
    font-size: 0.95rem;
}

.share-input {
    font-size: 0.95rem;
}
/* Global button styles */
.btn {
  /* use your theme’s background var for the bg… */
  background: var(--btn-bg);
  /* …and your theme’s text var for the label */
  color: var(--btn-text);

  border: 1px solid #666;
  padding: 0.4em 0.8em;
  border-radius: var(--radius);
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Optional hover state */
.btn:hover {
  /* maybe use your accent color on hover */
  background: var(--accent);
  color: var(--bg);
}
/* ───────────────────────────────────────── */
/* Dashboard tour-list card & share-link tweaks */
/* ───────────────────────────────────────── */
.tour-list-container {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1.5rem;
}

.tour-entry {
  border-bottom: 1px solid var(--card-border);
  padding: 1rem 0;
}

.tour-entry:last-child {
  border-bottom: none;
}

.tour-actions .btn {
  margin-right: 0.5rem;
}

.share-box {
  margin-top: 0.75rem;
}

.share-box label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.share-input {
  width: 100%;
  font-size: 1rem;
  padding: 0.5em;
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
/* Dashboard: enforce theme text on cards in light & dark modes */
.form-container,
.tour-list-container {
  /* card backgrounds already set; enforce text color */
  color: var(--text);
}

/* Make sure labels & headings inside cards pick up theme text */
.form-container h3,
.form-container label,
.tour-list-container h3,
.tour-list-container label,
.tour-entry strong {
  color: var(--text);
}

/* Share‐link label & input text */
.share-box label {
  color: var(--text);
}
.share-input {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--card-border);
}

/* Links/buttons inside tour‐cards (Open/Edit/Delete) */
.tour-actions .btn,
.dashboard-actions .btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--card-border);
}

/* Dark/light toggle will now apply correctly */
/* ───────────────────────────────────────── */
/* Share‐link input: ensure readable text */
/* ───────────────────────────────────────── */
.share-input {
  /* background already set; force the right text color */
  color: var(--text) !important;
}

/* Placeholder color for the link URL */
.share-input::placeholder {
  color: var(--card-border);
}

/* On focus, maintain high contrast */
.share-input:focus {
  outline-color: var(--accent);
}
/* ───────────────────────────────────────── */
/* User Management: card each user entry */
/* ───────────────────────────────────────── */
.user-management-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.user-entry {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1rem;
}

.user-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.user-entry .username {
  font-size: 1.1rem;
}

.user-meta span {
  margin-right: 1rem;
  font-size: 0.9rem;
}

.user-actions .btn {
  margin-left: 0.5rem;
}

.inline-form {
  display: inline-block;
  margin-left: 0.5rem;
}
/* ───────────────────────────────────────── */
/* Dashboard: hide cards while editing mode */
/* ───────────────────────────────────────── */

body.editing-mode .form-container,
body.editing-mode .dashboard-actions,
body.editing-mode #dashboardContainer > .form-container {
  display: none !important;
}

/* Keep the editing banner and iframe visible */
body.editing-mode #editingBanner,
body.editing-mode #builderFrame {
  display: block !important;
}
body.editing-mode #editingBanner {
  position: fixed;
  top: 8rem;        /* push it below your global header (~3–4rem) */
  left: 1rem;
  z-index: 10001;   /* higher than the iframe’s 1000 */
}
/* Hide the builder iframe by default */
#builderFrame {
  display: none !important;
}

/* Only show it in editing-mode */
body.editing-mode #builderFrame {
  display: block !important;
}