/* General Body and Layout */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    color: #333;
    background-color: #f4f4f4;
}

header {
    background-color: #1A1A1A;
    color: #FFFFFF;
    padding: 1rem;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 20px;
}

nav {
    background-color: #2A2A2A;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

nav a {
    color: #C4A052;
    text-decoration: none;
    margin-right: 15px;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
    color: #FFFFFF;
}

.content {
    padding: 20px;
    background: #FFFFFF;
    border-radius: 5px;
    border-left: 5px solid #C4A052;
    margin-bottom: 20px; /* Added margin-bottom consistently */
}

footer {
    margin-top: 20px;
    text-align: center;
    color: #FFFFFF;
    font-size: 0.8rem;
    padding: 10px;
    background-color: #1A1A1A;
    border-radius: 5px;
}

/* Buttons */
.btn {
    background-color: #C4A052;
    color: #1A1A1A;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px; /* Consistent margin */
    margin-bottom: 10px; /* Added bottom margin for spacing */
    margin-top: 10px; /* Added top margin for spacing */
}

.btn:hover {
    background-color: #D4AF37;
}

.btn-secondary {
    background-color: #2A2A2A;
    color: #FFFFFF;
}

.btn-secondary:hover {
    background-color: #444;
}

/* Tables (Primarily for index.html and repair-details.html) */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    margin-top: 15px; /* From repair-details */
}

table, th, td {
    border: 1px solid #ddd;
}

th {
    background-color: #2A2A2A;
    color: #FFFFFF;
    padding: 10px;
    text-align: left;
}

td {
    padding: 10px;
}

tr:nth-child(even) { /* From index.html */
    background-color: #f2f2f2;
}

tbody tr { /* From index.html */
    cursor: pointer;
}

/* Style for the Issue column to wrap text */
#repairs-table tbody tr td:nth-child(4) {
    white-space: normal; /* Allow wrapping */
    word-break: break-word; /* Break long words */
    min-width: 150px; /* Optional: Set a minimum width */
    max-width: 300px; /* Optional: Set a maximum width */
}

/* Status Indicators (From index.html) */
.status-pending {
    color: #FF9800;
    font-weight: bold;
}
.status-approved {
    color: #4CAF50;
    font-weight: bold;
}
.status-completed {
    color: #2196F3;
    font-weight: bold;
}
.status-denied {
    color: #F44336;
    font-weight: bold;
}

.no-repairs { /* From index.html */
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    font-style: italic;
}


/* Form Styling (Primarily for new-repair.html) */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, select, textarea {
    width: 100%; /* Consider box-sizing: border-box; later if needed */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box; /* Add this for consistent sizing */
}

textarea {
    height: 120px;
    resize: vertical; /* Allow vertical resizing */
}

.form-row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 20px;
    margin-bottom: 20px;
}

.form-col {
    flex: 1;
    min-width: 200px; /* Prevent columns from becoming too narrow */
}

.required {
    color: #F44336;
}

.error-message {
    color: #F44336;
    font-size: 14px;
    margin-top: 5px;
    display: none; /* Hide by default */
}

.success-message {
    background-color: #f0f0f0; /* Light grey background */
    color: #1A1A1A;           /* Dark text (same as gold button text) */
    padding: 15px; /* Increased padding slightly */
    border-radius: 4px;
    margin-bottom: 20px;
    display: none; /* Hide by default */
    border: 1px solid #C4A052; /* Add a subtle gold border */
}

/* Product Specific Issues Styling (From new-repair.html) */
.product-issues {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fbfbfb;
    border-radius: 5px;
    border: 1px solid #eee; /* Added light border */
}

.product-issues h4 {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.product-issues .issue-grid { /* Added class for grid */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 15px;
}

.product-issues .issue-item { /* Added class for items */
    display: flex;
    align-items: center; /* Align checkbox and label */
    margin-bottom: 10px; /* Consistent spacing */
}

.product-issues .issue-item input[type="checkbox"] {
    width: auto; /* Override default width */
    margin-right: 8px;
}

.product-issues .issue-item label {
    margin-bottom: 0; /* Override default margin */
    font-weight: normal; /* Normal weight for options */
}

/* Style for validation errors */
input.is-invalid, select.is-invalid, textarea.is-invalid {
    border-color: #F44336;
}
.error-message.visible { /* Class to show error messages */
    display: block;
}

/* Force bullet points for repair details issues list */
#detail-selectedIssues li {
    list-style: disc !important; /* Force disc bullets */
    display: list-item !important; /* Ensure display is correct for list item */
    margin-left: 25px; /* Adjust indentation as needed */
}

