body {
    font-family: Arial, sans-serif;
}

.resource-links {
	list-style: none;
	padding-left: 0;
}
.resource-links li {
	margin-bottom: 0.75rem; /* Space between links */
}
.resource-links a {
	font-size: 1.15rem; /* Larger font size */
	text-decoration: none;
	color: #0d6efd; /* Standard link color */
	transition: color 0.2s ease-in-out;
	display: inline-flex; /* Correctly align icon and text */
	align-items: center;
}
.resource-links a:hover {
	color: #0a58ca;
	text-decoration: underline;
}
.resource-links svg {
	width: 22px;
	height: 22px;
	margin-right: 8px; /* Space between icon and text */
	flex-shrink: 0;
}

/* Language Selector Styling (Optional refinements) */
.language-selector {
    display: flex; /* Align label and select nicely if label is visible */
    align-items: center;
}

.language-selector label {
    /* margin-right: 0.5rem; If label is visible */
    font-size: 0.9rem; /* Slightly smaller label if desired */
    /* color: #555; */
}

.language-selector .form-select-sm {
    /* Any custom overrides for the select element itself */
    /* For example, to match a specific height or border */
}

/* === Device Drawing Styles === */
.device-images-flex-container {
    display: flex;
    justify-content: flex-start; /* Align items (enclosures) to the start */
    align-items: flex-start;   /* Align items to the top */
    flex-wrap: wrap;           /* Allow wrapping on smaller screens */
    padding-top: 0.75rem;      /* Space below the "Device Appearance" header */
}

.device-image-enclosure {
    position: relative; /* For positioning pseudo-elements */
    margin: 30px 40px;  /* Outer margins: 30px top/bottom, 40px left/right */
    padding: 0 10px;    /* Side padding to make space for the "extruded" lines INSIDE the margin */
                        /* This means the visual width of the side lines is within the 40px margin */
    display: inline-flex; /* So it shrinks to content + padding/border */
    flex-direction: column; /* If you want to stack things inside, not strictly needed here */
    align-items: center;
}

/* Pseudo-elements for the "extruded aluminum rounded edge" effect */
.device-image-enclosure::before,
.device-image-enclosure::after {
    content: '';
    position: absolute;
    top: -2px; /* Align with the top of the main frame's border */
    bottom: -2px;/* Align with the bottom of the main frame's border */
    width: 8px;  /* Width of the rounded side bar */
    background-color: #222222; /* A metallic grey, slightly darker than frame's silver */
    border-radius: 4px; /* Rounded appearance for the side bars */
    z-index: 1; /* Behind the main frame if any overlap, but should be beside */
}

.device-image-enclosure::before {
    left: 0; /* Position the left bar */
}

.device-image-enclosure::after {
    right: 0; /* Position the right bar */
}

.device-image-frame {
    position: relative; /* For z-index stacking if needed, and good practice */
    background-color: #434242; /* Light silvery background for the label area */
    border: 2px solid rgba(0, 0, 0, 0.9); /* 90% Black, 2px thick frame */
    padding: 15px; /* Inner padding between the frame and the SVG image */
    border-radius: 6px; /* Slightly rounded corners for the main frame */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for a bit of depth */
    z-index: 2; /* Ensure this frame is on top of the enclosure's pseudo-elements */
    display: flex; /* To center image if needed, or just contain it */
    justify-content: center;
    align-items: center;
    /* The dimensions of the frame will be determined by the image + padding */
}

.device-image-frame img {
    display: block; /* Remove extra space below inline images */
    height: 400px;  /* Requested height - adjust as needed. 500px was quite large. */
    width: auto;    /* Maintain aspect ratio */
    max-width: 100%; /* Ensure it doesn't overflow the padded frame */
    object-fit: contain; /* Ensures the whole SVG is visible without cropping */
}

/* Ensure cards in the row have equal height for their content area */
.card.h-100 .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if mt-auto is used on button */
}

/* Initial Loader Styles (if not already added) */
#initial-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* Or your page background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-size: 1.2em;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#initial-loader.hidden {
    opacity: 0;
    pointer-events: none; /* Allow clicks to pass through when hidden */
}

body {
    opacity: 0; /* Initially hide the body */
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in */
}

body.lang-loaded {
    opacity: 1; /* Make body visible once language is loaded */
}

#sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

