/* Find and REMOVE this entire rule */
/*
.form-group br {
    display: none;
}
*/

/* Find and MODIFY these rules */

/* Style for checkboxes and labels in the same row */
.form-group label {
    /* display: inline-block; */ /* Keep this if you want labels for non-checkbox inputs inline too, otherwise remove or make more specific */
    /* If keeping inline-block, ensure vertical alignment and spacing */
    /* vertical-align: middle; */ /* Align label vertically with potential inline inputs */
    /* margin-bottom: 5px; */ /* Add some space below labels */

    /* Let's simplify: Keep the original block display for general labels */
    display: block; /* Revert to default block display for general labels */
    margin-bottom: 5px; /* Original margin */
    color: #555;
}

.form-group input[type="checkbox"] {
    display: inline-block; /* Keep checkbox inline-block */
    vertical-align: middle; /* Align checkbox vertically */
    margin-right: 5px; /* Space between checkbox and label */
    margin-bottom: 5px; /* Add space below for wrapping */
}

/* Add a specific rule for labels FOLLOWING a checkbox */
.form-group input[type="checkbox"] + label {
    display: inline-block; /* Make the label inline-block */
    vertical-align: middle; /* Align it with the checkbox */
    margin-bottom: 5px; /* Add space below for wrapping */
    margin-right: 15px; /* Add space after the label before the next checkbox starts */
    /* Reset block display properties potentially inherited */
    margin-left: 0;
    width: auto; /* Allow label to take natural width */
}

/* --- End of Modifications --- */

/* Keep the rest of your CSS as is */
body {
    font-family: sans-serif;
    background-color: #f4f4f4;
    /* Removed flex centering for body to allow normal scrolling */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* min-height: 100vh; */
    margin: 0;
    padding-top: 20px; /* Add some padding at the top */
    padding-bottom: 40px; /* Add padding at the bottom */
    font-size: 16px; /* Default font size for larger screens */
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.login-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 350px;
    margin: 40px auto; /* Center login container */
}


.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.form-group {
    margin-bottom: 15px;
}

/* Original label rule - modified above */
/* .form-group label { ... } */

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group input[type="number"], /* Added number type */
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
    /* Removed appearance and custom arrow for non-selects */
}

/* Specific styles for select dropdowns */
.form-group select {
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8.586L1.707 4.293 0.293 5.707 6 11.414l5.707-5.707-1.414-1.414z'/%3E%3C/svg%3E"); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px; /* Make space for the arrow */
}


.form-group select:focus {
    outline: none;
    border-color: #255DBF;
    box-shadow: 0 0 5px rgba(92, 184, 92, 0.5);
}

.form-group select::-ms-expand {
    display: none; /* For IE */
}

/* General button style within form-group */
.form-group button {
    background-color: #255DBF;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    width: auto; /* Allow button to size naturally */
    display: inline-block; /* Make it inline-block */
    margin-top: 10px; /* Add some space above */
}
/* Style for full-width submit buttons if needed */
.form-group button[type="submit"] {
     width: 100%; /* Make submit buttons full width */
}


.form-group button:hover {
    background-color: #4B7BC7;
}

.error-message {
    color: #a94442;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.success-message {
     color: #3c763d;
     background-color: #dff0d8;
     border: 1px solid #d6e9c6;
     padding: 10px;
     margin-bottom: 15px;
     border-radius: 4px;
}


.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 90%; /* Use percentage for better responsiveness */
    max-width: 1100px; /* Increase max-width for wider screens */
    margin: 20px auto; /* Center the main container */
}


.back-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 10px; /* Add space between buttons */
    padding: 10px 15px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #ddd;
}

.back-button:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

/* General table styles (apply to tables outside .table-container too) */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    vertical-align: top; /* Align content to top */
}

table th {
    background-color: #f0f0f0;
    font-weight: bold; /* Ensure headers are bold */
}


.search-form {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: center;
    margin-bottom: 20px;
}

.search-form input[type="text"] {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    flex-grow: 1; /* Allow input to grow */
    margin-right: 10px; /* Space before button */
    margin-bottom: 10px; /* Space below on wrap */
    min-width: 200px; /* Minimum width */
}

.search-form button {
    padding: 8px 15px;
    background-color: #255DBF;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    /* margin-right: 10px; */ /* Removed, space handled by input */
    margin-bottom: 10px; /* Space below on wrap */
}

.search-form button:hover {
    background-color: #4B7BC7;
}

.greeting-row,
.search-row,
.table-row,
.links-row {
    margin-bottom: 20px;
}

.links-row a {
    margin-right: 20px;
    text-decoration: none;
    color: #255DBF;
}
.links-row a:hover {
    text-decoration: underline;
}

.edit-button {
    display: inline-block;
    /* margin-top: 20px; */ /* Removed, use margin-right on back-button */
    padding: 10px 15px;
    background-color: #255DBF;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    border: none;
}

.edit-button:hover {
    background-color: #4B7BC7;
}

.button-row {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap */
    justify-content: space-around; /* Distribute space */
    margin-bottom: 20px;
    gap: 10px; /* Add gap between wrapped buttons */
}

.button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #255DBF;
    color: #fff; /* Ensure button text is white */
    text-decoration: none;
    border-radius: 3px;
    border: none;
    text-align: center; /* Center text */
    flex-grow: 1; /* Allow buttons to grow */
    min-width: 150px; /* Minimum width */
}


.button:hover {
    background-color: #4B7BC7;
}

