/* === Standard Button Styles === */
.button, /* Base class */
.button-primary,
.button-secondary,
.button-danger {
    display: inline-block; /* Align buttons nicely */
    padding: 8px 16px !important; /* Start with standard padding */
    border: 1px solid transparent; /* Start with transparent border */
    border-radius: 4px !important; /* Standard border radius */
    cursor: pointer;
    font-size: 14px; /* Match body font size or adjust as needed */
    font-weight: bold;
    text-align: center;
    text-decoration: none; /* Remove underline from anchor tags used as buttons */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    color: #FFF; /* Default text color for dark theme */
    background-color: #4CAF50 !important; /* Default Green for .button */
    margin: 2px; /* Add slight margin */
}

/* Add essential centering class that was missing from style.css but exists in style2.css */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

/* Primary Button (e.g., Save, Create) - Blue */
.button-primary {
    background-color: #007bff; /* A standard blue */
    border-color: #007bff;
    color: #ffffff;
}
.button-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.button-primary:active {
    background-color: #004085;
    border-color: #004085;
}

/* Secondary Button (e.g., Cancel, Email, Print) - Grey */
.button-secondary {
    background-color: #6c757d; /* A standard grey */
    border-color: #6c757d;
    color: #ffffff;
}
.button-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}
.button-secondary:active {
    background-color: #4e555b;
    border-color: #4e555b;
}

/* Danger Button (e.g., Delete) - Red */
.btn.button-danger {
    background-color: #dc3545 !important; /* A standard red */
    border-color: #dc3545;
    color: #ffffff;
}
.btn.button-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}
.btn.button-danger:active {
    background-color: #a71d2a;
    border-color: #a71d2a;
}

/* Disabled state */
.button:disabled,
.button-primary:disabled,
.button-secondary:disabled,
.btn.button-danger:disabled {
    background-color: #555;
    border-color: #555;
    color: #aaa;
    cursor: not-allowed;
    opacity: 0.65;
}

/* === Specific Button Styles === */

/* View Button - Blue */
.btn-view {
    background-color: #2196F3; /* Standard Blue */
    border-color: #2196F3;
    color: #ffffff;
}
.btn-view:hover {
    background-color: #0b7dda;
    border-color: #0a6ebd;
    color: #ffffff;
}
.btn-view:active {
    background-color: #0a58a7;
    border-color: #09519b;
    color: #ffffff;
}
.btn-view:disabled {
    background-color: #a1cfff; /* Lighter blue */
    border-color: #a1cfff;
    color: #176ab4;
}

/* Print Button - Yellow */
.btn-print {
    background-color: #ffc107; /* Bootstrap's standard yellow */
    border-color: #ffc107;
    color: #212529; /* Dark text for better contrast on yellow */
}
.btn-print:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #212529;
}
.btn-print:active {
    background-color: #c69500;
    border-color: #b98d00;
    color: #212529;
}
.btn-print:disabled {
    background-color: #ffeeba;
    border-color: #ffeeba;
    color: #856404;
}

/* Cancel Button - Orange */
.btn-cancel {
    background-color: #fd7e14; /* Bootstrap's standard orange */
    border-color: #fd7e14;
    color: #ffffff;
}
.btn-cancel:hover {
    background-color: #e67312;
    border-color: #d96c10;
    color: #ffffff;
}
.btn-cancel:active {
    background-color: #ca650f;
    border-color: #bf5f0e;
    color: #ffffff;
}
.btn-cancel:disabled {
    background-color: #fdc697;
    border-color: #fdc697;
    color: #85450c;
}

/* Workorder Page Button Styling */
/* Base button styling for workorder buttons */
.workorder-container .btn {
    display: inline-block;
    padding: 8px 16px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    color: white;
}

/* Save button - Green */
.workorder-container #saveButton {
    background-color: #4CAF50 !important; /* Green */
    border: 1px solid #45a049;
}
.workorder-container #saveButton:hover {
    background-color: #45a049 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Delete button - Red */
