/* General Styles */
body {
    font-family: 'Roboto', sans-serif; /* Replace with any font */
    margin: 20px;
    background-image: url('SH_Tools_Logo1.png'); /* Add your background image */
    background-size: cover; /* Make the background cover the entire page */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the background from repeating */
    background-attachment: fixed; /* Make the background fixed during scrolling */
    color: #ecf0f1; /* Light text color to contrast against the background */
}

/* Container Styling */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #333; /* Slightly darker border */
    border-radius: 8px; /* Softer corners */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Stronger shadow for depth */
    /* background-color: #2c3e50;  Matching background color */
    background-color: rgba(44, 62, 80, 0.6); /* Translucent background color */
}

/* Headings */
h1 {
    font-weight: 700; /* Stronger emphasis on the main title */
    margin-bottom: 20px;
    color: #e74c3c; /* Accent color to match Star Horizons */
}

/* Labels */
label {
    font-weight: 500;
    color: #ecf0f1; /* Light color to match the theme */
}

/* Form Elements */
select, input[type="number"] {
    font-size: 16px;
    padding: 10px;
    background-color: #34495e; /* Darker input background */
    color: #ecf0f1; /* Light text color */
    border: 1px solid #555; /* Border that matches the theme */
    border-radius: 5px;
    margin-bottom: 10px; /* Consistent spacing */   
}

/* Box border color change on number-of-ships input */
input[type="number"]:hover {
    border-color:yellow;
}
/* Box color change on ship-type input */
form #ship-type:hover {
    border-color: yellow;
}


/* Button Container */
.button-container {
    display: flex;
    justify-content: flex-start; /* Align buttons to the left */
    align-items: center; /* Align vertically in the center */
}

/* Style for Add Ship and Download buttons */
#add-ship-btn, #download-btn {
    margin-right: 10px;  /* Space between buttons */
    padding: 10px 25px; /* Ensure consistent padding */
    background-color: #3498db; /* Blue background color */
    color: white; /* Button text color */
    border: none; /* Remove default borders */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    font-size: medium;       
}

#add-ship-btn:hover, #download-btn:hover {
    background-color: #1c679a; /* Darker blue on hover */
}

#download-btn {
    margin-left: auto; /* Push the button to the right */
}

/* Style for Reset button */
#reset-btn {
    background-color: #e74c3c; /* Original red background color */
    color: white; /* Button text color */
    border: none; /* Remove default borders */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    font-size: medium;
    padding: 10px 20px;
}

#reset-btn:hover {
    background-color: #94291d; /* Darker red on hover */
}

/* Table Styles */
.table-container {
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background-color: #34495e; /* Darker background for the table */
    color: #ecf0f1; /* Light text */
}

table .numeric {
    text-align: right;
    padding-right: 10px; /* Add some padding to give space from the edge */
}

/* Center-align text for class data */
table .centered {
    text-align: center;
}

th, td {
    padding: 12px;
    border: 1px solid #555; /* Darker border */
}

th {
    background-color: #2c3e50; /* Darker header background */
    font-weight: 500;
}

.total-row {
    font-weight: 700;
    background-color: #1a1a1d; /* Emphasized row with matching dark background */
}

/* Numeric Cells */
td.numeric {
    text-align: right;
}

/* Other Elements */
.result {
    margin-top: 20px;
}

/* Container Styling for Fixed Table */
.fixed-table-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    background-color: rgba(44, 62, 80, 0.8);
    color: #ecf0f1;
}

/* Table Styles */
.fixed-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #2c3e50;
    color: #ecf0f1;
}

.fixed-table th, .fixed-table td {
    padding: 12px;
    border: 1px solid #555;
    text-align: left;
}

.fixed-table th {
    background-color: #34495e;
    font-weight: 500;
}

.fixed-table .centered {
    text-align: center;
}

/* Footnotes Styling */
.footnotes {
    font-size: 12px;
    margin-top: 10px;
    color: #bdc3c7;
}

/* Return Home Anchor */
.fixed-return-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    z-index: 1000; /* Ensure it stays above other elements */
    font-weight: bold; /* Make the text bold for better visibility */
}

.fixed-return-button:hover {
    background-color: #2980b9;
}