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

:root {
    --alien-green: #39ff14;
    --space-black: #050505;
    --panel-bg: #121212;
    --border-color: #222222;
}

body, html {
    background-color: var(--space-black) !important;
    color: #e0e0e0;
}

.container, .container-fluid {
    background-color: transparent !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Navbar */
.navbar {
    border-bottom: 1px solid var(--border-color);
}
.navbar-brand svg {
    fill: var(--alien-green);
}

/* Cards and Panels */
.card, .bg-light, .bg-white {
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Buttons */
.btn-primary, button[type="submit"] {
    background-color: transparent !important;
    color: var(--alien-green) !important;
    border: 1px solid var(--alien-green) !important;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    padding: 8px 20px;
    border-radius: 4px;
}

.btn-primary:hover, button[type="submit"]:hover {
    background-color: var(--alien-green) !important;
    color: #000 !important;
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.4);
}

/* Form Inputs */
.form-control, .input-group input {
    background-color: var(--space-black);
    color: #fff;
    border: 1px solid var(--border-color);
    padding: 10px;
}

.form-control:focus, .input-group input:focus {
    background-color: var(--panel-bg);
    color: var(--alien-green);
    border-color: var(--alien-green);
    box-shadow: 0 0 0 0.2rem rgba(57, 255, 20, 0.25);
}

/* Text Highlights */
.text-primary, .text-success {
    color: var(--alien-green) !important;
}

/* Special override for reading.php background colors to keep them dark */
.split-pane .border, 
.passage-text,
.drill-section,
.word-bank,
[style*="background-color: #f8f9fa"],
[style*="background-color: #fcfcfc"],
.bg-light {
    background-color: var(--panel-bg) !important;
    color: #e0e0e0 !important;
    border-color: var(--border-color) !important;
}

/* Offcanvas side panel */
.offcanvas {
    background-color: var(--panel-bg);
    color: #e0e0e0;
    border-left: 1px solid var(--border-color);
}
.offcanvas-body {
    background-color: var(--space-black);
}

/* Highlighters */
mark, .user-highlight, .explanation-highlight {
    background-color: var(--alien-green) !important;
    color: #000000 !important;
    padding: 2px 4px;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(57, 255, 20, 0.4);
}
a {
    color: var(--alien-green);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, .hover-green:hover {
    color: var(--alien-green) !important;
    text-shadow: 0 0 8px var(--alien-green);
}