/* © 2025 John Sullivan. All Rights Reserved. Not for commercial use without license. */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Work+Sans:wght@300;500&display=swap');

/* ---- color vars (unchanged) ---- */
:root{
  --purple:#613F99;
  --green:#3EB349;
  --bg:#FFF2E3;
  --logoBg:#CFF6D8;
}

/* ---- base ---- */
body{
  background:var(--bg);
  color:var(--purple);
  font-family:'Lato',ui-sans-serif,system-ui;
}

h1,h2,h3,button{
  font-family:'Work Sans',sans-serif;
}

h1{
  background:var(--logoBg);
  color:var(--purple);
  border-radius:.5rem;
  padding:.25rem .6rem;
}

/* ---- green strip behind new logo ---- */
.logo-box{
  background:var(--logoBg);
  border-radius:.5rem;
  padding:.25rem .6rem;
}

/* logo responsiveness (width set in HTML with w-36) */
.logo-img{height:auto;}

/* ---- buttons ---- */
button{
  background:var(--purple);
  color:#fff;
  transition:filter .15s ease;
}
button:not(:disabled):hover{filter:brightness(1.1);}
button:disabled{opacity:.4;pointer-events:none;}

/* ---- autocomplete ---- */
.suggest-box{
  position:absolute;left:0;right:0;top:100%;z-index:40;
  background:#fff;border:1px solid #ddd;border-radius:.35rem;
  max-height:180px;overflow-y:auto;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  font-family:Arial,sans-serif;
}
.suggest-item{
  display:flex;align-items:center;gap:.45rem;
  padding:.25rem .45rem;font-size:1rem;line-height:1.1;
  cursor:pointer;
}
.suggest-item:hover{background:#f6f6f6;}
.suggest-item img{
  width:24px;height:36px;object-fit:cover;border-radius:.18rem;
}
/* === DARK MODE OVERRIDES (clean & complete) === */
.dark-mode {
  background-color: #000;
  color: #fff;
}

.dark-mode main {
  background-color: #1c1c1e;
  color: #fff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.04);
}

.dark-mode .logo-box {
  background: #613F99;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-mode .logo-img {
  content: url("filmgapdark3.png");
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode .text-purple-700 {
  color: #fff !important;
}

.dark-mode footer {
  color: #aaa;
}

.dark-mode a.bg-\[\#C6F1D4\] {
  background-color: #444 !important;
  color: #fff !important;
}

/* 🔲 Background image override */
.dark-mode.index-bg::before {
  background-image: url("darkmodebackground.png");
  background-size: cover;
  opacity: 0.2;
}

/* 🎯 Input field styles */
.dark-mode input[type="text"],
.dark-mode input.actorInput {
  background-color: #2e2e2e !important;
  color: #fff !important;
  border: 1px solid #666 !important;
}

.dark-mode input[type="text"]::placeholder,
.dark-mode input.actorInput::placeholder {
  color: #bbb;
  font-weight: 500;
}

.dark-mode input[type="text"]:disabled {
  background-color: #444;
  color: #bbb;
}

/* 🔎 Autocomplete dropdown */
.dark-mode .suggest-box {
  background-color: #1a1a1a !important;
  border: 1px solid #444;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.dark-mode .suggest-item {
  color: #fff;
  font-weight: 600;
}

.dark-mode .suggest-item:hover {
  background-color: #333;
}

/* 🎬 Movie picker modal */
.dark-mode .picker-modal {
  background-color: #1f1f1f !important;
  color: #fff !important;
  border-radius: 0.75rem;
}

.dark-mode .picker-modal div[class*="overflow-y-auto"],
.dark-mode .picker-modal div[class*="flex-1"] {
  background-color: #1f1f1f !important;
}

.dark-mode .picker-modal button {
  background-color: #6c47d9 !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 0.5rem;
}

/* 🧱 Movie box container */
.dark-mode .movie-box {
  background-color: #2e2e2e !important;
  color: #fff;
}

/* ✅ Feedback messaging */
.dark-mode .feedback {
  font-weight: 600;
  color: #f2f2f2;
}

.dark-mode .feedback.text-red-600 {
  color: #ff5e5e !important;
}

.dark-mode .feedback.text-green-700 {
  color: #3be88a !important;
}

.dark-mode .feedback.text-purple-800 {
  color: #a890ff !important;
}

.dark-mode .modal-box,
.dark-mode .modal-box div,
.dark-mode .modal-box h2,
.dark-mode .modal-box p {
  background-color: #333 !important;
  color: #fff !important;
}

.dark-mode .bg-white.p-4.rounded.shadow-lg {
  background-color: #111 !important;
  color: #fff !important;
}


.dark-mode .modal-stats-box {
  background-color: #333 !important;
  color: #fff !important;
}

.dark-mode .fixed > div[style*="background: rgb(255, 255, 255)"] {
  background-color: #000 !important;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .fixed > div {
  font-weight: 500 !important;
    color: #fff !important;
}


.dark-mode p.text-gray-700.uppercase {
  font-weight: 900 !important;
  color: #fff !important;
}

.dark-mode div.text-center.text-gray-600 {
  font-weight: 400 !important;
  color: #fff !important;
}

/* Ideal Path line */
.dark-mode div[style*="font-style:italic"][style*="color:#555"] {
  font-weight: 600 !important;
  color: #fff !important;
}