/* For the styling of the app, I asked for suggestions from Claude based on the aesthetic I was going for */
/* Claude taught me how to override Bootstraps default configurations */
/* It was an iterative process, with me trying things, seeing how they look like and the elements impacted and then making adjustments */

body {

    background-color: #0d0d1a;
    font-family: 'Share Tech Mono', monospace;
    color: #00f0ff99;
}

nav {
    background-color: #0d0d1a !important;  /* Still using Bootstrap but overriding some elements with !important */
    border-bottom: 1px solid #00f0ff44 !important;
}

.navbar-brand {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.5rem;
    text-shadow: 0 0 8px #00f0ff, 0 0 20px #00f0ff88; /* Adding glowing effect to the font */
}

.nav-link {
    color: #00f0ff99 !important;
}

.nav-link:hover {
    color: #00f0ff !important;
}

.btn-primary {
    background-color: transparent;
    border: 1px solid #00f0ff;
    color: #00f0ff;
    font-family: 'Share Tech Mono', monospace;
}

/* hover effect */
.btn-primary:hover {
    background-color: #00f0ff22;
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 10px #00f0ff66;
}

/* also overriding Bootstrap below to get rid of the white backgrounds for text areas */
input, textarea, select {
    background-color: #0d0d1a !important;
    border: 1px solid #00f0ff44 !important;
    color: #00f0ff99 !important;
    font-family: 'Share Tech Mono', monospace !important;
}

input:focus, textarea:focus, select:focus {
    background-color: #0d0d1a !important;
    border-color: #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 0 0 8px #00f0ff44 !important;
    outline: none !important;
}

/* overriding Bootstrap's white tables */
.table {
    color: #00f0ff99 !important;
}

.table thead th {
    color: #00f0ff !important;
    border-bottom: 1px solid #00f0ff44 !important;
}

.table td, .table th {
    border-color: #00f0ff22 !important;
}

.table tbody tr:hover {
    background-color: #00f0ff11 !important;
    color: #00f0ff !important;
}

/* getting the headings to pop with cyan */
h1, h2, h3 {
    color: #00f0ff;
    text-shadow: 0 0 8px #00f0ff88;
    font-family: 'Share Tech Mono', monospace;
}

/* overriding Boostrap again to change grey border into a cyan border */
#conversation {
    background-color: #05050f;
    border: 1px solid #00f0ff44 !important;
    border-radius: 4px;
}

/* add glowing effect to the logo in the navbar */
.navbar-brand span:first-child {
    text-shadow: 0 0 8px #00f0ff, 0 0 20px #00f0ff88;
}

.navbar-brand span:last-child {
    text-shadow: 0 0 8px #ff003c, 0 0 20px #ff003c88;
}

/* scanline effect in the background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        #00f0ff05 2px,
        #00f0ff05 4px
    );
    pointer-events: none;
    z-index: 0;
}

main {
    position: relative;
    z-index: 1;
}

/* styling the links */
a {
    color: #00f0ff99;
    text-decoration: none;
}

a:hover {
    color: #00f0ff;
    text-shadow: 0 0 6px #00f0ff88;
}

/* changing placeholder text color */
::placeholder {
    color: #00f0ff44 !important;
}

/* scrollbar stylling */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: #0d0d1a;
}
::-webkit-scrollbar-thumb {
    background: #00f0ff44;
}

::selection {
    background: #00f0ff33;
    color: #00f0ff;
}

.navbar {
    background-color: #0d0d1a !important;
    border-bottom: 1px solid #00f0ff44 !important;
}

.navbar-toggler {
    border-color: #00f0ff44 !important;
}

.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: #00f0ff99 !important;
}

h1 {
    margin-top: 2rem;
}

/* styling of disabled buttons */
.btn-primary:disabled {
    background-color: transparent;
    border: 1px solid #00f0ff22;
    color: #00f0ff33;
    box-shadow: none;
}

/* adding more space between user and model messages in chat */
#conversation p {
    margin-bottom: 1rem;
    padding: 0.5rem;
}

/* adding more space between different fields */
#scoring_section div {
    margin-bottom: 1rem;
}