/* Responsive Table Styles */
@media (max-width: 768px) {
    #repairs-table thead {
        display: none; /* Hide table headers on small screens */
    }

    #repairs-table, #repairs-table tbody, #repairs-table tr, #repairs-table td {
        display: block;
        width: 100%;
    }

    #repairs-table tr {
        margin-bottom: 15px;
        border: 1px solid #ddd; /* Add border around each "row" block */
        border-radius: 4px;
    }

    #repairs-table td {
        padding-left: 45%; /* Slightly reduce padding */
        padding-right: 10px; /* Add some right padding */
        position: relative;
        border: none; /* Remove individual cell borders */
        border-bottom: 1px solid #eee; /* Add subtle separator */
        min-height: 1.5em; /* Ensure minimum height for visibility */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    #repairs-table td:last-child {
        border-bottom: 0; /* Remove border for the last cell in a block */
    }

    #repairs-table td::before {
        content: attr(data-label); /* Use data-label for the label */
        position: absolute;
        left: 10px;
        width: calc(45% - 20px); /* Adjust width to match padding */
        padding-right: 10px;
        font-weight: bold;
        text-align: left;
        white-space: nowrap;
    }

    /* Adjust specific columns if needed */
    #repairs-table td[data-label="Print"] {
       text-align: center; /* Center the print button */
       padding-left: 10px; /* Remove extra padding */
    }
    #repairs-table td[data-label="Print"]::before {
       display: none; /* Hide label for print button */
    }
    #repairs-table td[data-label="Print"] button {
        width: auto; /* Allow button to size naturally */
        padding: 5px 10px;
        font-size: 0.9em;
    }
}

/* --- Print Specific Styles --- */
@media print {
    body {
        font-family: sans-serif;
        margin: 20px !important; /* Use important to override other margin styles */
        padding: 0 !important;
        background-color: #fff !important; /* Ensure white background for printing */
        font-size: 10pt; /* Adjust base font size for print if needed */
    }

    header, nav, footer, form#repair-form, .form-navigation, .print-buttons, #progress-indicator {
        display: none !important; /* Hide non-essential elements */
    }

    .content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    h2, h3 {
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
        margin-top: 15px;
        page-break-after: avoid; /* Try to keep headers with content */
    }

    /* Label specific styles */
    .label-section {
        border: 2px dashed #999;
        padding: 15px;
        margin-bottom: 20px;
        page-break-inside: avoid; /* Try not to split the label across pages */
    }
    .address-block {
        margin-bottom: 10px;
        line-height: 1.4;
    }
    .address-block strong {
        display: block;
        margin-bottom: 3px;
    }

    /* Packing list specific styles */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        page-break-inside: auto; /* Allow tables to break */
    }
    th, td {
        border: 1px solid #ccc;
        padding: 6px;
        text-align: left;
        vertical-align: top;
    }
    th {
        background-color: #eee;
        font-weight: bold;
    }
    td:first-child {
        width: 30%; /* Adjust width of label column */
    }
    
    .barcode {
        text-align: center;
        margin-top: 20px;
        page-break-inside: avoid; /* Keep barcode with its header */
    }
    .barcode svg {
        height: 40px; /* Adjust barcode height for print */
        width: auto;
        max-width: 80%; /* Ensure barcode fits */
    }
    
    /* Ensure print content is visible */
    #success-message, #print-controls {
        display: none !important; /* Ensure these are also hidden */
    }

    /* Display only the content intended for print (if wrapped in a specific div) */
    /* Example: if print content is dynamically put into a div with id="print-area" */
    /* 
    body > *:not(#print-area) { 
        display: none; 
    }
    #print-area {
        display: block !important;
    }
    */
}
/* --- End Print Styles --- */