/* Variables for theme colors */
:root {
    --primary-black: #1a1a1a;
    --secondary-black: #2a2a2a;
    --accent-orange: #ff8c00; /* vibrant orange */
    --accent-orange-dark: #e67e00; /* Darker orange for hover */
    --text-white: #ffffff;
    --text-grey: #cccccc;
    --border-grey: #444;
    --shadow-dark: rgba(0, 0, 0, 0.3);
    --alert-red: #e74c3c;
    --alert-red-dark: #c0392b;
    --success-green: #2ecc71;
    --success-green-dark: #27ae60;
    --info-blue: #3498db;
    --info-blue-dark: #2980b9;
    --warning-orange: #f39c12;
    --warning-orange-dark: #e67e22;
}


/* Basic Reset & Body */
body {
    font-family: 'Outfit', sans-serif; 
    padding: 15px;
    background-color: var(--primary-black);
    line-height: 1.6;
    color: var(--text-white);
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

/* Headings */
h1, h2 {
    color: var(--accent-orange); /* Orange headings */
    margin-bottom: 0.8em;
    font-family: 'Orbitron', sans-serif; /* Modern techy font for headings */
}
h1 {
    font-size: min(20vw, 4em); /* Slightly larger H1 */
    text-align: center;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    text-shadow: 0 0 5px var(--accent-orange); /* Subtle glow */
    overflow-wrap: break-word;
}
h2 {
   font-size: 2.5em; /* Slightly larger H2 */
   border-bottom: 1px solid var(--border-grey); /* Grey border */
   padding-bottom: 8px; /* Increased padding */
   margin-top: 0.4em; /* More space above H2 */
   color: var(--text-white); /* H2 text is white */
}
.subtitle {
    text-align: center;
    font-size: 0.9em;
    color: var(--text-grey); /* Grey subtitle text */
    margin-top: -0.5em;
    margin-bottom: 1.5em;
}

/* Container Blocks */
.settings, .controls, .log-container, .crash-alert, .test-controls {
    background-color: var(--secondary-black); /* Darker black background */
    padding: 20px 25px; /* More padding */
    margin-bottom: 25px; /* More margin */
    border-radius: 10px; /* More rounded corners */
    box-shadow: 0 5px 15px var(--shadow-dark); /* Darker shadow */
    border: 1px solid var(--border-grey); /* Grey border */
}
.crash-alert {
    background-color: #4a2a2a; /* Dark red background for alert */
    border-color: var(--alert-red);
    color: var(--text-white); /* White text on alert */
}
.crash-alert h2 {
    color: var(--alert-red); /* Red heading in alert */
    border-bottom: none;
    margin-top: 0;
}
.crash-alert a#smsLink {
    background-color: var(--alert-red); /* Red button */
    border: 1px solid var(--alert-red-dark);
    color: var(--text-white);
}
.crash-alert a#smsLink:hover {
    background-color: var(--alert-red-dark);
}
.crash-alert #crashLocation a {
    color: var(--info-blue); /* Blue link for map */
}


/* Form Elements */
label {
    display: block;
    margin-bottom: 6px; /* Slightly more space */
    margin-top: 15px; /* More space above label */
    font-weight: 700; /* Bolder weight */
    font-size: 1em; /* Standard size */
    color: var(--text-grey); /* Grey label text */
}

input[type="text"],
input[type="number"],
input[type="url"],
input[type="password"]
{
    width: 100%;
    padding: 12px 15px; /* More padding */
    margin-bottom: 8px; /* More margin */
    border: 1px solid var(--border-grey); /* Grey border */
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1rem; /* Using rem for better scaling */
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: normal;
    background-color: var(--primary-black); /* Black input background */
    color: var(--text-white); /* White input text */
}

/* Specific rule for number input appearance */
input[type="number"] {
     -moz-appearance: textfield;
}
/* Remove spinners for number input */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

small {
    display: block;
    margin-top: 4px; /* Slightly more space */
    margin-bottom: 12px; /* Slightly more space */
    color: var(--text-grey); /* Grey small text */
    font-size: 0.8em; /* Slightly smaller */
    line-height: 1.5;
}

/* Buttons */
button {
    padding: 12px 20px; /* More padding */
    margin: 15px 8px 5px 0; /* Adjusted margins */
    background-color: var(--info-blue); /* Blue button */
    color: var(--text-white);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700; /* Bolder */
    transition: background-color 0.3s ease, opacity 0.3s ease; /* Added opacity transition */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
}
button:hover:not(:disabled) {
    background-color: var(--info-blue-dark);
}
button:disabled {
    background-color: var(--secondary-black); /* Darker black when disabled */
    color: var(--border-grey); /* Grey text when disabled */
    cursor: not-allowed;
    opacity: 0.6; /* Slightly transparent */
}

