/* General Styles */
body {
    margin: 0;
    padding: 20px;
    background-color: #2e2e2e; /* Dark gray background */
    color: #ffffff; /* White font */
    font-family: 'Roboto', sans-serif; /* Readable sans-serif font */
}

a {
    color: #1e90ff; /* Bright blue links */
    text-decoration: none;
}

a:hover {
    color: #ffa500; /* Orange on hover */
}

a.disabled-link {
    pointer-events: none;
    color: gray; /* Makes the link appear disabled */
    cursor: not-allowed; /* Changes the cursor to a "not-allowed" symbol */
    text-decoration: none; /* Optional: Removes the underline */
    opacity: 0.6; /* Optional: Adds a transparency effect */
}

h1, h2, h3 {
    font-family: 'Orbitron', sans-serif; /* Stylized sci-fi font */
    color: #1e90ff; /* Bright blue headings */
    text-shadow: 0 0 5px #ffa500; /* Glow effect */
}

/* Container Styling */
.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.menu {
    width: 45%;
    background: #3c3c3c; /* Slightly lighter gray for contrast */
    border: 1px solid #ffffff; /* White border */
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.5); /* Orange glow */
}

/* Item Card */
.item {
    border: 1px solid #1e90ff; /* Bright blue border */
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    background: #444444; /* Medium gray background */
    box-shadow: 0 0 10px rgba(30, 144, 255, 0.5); /* Blue glow */
}

.item p {
    margin: 5px 0;
    color: #ffffff; /* White text */
    font-family: 'Roboto', sans-serif; /* Readable font */
}

.item button {
    background: #1e90ff; /* Bright blue */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-family: 'Roboto', sans-serif;
}

.item button:hover {
    background: #ffa500; /* Orange */
    transform: scale(1.05); /* Slightly larger on hover */
}

.item button:active {
    background: #ff4500; /* Red on click */
}

/* Grayed out button when disabled */
.item button:disabled {
    background: #d3d3d3; /* Light gray background */
    color: #a9a9a9; /* Dark gray text */
    cursor: not-allowed; /* Disable the pointer cursor */
    transform: none; /* Remove hover effect */
}

/* Flash Messages */
.flash-messages {
    margin: 20px auto;
    width: 90%;
    max-width: 600px;
    background: #444444; /* Medium gray */
    border: 1px solid #ffa500; /* Orange border */
    border-radius: 5px;
    padding: 10px;
    color: #ffffff; /* White text */
    text-align: center;
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5); /* Orange glow */
}

/* Buttons */
button {
    background: #1e90ff; /* Bright blue */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 3px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-family: 'Roboto', sans-serif;
}

button:hover {
    background: #ffa500; /* Orange */
    transform: scale(1.05); /* Slightly larger on hover */
}

button:active {
    background: #ff4500; /* Red on click */
}

/* Forms */
form {
    margin: 15px 0;
}

label {
    font-weight: bold;
    color: #ffffff; /* White text */
    font-family: 'Roboto', sans-serif;
}

select, input {
    background: #444444; /* Medium gray */
    color: #ffffff; /* White text */
    border: 1px solid #1e90ff; /* Bright blue */
    border-radius: 3px;
    padding: 5px;
    margin-left: 10px;
    font-family: 'Roboto', sans-serif;
}

select:focus, input:focus {
    border-color: #ffa500; /* Orange */
    outline: none;
}

.login-form {
    max-width: 300px; /* Optional: Restrict form width */
    /*margin: 0 auto; /* Center the form */
}

.form-group {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Align items vertically */
    margin-bottom: 15px;
}

.form-group label {
    width: 100px; /* Set a fixed width for labels */
    text-align: right; /* Align label text to the right */
    margin-right: 10px; /* Add spacing between label and input */
}

.form-group input {
    flex: 1; /* Allow input to take up remaining space */
    padding: 5px;
    border: 1px solid #ccc; /* Optional: Styling for inputs */
    border-radius: 4px; /* Optional: Rounded corners */
}

.grid-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
}

.grid-table th,
.grid-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.grid-table th {
    font-weight: bold;
}

button:disabled {
    background: #d3d3d3 !important;
    color: #a9a9a9 !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.7;
}

/* Header small button style */
.header-btn {
    background: #222a36;
    color: #1e90ff;
    border: 1px solid #1e90ff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    margin: 0 2px;
    font-family: 'Orbitron', 'Roboto', sans-serif;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
    box-shadow: 0 0 4px #1e90ff44;
}
.header-btn:hover:not(:disabled) {
    background: #1e90ff;
    color: #fff;
    border-color: #ffa500;
    transform: scale(1.07);
}
.header-btn:active:not(:disabled) {
    background: #ffa500;
    color: #fff;
    border-color: #ff4500;
}
.header-btn:disabled {
    background: #444;
    color: #aaa;
    border-color: #555;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

/* Ship Stats Bars */
.statbar {
  width: 80px;
  height: 14px;
  background: #222;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #444;
  margin: 0 4px;
  position: relative;
  box-shadow: 0 0 2px #000a;
}
.statbar-fill {
  height: 100%;
  transition: width 0.3s;
}
.statbar-hull-fill {
  background: linear-gradient(90deg, #ff3b3b, #b20000);
}
.statbar-shield-fill {
  background: linear-gradient(90deg, #1e90ff, #0050a0);
}
.statbar-cargo-fill {
  background: linear-gradient(90deg, #b0b0b0, #888);
}
.statbar-fuel-fill {
  background: linear-gradient(90deg, #e0e0e0, #b0b0b0);
}