body {
  margin: 0;
  min-height: 100vh;
  background: 
    url('background.png') top center no-repeat,
    #faeed7 !important; /* fallback solid background color */
  background-size: auto; /* prevent stretching */
  background-attachment: scroll; /* stays at top, not parallax */
  background-repeat: no-repeat;
  background-color: #faeed7 !important;
  font-family: 'Fredoka', sans-serif !important;
}

/* Navbar */
#navbar {
  background-color: #f1e4cc;
}

#site_title {
  color: #686868;
  margin-right: 10px;
  margin-left: 10px;
}

#navbar a{
  color: #686868;
}

#navlink_active {
  background-color: #e6d8be;
}

ul#navbar a:not(#site_title):hover {
  background-color: #e6d8be;
}

/* Secondary Navbar */
#secondary_navbar {
  background-color: #ebe1ce;
}

#secondary_navbar a{
  color: #686868;
}

ul#secondary_navbar a:hover {
  background-color: #e6d8be;
}

.secondary-navbar-active {
  background-color: #e6d8be !important;
}

/* Movies Table */

#movies_table {
  table-layout: fixed;
}
#movies_table th:nth-child(1), #form_row td:nth-child(1) { width: 23%; }
#movies_table th:nth-child(2), #form_row td:nth-child(2) { width: 10%; }
#movies_table th:nth-child(3), #form_row td:nth-child(3) { width: 10%; }
#movies_table th:nth-child(4), #form_row td:nth-child(4) { width: 5%; }
#movies_table th:nth-child(5), #form_row td:nth-child(5) { width: 9%; }
#movies_table th:nth-child(6), #form_row td:nth-child(6) { width: 16%; }
#movies_table th:nth-child(7), #form_row td:nth-child(7) { width: 16%; }
#movies_table th:nth-child(8), #form_row td:nth-child(8) { width: 11%; }

#movies_body {
  transform-origin: top;
  transition: transform .3s ease, opacity 1s ease;
}
#movies_body.collapsed { transform: scaleY(0); opacity: 0; }
#movies_body.expanded  { transform: scaleY(1); opacity: 1; }

/* Show buttons only on row hover */
/*
tr .actions { opacity: 0; }
tr:hover .actions { opacity: 1; }
*/

#add_title {
  width: 80%;
  float: left;
}

#add_lookup_btn {
  margin-left: 5px;
  margin-top: 2px;
}

/* Suggestion dropdown */
#suggest_box {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  position: absolute;
  width: 320px;
  z-index: 2000;
}
#suggest_box.hidden { display: none; }

#suggest_box li {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
  padding: 6px;
  transition: background .15s;
}
#suggest_box li:hover { background: #f0f0f0; }

#suggest_box img  { height: 44px; width: 30px; object-fit: cover; }
#suggest_box .title { font-weight: 600; }
#suggest_box .year  { color: #666; font-size: .9em; margin-left: 4px; }


/* =================================================================== */
/*  RESPONSIVE                                                         */
/* =================================================================== */