.workorder-container #deleteButton,
.workorder-container .btn-danger {
    background-color: #dc3545 !important; /* Red */
    border: 1px solid #c82333;
}
.workorder-container #deleteButton:hover,
.workorder-container .btn-danger:hover {
    background-color: #c82333 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Email button - Blue */
.workorder-container #emailButton,
.workorder-container .btn-view {
    background-color: #2196F3 !important; /* Blue */
    border: 1px solid #0b7dda;
}
.workorder-container #emailButton:hover,
.workorder-container .btn-view:hover {
    background-color: #0b7dda !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Print button - Yellow */
.workorder-container #printButton,
.workorder-container .btn-print {
    background-color: #ffc107 !important; /* Yellow */
    border: 1px solid #e0a800;
    color: #212529; /* Darker text for better contrast on yellow */
}
.workorder-container #printButton:hover,
.workorder-container .btn-print:hover {
    background-color: #e0a800 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Cancel button - Orange */
.workorder-container .btn-cancel {
    background-color: #fd7e14 !important; /* Orange */
    border: 1px solid #e67312;
}
.workorder-container .btn-cancel:hover {
    background-color: #e67312 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Button container styling */
.workorder-container .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    .workorder-container .button-row {
        flex-direction: column;
    }
    
    .workorder-container .btn {
        width: 100%;
        margin: 5px 0;
    }
}

/* --- Light Mode Styles --- */
@media (prefers-color-scheme: light) {
    /* Adjust background/text colors if needed for light mode */
    .button-secondary {
        background-color: #f8f9fa; /* Lighter grey */
        border-color: #ced4da;
        color: #212529; /* Dark text */
    }
    .button-secondary:hover {
        background-color: #e2e6ea;
        border-color: #dae0e5;
    }
    .button:disabled,
    .button-primary:disabled,
    .button-secondary:disabled,
    .btn.button-danger:disabled {
         background-color: #e9ecef;
         border-color: #e9ecef;
         color: #6c757d;
    }

    /* Placeholder for potential future light mode styles for print/cancel */
    /* .btn-print { ... } */
    /* .btn-cancel { ... } */
    /* .btn-print:disabled { ... } */
    /* .btn-cancel:disabled { ... } */

}

/* Existing Workorder/Form Specific Styles - Consider moving if widely applicable */
.workorder-container, .survey-container {
    max-width: 900px; /* Adjust as needed */
    margin: 20px auto;
    padding: 20px;
    background-color: #363030; /* Dark background for the form container */
    border: 1px solid #555;
    border-radius: 8px;
    color: #FFF; /* Ensure text inside is light */
}

.workorder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #555;
}

.workorder-header h1 {
    margin: 0;
    color: #FFF;
}

.status-badge {
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: bold;
    color: #fff;
    margin-left: 20px; /* Add space between workorder number and status badge */
}

/* Example Status Colors (add more as needed) */
.status-open { background-color: #007bff; }
.status-scheduled { background-color: #ffc107; color: #333; }
.status-arrived { background-color: #28a745; }
.status-completed { background-color: #6c757d; }
.status-cancelled { background-color: #dc3545; }
.status-on.hold { background-color: #fd7e14; }
.status-needs.parts { background-color: #ffc107; color: #333; }

.form-section {
    background-color: transparent; /* Make section background transparent if container handles it */
    border: none; /* Remove border if container handles it */
    padding: 0 0 15px 0; /* Adjust padding */
    margin-bottom: 15px;
    border-bottom: 1px dashed #555; /* Optional separator */
}
.form-section:last-of-type {
    border-bottom: none; /* Remove border from last section */
}

.form-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #666;
    color: #FFF;
    text-align: left;
    width: auto; /* Reset width if previously set */
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Space between items in a row */
    margin-bottom: 15px;
}

.form-group {
    flex: 1; /* Allow groups to grow */
    min-width: 200px; /* Minimum width before wrapping */
}

.form-group.full-width {
    flex-basis: 100%; /* Make group take full width */
}

.form-group label {
    color: #FFF;
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #444;
    color: #FFF;
    box-sizing: border-box; /* Include padding and border in element's total width/height */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background-color: #555;
    outline: none;
    border-color: #80FFFF; /* Highlight focus */
}

.form-group textarea {
    min-height: 80px; /* Give textareas some height */
    resize: vertical; /* Allow vertical resizing */
}

.form-group input[type="checkbox"] {
    width: auto; /* Checkboxes shouldn't be full width */
    margin-right: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
}


/* Customer Search Specific */
#customer_search_group {
    position: relative; /* Needed for absolute positioning of results */
}
#customer_results {
    position: absolute;
    background-color: #555;
    border: 1px solid #777;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    width: calc(100% - 2px); /* Match input width minus borders */
    z-index: 1000;
    color: #FFF;
}
#customer_results div {
    padding: 8px;
    cursor: pointer;
}
#customer_results div:hover {
    background-color: #666;
}

#customer_details {
    background-color: #444;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #555;
    margin-top: 5px;
}
#customer_details p {
    margin: 0 0 5px 0;
    padding: 0;
    color: #ccc;
}
#customer_details p strong {
    color: #fff;
}

/* Message Area Styles */
#messageArea {
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: bold;
}
.message-success {
    color: #3c763d;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.message-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.message-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* Button Row Alignment */
.button-row {
    display: flex;
    justify-content: flex-start; /* Align buttons to the start */
    gap: 10px; /* Space between buttons */
    border-top: 1px dashed #555; /* Separator line */
    padding-top: 15px;
    margin-top: 15px;
}

/* --- Button Link State Overrides --- */

/* Default .btn states */
.btn:link,
.btn:visited,
.btn:active {
    color: white !important; /* Force white text */
    text-decoration: none !important;
}
.btn:hover {
    color: white !important; /* Keep white text on hover */
    text-decoration: none !important;
    /* The background color change should be handled by existing .btn:hover rules */
}

/* Apply similar overrides for specific button types if needed */
/* Example for .btn-secondary (assuming it's the Reset button) */
.btn-secondary:link,
.btn-secondary:visited,
.btn-secondary:active,
.btn-secondary:hover {
     color: white !important; 
     text-decoration: none !important;
}

/* Add overrides for .btn-print, .btn-email etc. if they also use <a> tags */
.btn-print:link, .btn-print:visited, .btn-print:active, .btn-print:hover,
.btn-email:link, .btn-email:visited, .btn-email:active, .btn-email:hover {
     color: white !important; 
     text-decoration: none !important;
}

/* --- End Button Link State Overrides --- */

/* Styling for Action Buttons */
.action-btn {
    display: inline-block;
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* Default/Schedule button style (example - adjust if needed) */
.action-btn.schedule, .action-btn.reschedule {
    background-color: #5cb85c; /* Green */
    color: #ffffff !important;
    border-color: #4cae4c;
}
.action-btn.schedule:hover, .action-btn.reschedule:hover {
    background-color: #449d44;
    border-color: #398439;
}

/* Log button style (example - adjust if needed) */
.action-btn.log {
    background-color: #337ab7; /* Blue */
    color: #ffffff !important;
    border-color: #2e6da4;
}
.action-btn.log:hover {
    background-color: #286090;
    border-color: #204d74;
}

/* Filter button style (example - adjust if needed) */
.action-btn.filter {
    background-color: #f0ad4e; /* Orange/Yellow */
    color: #ffffff !important;
    border-color: #eea236;
}
.action-btn.filter:hover {
    background-color: #ec971f;
    border-color: #d58512;
}


/* Specific style for the Unschedule button */
.action-btn.unschedule {
    background-color: #d9534f; /* Red */
    color: #ffffff !important; /* Ensure white text overrides link styles */
    border-color: #d43f3a;
}

.action-btn.unschedule:hover {
    background-color: #c9302c; /* Darker red on hover */
    border-color: #ac2925;
    color: #ffffff !important; /* Keep text white on hover */
}