button#saveSettingsBtn {
    background-color: var(--success-green); /* Green button */
}
button#saveSettingsBtn:hover:not(:disabled) {
    background-color: var(--success-green-dark);
}

button#stopBtn {
    background-color: var(--alert-red); /* Red button */
}
button#stopBtn:hover:not(:disabled) {
    background-color: var(--alert-red-dark);
}

#resetCrashBtn {
    background-color: var(--warning-orange); /* Orange button */
    color: var(--text-white);
}
#resetCrashBtn:hover:not(:disabled) {
    background-color: var(--warning-orange-dark);
}

button#testSmsBtn {
     background-color: var(--accent-orange); /* Orange button for test */
     margin-top: 10px;
}
button#testSmsBtn:hover:not(:disabled) {
     background-color: var(--accent-orange-dark);
}


/* Status & Display Paragraphs */
#monitoringStatus, #display, #helmetStatusDisplay {
    font-weight: bold;
    margin-top: 15px;
    font-size: 1.15em;
    padding: 10px 12px; /* Increased padding */
    border-radius: 5px; /* Match input border-radius */
    background-color: var(--primary-black); /* Black background */
    color: var(--text-white); /* White text */
    display: block; /* Make them block elements for better spacing */
    margin-bottom: 10px; /* Space below each status/display */
    word-wrap: break-word;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 1px solid var(--border-grey); /* Subtle border */
}
#settingsStatus {
    margin-top: 12px; /* Slightly more margin */
    font-weight: bold;
    padding: 8px 0; /* More padding */
    font-size: 0.95em;
}
#settingsStatus[style*="color: green"]{
     /* Retain inline style color for success */
}
#settingsStatus[style*="color: red"]{
     /* Retain inline style color for error */
}

/* Speed Display States */
#display[style*="color: orange"] {
    color: var(--accent-orange) !important;
    background-color: var(--primary-black) !important; /* Keep background black */
    text-shadow: 0 0 3px var(--accent-orange); /* Subtle glow */
}
#display[style*="color: red"] {
    color: var(--alert-red) !important;
    background-color: var(--primary-black) !important; /* Keep background black */
    text-shadow: 0 0 3px var(--alert-red); /* Subtle glow */
    animation: blinker 1s linear infinite;
}
/* Style for deceleration indication */
#display[style*="background-color: rgb(255, 221, 221)"] /* #fdd */ {
     background-color: #3a3030 !important; /* Darker reddish background */
     color: var(--text-white) !important;
}


/* Blinker Animation */
@keyframes blinker {
  50% { opacity: 0.7; } /* Less aggressive blink */
}

/* Horizontal Rules */
hr {
    margin: 30px 0; /* More vertical space */
    border: 0;
    border-top: 1px solid var(--border-grey); /* Grey rule */
}
hr.thin-hr {
    margin: 20px 0;
    border-top: 1px solid #3a3a3a; /* Lighter grey rule */
}

/* Speed Log Styling */
.log-container {
    margin-top: 25px;
    padding: 15px 20px; /* More padding */
    background-color: var(--secondary-black); /* Darker black */
    border-radius: 10px;
    box-shadow: 0 5px 15px var(--shadow-dark);
    border: 1px solid var(--border-grey);
}

.log-container h2 {
   border-bottom: none;
   margin-bottom: 15px; /* More space below heading */
   font-size: 1.3em; /* Slightly larger */
   color: var(--text-white);
}

#speedLog {
    list-style: none;
    padding: 0;
    margin: 0;

    max-height: 300px; /* Increased height */
    overflow-y: auto;
    border: 1px solid var(--border-grey); /* Grey border */
    border-radius: 5px;
    background-color: var(--primary-black); /* Black background */
}
#speedLog li {
    padding: 10px 12px; /* More padding */
    border-bottom: 1px solid #2a2a2a; /* Darker border */
    font-size: 0.9em;
    color: var(--text-grey); /* Grey log text */
    font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#speedLog li:last-child {
    border-bottom: none;
}
#speedLog li:nth-child(even) {
    background-color: #1f1f1f; /* Slightly lighter black for stripe */
}

/* Helmet Status Display Styling */
#helmetStatusDisplay {
    /* Inherits styles from #monitoringStatus, #display */
}

/* Style for when impact is detected */
#helmetStatusDisplay[style*="background-color: rgb(221, 221, 255)"] /* #ddf */ {
    background-color: #30304a !important; /* Darker blue background */
     /* Keep default text color */
}
/* Style for errors or invalid data */
#helmetStatusDisplay[style*="color: red"] {
    color: var(--alert-red) !important;
    background-color: var(--primary-black) !important; /* Keep background black */
}
/* Style for when URL not set or info */
#helmetStatusDisplay[style*="color: grey"] {
    color: var(--text-grey) !important; /* Grey color */
    background-color: var(--primary-black) !important; /* Keep default background */
}