body {
    margin: auto;
    padding: 50px;
    color: #fff;
    background: #181818;
    font-family: 'Lato', sans-serif;
}

/* Box (for corners & padding) */
.box {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    background-color: #222831;
}

/* Main grid and sections */
.wrapper {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "banner" 
        "nav"
        "main"
        "footer";
    grid-gap: 4px;
}

.banner, .footer {
    background-color: #ddd;  /* light grey */
    border: solid 1px #bbb;
}

.nav {
    grid-area: nav;
    background-color: #222831;
    font-size: 150%;
    padding: 20px;
    vertical-align: middle;
    border: solid 1px #E50914;
    color: #fff;
}

.main {
    grid-area: main;
    background-color: #181818;
    border: solid 1px #E50914;
    color: #fff;
}

/* Navigation area grid */
.linkwrapper {
    display: grid;
    grid-template-columns: 3fr 2fr 1fr;
    grid-template-areas: 
        "commonsearches topsearch topadmin";
    grid-gap: 4px;
}

.commonsearches {
    grid-area: commonsearches;
    text-align: center;
}

.topsearch {
    grid-area: topsearch;
    text-align: right;
}

.topadmin {
    grid-area: topadmin;
    text-align: center;
}

/* Links Styling */
a.topnav {font-weight: bold;}
a.topnav:link, a.topnav:visited {color: #007c72;} /* dark teal */
a.topnav:hover {color: #707a00; text-decoration: none;} 


a {font-weight: bold;}
a:link {color: #007c72;} /* dark teal */
a:visited {color: #222;} /* dark grey */
a:hover {color: #707a00;} /* dark green */

/* Ensure all text is visible on dark backgrounds */
body, .main, .nav, .box, .admin-form, .results, .important, .light_blue {
    color: #fff;
}

/* Headings */
h1, h2, h3, h4 {
    font-family: 'Ubuntu', sans-serif;
    color: #FFD700;
}

/* Footer fix: dark background, gold text */
.footer {
    background-color: #222831 !important;
    border: solid 1px #E50914;
    color: #FFD700 !important;
    text-align: center;
    padding: 20px;
}

/* Banner fix: dark background, gold text */
.banner {
    background-color: #222831 !important;
    border: solid 1px #E50914;
    color: #FFD700 !important;
    text-align: center;
    padding: 20px;
}

/* Links: always visible on dark backgrounds */
a, a:link, a:visited {
    color: #FFD700;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover, a.topnav:hover {
    color: #E50914;
    text-decoration: underline;
}

/* Topnav links */
a.topnav:link, a.topnav:visited {
    color: #FFD700;
}
a.topnav:hover {
    color: #E50914;
    text-decoration: underline;
}

/* Results and tags */
.results {
    background-color: #222831;
    border: 1px solid #FFD700;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
    color: #fff;
}

.tag {
    background: #FFD700;
    color: #222831 !important;
    border: solid 1px #E50914;
    border-radius: 5px;
    padding: 5px 10px;
    margin-right: 6px;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.2s, background 0.2s;
}

/* Genre tag: yellow background, red text, red border */
.genre-tag {
    background: #FFD700;
    color: #E50914 !important; /* red text */
    border: solid 1px #E50914;
    border-radius: 5px;
    padding: 5px 10px;
    margin-right: 6px;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.2s, background 0.2s;
}

/* If the genre is a link, force the link color too */
.genre-tag a,
.genre-tag a:link,
.genre-tag a:visited {
    color: #E50914 !important;
    text-decoration: none;
}

.genre-tag:hover,
.genre-tag:hover a {
    color: #222831 !important; /* dark text on hover */
}

.subject-tag {
    background-color: #E50914;
    color: #fff;
}

.white-tag {
    background-color: #fff;
    color: #222831;
}

.no-results {
    padding: 10px;
    background-color: #E50914;
    border: solid 1px #FFD700;
    color: #fff;
}

.error {
    color: #FFD700;
    background: #E50914;
    padding: 5px;
    border-radius: 3px;
}

/* ### Form / Search  Styling #### */

form {
    width: 100%;
}

.search, .quicksearch {
    background: #222831;
    color: #fff;
    width: 200px;
    font-size: 14px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #E50914;
    box-sizing: border-box;
    margin-right: 8px;
}

.quick-choose {
    font-size: 14px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #E50914;
    background: #222831;
    color: #fff;
    margin-right: 8px;
    width: 120px;
}

.submit::-moz-focus-inner { 
    border: 0;
}


.submit {
    font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    position: relative;
    width: 45px;
    font-size: 14px;
    left: -5px;
    background-color: #636263; 
    color: #d6d3d7;
    border: 1px solid #000;
    border-radius: 0 5px 5px 0;   
    display: inline-block;
    padding: 10px;
}

input[type="submit"], .form-submit, button {
    background: #E50914;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
input[type="submit"]:hover, .form-submit:hover, button:hover {
    background: #FFD700;
    color: #fff;
}

/* Delete/Cancel buttons: white background, red text */
input[type="submit"].delete-confirm,
button.delete-confirm {
    background: #fff;
    color: #E50914 !important; /* red text for visibility */
    border: 2px solid #E50914;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
input[type="submit"].delete-confirm:hover,
button.delete-confirm:hover {
    background: #E50914;
    color: #fff !important;
    border: 2px solid #FFD700;
}

.admin-form {
    max-width: 600px;
    margin: auto;
    background: #222831;
    border: 1px solid #E50914;
    border-radius: 8px;
    padding: 24px;
    color: #fff;
}

/* Admin form: make all inputs and textareas match size */
.admin-form input,
.admin-form textarea,
.admin-form select {
    width: 95%;
    min-height: 40px;
    font-size: 15px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #E50914;
    background: #222831;
    color: #fff;
    margin-bottom: 12px;
    box-sizing: border-box;
}

/* Admin form textareas: original size */
.admin-form textarea {
    width: 95%;
    min-height: 60px;
    font-size: 15px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #E50914;
    background: #222831;
    color: #fff;
    margin-bottom: 12px;
    box-sizing: border-box;
}

/* Tools icons */
.tools {
    text-align: right;
    padding-right: 20px;
}
.tools i {
    color: #E50914;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.2s;
}
.tools i:hover {
    color: #FFD700;
}

/* Delete buttons: more visible */
.tools a[href*="delete"] i,
.tools a[href*="deletemovie"] i,
.tools a[href*="deleteconfirm"] i {
    background: #FFD700;
    color: #E50914 !important;
    border-radius: 50%;
    padding: 6px;
    font-size: 22px;
    border: 2px solid #E50914;
    transition: background 0.2s, color 0.2s;
}
.tools a[href*="delete"]:hover i,
.tools a[href*="deletemovie"]:hover i,
.tools a[href*="deleteconfirm"]:hover i {
    background: #E50914;
    color: #FFD700 !important;
    border: 2px solid #FFD700;
}

/* Important and info boxes */
.important {
    background-color: #E50914;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
}

.light_blue {
    background-color: #222831;
    color: #FFD700;
    padding: 10px;
    border-radius: 4px;
}

/* Make all input, textarea, and select text white */
input,
textarea,
select {
    color: #fff !important;
}

/* Specifically for search bar and quicksearch */
.search,
.quicksearch {
    color: #fff !important;
    background: #222831;
}

/* Admin form inputs and textareas */
.admin-form input,
.admin-form textarea,
.admin-form select {
    color: #fff !important;
    background: #222831;
}

/* Rules for navigation on small screen */
@media only screen and (max-width: 1175px )  {
    .linkwrapper{
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas:
        "commonsearches topadmin"
        "topsearch topsearch"
    }
    .commonsearches {
        text-align: left;
    }
    .topsearch{
        width: 100%;
        text-align: left;
    }
    .topadmin {
        text-align: right;
    }
}

/* Center the delete/cancel buttons in the confirmation form */
.delete-confirm-buttons {
    display: flex;
    justify-content: flex-start; /* align left */
    gap: 20px;
    margin-bottom: 20px; /* increased bottom margin to shift buttons up */
}

/* Make placeholder text white in all browsers */
input::placeholder,
textarea::placeholder {
    color: #fff !important;
    opacity: 1;
}

/* For Microsoft Edge */
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #fff !important;
}

/* For Internet Explorer 10-11 */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #fff !important;
}

.autocomplete-items {
    color: #222831 !important; /* dark text */
    background: #FFD700;
}

.autocomplete-items div {
    color: #222831 !important; /* dark text for each suggestion */
}