/* Styles specific to tables within .table-container */
.table-container {
    overflow-x: auto; /* Enable horizontal scrolling */
    width: 100%; /* Take up full width of the container */
    margin-bottom: 20px;
    margin-top: 15px; /* Add some space above tables */
}

.table-container table {
    border-collapse: collapse;
    width: 100%;
    /* min-width: 1000px; */ /* Removed fixed min-width, let content decide or use percentages */
}

.table-container th,
.table-container td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    white-space: nowrap; /* Prevent text from wrapping */
    font-size: 0.9em; /* Slightly smaller font for tables */
}

.table-container th {
    background-color: #f2f2f2;
    position: sticky; /* Make header sticky */
    top: 0; /* Stick to the top */
    z-index: 1; /* Ensure header is above scrolling content */
}


/* Reduce column widths - Example using percentages */
/* Adjust these based on your actual content and priorities */
/*
.table-container th:nth-child(1),
.table-container td:nth-child(1) { width: 15%; } Date/Time
.table-container th:nth-child(2),
.table-container td:nth-child(2) { width: 10%; } Qty
.table-container th:nth-child(3),
.table-container td:nth-child(3) { width: 10%; } Qty
.table-container th:nth-child(4),
.table-container td:nth-child(4) { width: 10%; } Qty
.table-container th:nth-child(5),
.table-container td:nth-child(5) { width: 15%; } Text
.table-container th:nth-child(6),
.table-container td:nth-child(6) { width: 15%; } Text
.table-container th:nth-child(7),
.table-container td:nth-child(7) { width: 10%; } Yes/No
.table-container th:nth-child(8),
.table-container td:nth-child(8) { width: 15%; } Text
*/
/* Example for the product issue table */
/* General Accessories */
/* .table-container th:nth-child(n), .table-container td:nth-child(n) { width: 60px; } */ /* Small Qty columns */
/* Yes/No columns */
/* .table-container th:nth-child(10), .table-container td:nth-child(10), ... { width: 70px; } */


.error { /* General error class */
    color: red;
    font-weight: bold;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .container {
        width: 95%; /* Increase width slightly */
        padding: 20px;
    }

    .button-row {
        flex-direction: column; /* Stack buttons vertically */
        align-items: stretch; /* Make buttons full width */
    }

    .button {
        width: 100%; /* Make buttons take full width */
        margin-bottom: 10px; /* Add space between stacked buttons */
    }

    .table-container table {
        font-size: 0.85em; /* Adjust font size */
    }
    .table-container th,
    .table-container td {
        padding: 6px;
        white-space: normal; /* Allow wrapping in table cells on mobile */
    }
     .table-container th {
        position: static; /* Disable sticky header on mobile if it causes issues */
    }

    /* Adjust form elements for better mobile experience */
    body {
        font-size: 16px; /* Reset base font size if needed */
    }
     .form-group label,
     .form-group input[type="text"],
     .form-group input[type="password"],
     .form-group input[type="date"],
     .form-group input[type="email"],
     .form-group input[type="number"],
     .form-group textarea,
     .form-group select,
     .form-group button {
        font-size: 1em; /* Ensure form elements use base font size */
        padding: 10px; /* Adjust padding */
    }
    .back-button,
    .edit-button,
    .button {
        font-size: 1em;
        padding: 10px 15px;
    }

    /* Ensure checkbox labels wrap correctly on mobile */
    .form-group input[type="checkbox"] + label {
        display: inline; /* Allow label text to wrap naturally */
        vertical-align: middle;
        margin-right: 10px; /* Adjust spacing */
    }
}

/* Even smaller screens */
@media (max-width: 480px) {
     .container {
        padding: 15px;
    }
     /* Further adjustments if needed */
}

/* Style for radio buttons */
.form-group input[type="radio"] {
    display: inline-block; /* Make radio button inline */
    vertical-align: middle; /* Align vertically */
    margin-right: 5px; /* Space between radio and label */
    margin-bottom: 5px; /* Space below for wrapping */
}

/* Style for labels FOLLOWING a radio button */
.form-group input[type="radio"] + label {
    display: inline-block; /* Make the label inline */
    vertical-align: middle; /* Align with the radio button */
    margin-bottom: 5px; /* Space below for wrapping */
    margin-right: 15px; /* Space after the label before the next radio starts */
}

nav {
  margin: 27px auto 0;

  position: relative;
  width: 590px;
  height: 50px;
  background-color: #34495e;
  border-radius: 8px;
  font-size: 0;
}
nav a {
  line-height: 50px;
  height: 100%;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: white;
  cursor: pointer;
}
nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all .5s ease 0s;
  border-radius: 8px;
}
a:nth-child(1) {
  width: 100px;
}
a:nth-child(2) {
  width: 110px;
}
a:nth-child(3) {
  width: 100px;
}
a:nth-child(4) {
  width: 160px;
}
a:nth-child(5) {
  width: 120px;
}
nav .start-home, a:nth-child(1):hover~.animation {
  width: 100px;
  left: 0;
  background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
  width: 110px;
  left: 100px;
  background-color: #e74c3c;
}
nav .start-blog, a:nth-child(3):hover~.animation {
  width: 100px;
  left: 210px;
  background-color: #3498db;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
  width: 160px;
  left: 310px;
  background-color: #9b59b6;
}
nav .start-contact, a:nth-child(5):hover~.animation {
  width: 120px;
  left: 470px;
  background-color: #e67e22;
}

span {
    color: #2BD6B4;
}