@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

/* ===== Font ===== */
.v-application { font-family: 'Quicksand', sans-serif !important; }
#title {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 2.4rem !important;
  letter-spacing: -0.5px;
}

/* ===== Logo: big, transparent, no box ===== */
.v-btn:has(img[src="/logo.png"]) {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.v-btn:has(img[src="/logo.png"])::before { display: none !important; }
.v-btn:has(img[src="/logo.png"]) img {
  height: 140px !important;
  width: auto !important;
}
.theme--dark.v-application img[src="/logo.png"] {
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
}

/* ===== Banner: flat colour, no photo ===== */
nav {
  background-image: none !important;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
  padding-bottom: 12px;
}
.theme--light.v-application nav { background-color: #e9ecef !important; }
.theme--dark.v-application nav  { background-color: #2b2d31 !important; }

/* ===== Page + footer background ===== */
.theme--light.v-application { background: #f4f6f8 !important; }
.theme--dark.v-application  { background: #1c1d20 !important; }
.theme--light.v-application .v-footer { background: #f4f6f8 !important; }
.theme--dark.v-application .v-footer  { background: #1c1d20 !important; }

/* ===== Tighter header so the page fits without scrolling ===== */
nav #navbar { margin-top: 4px !important; }
@media (min-width: 1100px) {
  nav h1 { margin-top: -70px !important; }
}

/* ===== Dark theme: readable text ===== */
.theme--dark.v-application a,
.theme--dark.v-application .primary--text,
.theme--dark.v-application .v-btn,
.theme--dark.v-application .v-card,
.theme--dark.v-application .v-card a {
  color: #e8eaed !important;
}
.theme--dark.v-application .v-btn--outlined {
  border-color: rgba(232, 234, 237, 0.5) !important;
}
.theme--dark.v-application #navsearch .v-input__slot {
  background: #33353a !important;
}

/* ===== Light theme fixes ===== */
.theme--light.v-application #navsearch .v-input__slot {
  background: #ffffff !important;
}
.theme--light.v-application #navsearch fieldset {
  border-color: rgba(42, 155, 199, 0.45) !important;
}
.theme--light.v-application .v-btn--outlined {
  background: #ffffff !important;
  border-color: rgba(42, 155, 199, 0.6) !important;
  color: #1f6f8f !important;
}
.theme--light.v-application nav .v-icon,
.theme--light.v-application nav .v-btn { color: #2e3a44 !important; }
.theme--light.v-application #title { color: #16303f !important; }
.theme--light.v-application .v-card {
  background: #ffffff !important;
  box-shadow: 0 6px 24px rgba(20, 40, 60, 0.12) !important;
}

/* ===== Modern touches ===== */
.v-card {
  border: none !important;
  border-radius: 18px !important;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.theme--dark.v-application .v-card {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
}
.v-card:hover { transform: translateY(-3px); }
#navsearch .v-input__slot,
#navsearch fieldset { border-radius: 999px !important; }
.v-btn--outlined { border-radius: 999px !important; }
.v-chip { border-radius: 999px !important; }

/* ===== "Add event" filled accent pill, "Share" outline pill ===== */
#navbar a[href="/add"] {
  background: #2a9bc7 !important;
  opacity: 1 !important;
  border-radius: 999px !important;
  height: 44px !important;
  min-width: 0 !important;
  padding: 0 22px !important;
  align-self: center;
  margin-right: 12px;
  flex-direction: row !important;
  gap: 8px;
}
#navbar a[href="/add"],
#navbar a[href="/add"] .v-icon,
#navbar a[href="/add"] span { color: #ffffff !important; }
#navbar a[href="/export"] {
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 999px !important;
  height: 44px !important;
  padding: 0 22px !important;
  align-self: center;
  flex-direction: row !important;
  gap: 8px;
}