#sidebar .nav-link.active {
    background-color: #00A0E3;
    color: #fff;
}

#sidebar {
    height: 100vh;
}

form {
    margin-top: 20px;
}

.tab-pane {
	margin-top: 20px;
}

.settings-group {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.settings-group h2 {
    margin-bottom: 15px;
    font-size: 1.25rem;
    color: #333;
}

.form-control, .form-check-input, .form-check-label, .btn {
    font-size: 1rem;
}

.form-label {
    font-weight: 600;
    color: #555;
}

.form-check-inline .form-check-input {
    margin-right: 5px;
}

/* Removed fixed width for col-md-3 as it might conflict with Bootstrap grid */
/* .col-md-3 {
    max-width: 25%;
} */

.table td {
    /* Removed cursor: pointer; text-align: center; font-weight: bold; */
    /* These were likely specific to a different table usage */
}


.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 12px rgba(0, 91, 187, 0.3);
}

.btn-secondary {
    background-color: #28a745;
    border-color: #28a745;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-secondary:hover {
    background-color: #218838;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-light {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
    color: #555;
}

.form-control:focus, .form-check-input:focus, .btn:focus {
    box-shadow: 0 0 8px rgba(0, 160, 227, 0.5);
}

.console-log {
    height: 400px;
    overflow-y: scroll;
    background-color: #000;
    color: #0f0;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
}


/* === Styles for Status & Device Info Pages === */

/* === Styles for Status & Device Info Pages === */

/* General layout spacing */
.status-group, .info-section {
    margin-bottom: 2rem; /* Spacing between sections */
}

.status-subgroup {
    margin-top: 1.5rem; /* Spacing within status groups */
}

/* Table Styling */
.table { /* Apply base table styling generally */
    table-layout: fixed; /* Prevents width changes on hover */
    width: 100%;
    margin-bottom: 1rem; /* Ensure consistent spacing below tables */
}

.table th {
    font-weight: normal; /* Remove default bold from headers */
    width: 40%; /* Adjust width as needed, slightly less for label */
    box-sizing: border-box;
    text-align: left;
    padding: 0.5rem 0.5rem; /* Consistent padding (Bootstrap default is often 0.5rem) */
    vertical-align: top; /* Align top for potentially multi-line content */
    border-top: 1px solid #dee2e6; /* Match Bootstrap border */
}

.table td {
    text-align: right;
    width: 60%; /* Adjust width as needed */
    box-sizing: border-box;
    padding: 0.5rem 0.5rem; /* Consistent padding */
    vertical-align: top; /* Align top */
    border-top: 1px solid #dee2e6; /* Match Bootstrap border */
}

/* Ensure striped tables have transparent background on TR by default */
/* This allows TD/TH background hover to show through */
.table-striped tbody tr {
    background-color: transparent;
}
/* Apply striping color to TD/TH instead of TR */
.table-striped tbody tr:nth-of-type(odd) td,
.table-striped tbody tr:nth-of-type(odd) th {
     /* Use Bootstrap's variable or a default light grey */
    background-color: rgba(0, 0, 0, 0.05);
}


/* Table Row Hover Effect */
/* Apply transition to the cells */
table.table tbody td,
table.table tbody th {
    transition: background-color 0.2s ease;
}

/* Apply hover background TO THE CELLS (td, th) */
table.table tbody tr:hover td,
table.table tbody tr:hover th {
    background-color: #00A0E3; /* Slightly darker grey for better visibility */
	color: rgba(255, 255, 255, 0.90);
    /* You can adjust the hover color e.g., #f2f2f2, #e9ecef */
}


/* === Styles specific to Device Info Page (Moved from inline) === */
/* ... (logo-container, serial-column styles remain the same) ... */
.logo-container {
    text-align: center; /* Center the logo */
    margin-top: 30px; /* Add space above the logo */
    margin-bottom: 20px; /* Add space below the logo */
}

.logo-container img {
    width: 300px; /* Set a sane width for the logo */
    height: auto; /* Maintain aspect ratio */
}

.serial-column {
    /* Uses Bootstrap's default padding, can add more if needed */
     margin-bottom: 1rem; /* Add bottom margin matching Bootstrap's grid */
}

/* If specific styling is needed for the serial tables beyond the general .table rules */
/* .serial-column .table { */
    /* Add specific overrides here */
/* } */