@charset "UTF-8";
/* CSS Document */

/* Base styles for the entire page */
body {
    font-family: Arial, sans-serif; /* Sets a clean, readable font for the site */
    margin: 20px; /* Adds spacing around the content */
    background-color: #f4f4f4; /* Light gray background, overridden by #fffde7 in some contexts */
}

/* Styles for main headings */
h1 {
    color: #333; /* Dark gray color for headings to ensure readability */
}

/* Navigation link styles */
nav a {
    text-decoration: none; /* Removes underlines from navigation links */
    color: #0066cc; /* Blue color for links, consistent with site theme */
    margin-right: 10px; /* Spacing between navigation links */
}

nav a:hover {
    text-decoration: underline; /* Underlines links on hover for user feedback */
}

/* General form styling for Add Event, wizard, and other forms */
form {
    max-width: 500px; /* Default width for all forms except wizard preview */
    background: #fff; /* White background, overridden by #fffde7 in some pages */
    padding: 20px; /* Inner spacing for form content */
    border: 1px solid #ddd; /* Light gray border for subtle definition */
    border-radius: 5px; /* Rounded corners for a modern look */
    margin-bottom: 20px; /* Space below forms */
    width: 100%; /* Ensure it takes full available width up to max-width */
}

/* Specific styling for Event Wizard Preview form */
.wizard-preview-form {
    max-width: 800px; /* Wider form for better visibility */
    width: 100%; /* Ensure it takes full available width up to max-width */
}

/* Label styling for form fields */
label {
    display: block; /* Ensures labels stack above inputs */
    margin: 10px 0 5px; /* Vertical spacing around labels */
}

/* Input, textarea, and select styling */
input, textarea, select {
    width: 100%; /* Full width for form elements within the form */
    padding: 8px; /* Increased padding for better touch/click area */
    box-sizing: border-box; /* Includes padding in width calculation */
    min-width: 150px; /* Minimum width to ensure readability */
}

/* Button and link-button styling */
button, .button {
    margin-top: 10px; /* Space above buttons */
    padding: 10px 20px; /* Wider padding for better clickability */
    background-color: #4CAF50; /* Green background for buttons */
    color: white; /* White text for contrast */
    border: none; /* No border for clean look */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Hand cursor on hover */
    text-decoration: none; /* No underline for link buttons */
    display: inline-block; /* Allows link buttons to behave like buttons */
    min-width: 120px; /* Minimum width for buttons */
}

button:hover, .button:hover {
    background-color: #45a049; /* Darker green on hover for feedback */
}

/* General table styling for event lists, invoices, etc. */
table {
    width: 100%; /* Full-width tables within the form */
    border-collapse: collapse; /* Removes gaps between table cells */
    background: #fff; /* White background for tables */
    margin-top: 0; /* No top margin to align with content */
}

/* Specific table styling for Event Wizard Preview */
.wizard-preview-form table {
    min-width: 800px; /* Minimum width to ensure all columns are visible */
}

th, td {
    border: 1px solid #ddd; /* Light gray borders for table cells */
    padding: 10px; /* Increased padding for readability */
    text-align: left; /* Left-align text */
}

.wizard-preview-form th, .wizard-preview-form td {
    min-width: 120px; /* Minimum width for each cell to prevent crowding */
}

th {
    background-color: #4CAF50; /* Green background for table headers */
    color: white; /* White text for contrast */
}

/* Links within table cells */
td a {
    color: #0066cc; /* Blue links in tables */
    text-decoration: none; /* No underlines */
    margin-right: 10px; /* Spacing between links */
}

td a:hover {
    text-decoration: underline; /* Underline on hover for feedback */
}

/* Calendar container styling */
#calendar {
    margin-top: 20px; /* Space above the calendar */
}

/* Event bar styling (used in calendar or event forms) */
.event-bar {
    display: inline-block; /* Inline layout for event bar forms */
    white-space: nowrap; /* Prevents wrapping of elements */
    margin: 0 0 5px 0; /* Minimal bottom margin */
}

.event-bar form {
    margin: 0; /* No margin for inline forms */
    padding: 0; /* No padding */
    background: transparent; /* No background */
    border: none; /* No border */
    border-radius: 0; /* No rounded corners */
}

.event-bar label {
    margin-right: 5px; /* Spacing between labels and inputs */
    display: inline; /* Inline labels */
    font-weight: bold; /* Bold labels for emphasis */
}

.event-bar input[type="date"],
.event-bar input[type="time"] {
    margin-right: 10px; /* Spacing between inputs */
    padding: 2px; /* Minimal padding */
    display: inline; /* Inline display */
    vertical-align: middle; /* Aligns with other elements */
    width: 120px; /* Fixed width for date inputs */
}

.event-bar input[type="time"] {
    width: 80px; /* Smaller width for time inputs */
}

.event-bar select {
    margin-right: 10px; /* Spacing between selects */
    padding: 2px; /* Minimal padding */
    display: inline; /* Inline display */
    vertical-align: middle; /* Aligns with other elements */
    width: 150px; /* Fixed width for dropdowns */
}

.event-bar button {
    margin-right: 0; /* No right margin */
    padding: 2px 10px; /* Smaller padding for inline buttons */
    display: inline; /* Inline display */
    vertical-align: middle; /* Aligns with other elements */
}

/* Edit bar styling (similar to event bar, used for editing events) */
.edit-bar {
    display: inline-block; /* Inline layout */
    white-space: nowrap; /* Prevents wrapping */
    margin: 0 0 5px 0; /* Minimal bottom margin */
}

.edit-bar form {
    margin: 0; /* No margin */
    padding: 0; /* No padding */
    background: transparent; /* No background */
    border: none; /* No border */
    border-radius: 0; /* No rounded corners */
}

.edit-bar label {
    margin-right: 5px; /* Spacing between labels and inputs */
    display: inline; /* Inline labels */
    font-weight: bold; /* Bold labels */
    color: red; /* Red labels to indicate editing */
}

.edit-bar input[type="date"],
.edit-bar input[type="time"] {
    margin-right: 10px; /* Spacing between inputs */
    padding: 2px; /* Minimal padding */
    display: inline; /* Inline display */
    vertical-align: middle; /* Aligns with other elements */
    width: 120px; /* Fixed width for date inputs */
}

.edit-bar input[type="time"] {
    width: 80px; /* Smaller width for time inputs */
}

.edit-bar select {
    margin-right: 10px; /* Spacing between selects */
    padding: 2px; /* Minimal padding */
    display: inline; /* Inline display */
    vertical-align: middle; /* Aligns with other elements */
    width: 150px; /* Fixed width for dropdowns */
}

.edit-bar input[type="text"] {
    margin-right: 10px; /* Spacing between text inputs */
    padding: 2px; /* Minimal padding */
    display: inline; /* Inline display */
    vertical-align: middle; /* Aligns with other elements */
    width: 100px; /* Fixed width for text inputs */
}

.edit-bar button {
    margin-right: 0; /* No right margin */
    padding: 2px 10px; /* Smaller padding for inline buttons */
    display: inline; /* Inline display */
    vertical-align: middle; /* Aligns with other elements */
}

/* Highlight styling for updated events */
.updated-event {
    background-color: #ffcccc; /* Light red background for updated events */
    color: #000; /* Black text for readability */
}

/* Contract box styling for invoice or contract displays */
.contract-box {
    border: 1px solid #000; /* Black border for definition */
    padding: 15px; /* Inner padding */
    margin-bottom: 20px; /* Space below */
    color: #000; /* Black text */
    background-color: #fff; /* White background */
}

.contract-box table {
    width: 100%; /* Full-width table */
    border-collapse: collapse; /* No gaps between cells */
    border: 1px solid #000; /* Black border */
}

.contract-box td {
    border: 1px solid #000; /* Black borders for cells */
    padding: 8px; /* Padding for readability */
    text-align: left; /* Left-align text */
}

/* Policy table styling for draggable tables */
#policy-table {
    cursor: move; /* Move cursor for draggable table */
}

#policy-table tr {
    background-color: #fff; /* White background for rows */
}

#policy-table tr.ui-sortable-helper {
    background-color: #f0f0f0; /* Light gray background for dragged rows */
}

/* Responsive styles for smaller screens */
@media (max-width: 800px) {
    .event-bar,
    .edit-bar {
        display: block; /* Stack elements vertically */
        white-space: normal; /* Allow wrapping */
    }
    .event-bar label,
    .event-bar input,
    .event-bar select,
    .event-bar button,
    .edit-bar label,
    .edit-bar input,
    .edit-bar select,
    .edit-bar button {
        display: block; /* Stack elements */
        width: 100%; /* Full width */
        margin-bottom: 10px; /* Space between elements */
        margin-right: 0; /* No right margin */
    }
}

/* Styles for Duplicate feature */
.duplicate-form {
    border: 2px solid #ff0000; /* Red outline for Add Event form in duplicate mode */
}

/* Highlighting for new or added events */
.new-event {
    background-color: #e6f3ff; /* Light blue background for newly added events */
}

/* General form styling for event forms */
.event-form {
    padding: 10px; /* Reduced padding for compact forms */
    margin-bottom: 20px; /* Space below */
}

/* Form group styling for individual fields */
.form-group {
    margin-bottom: 10px; /* Space between fields */
}

/* Day picker table styling for wizard form */
.day-picker {
    width: 100%; /* Full-width table */
    border-collapse: collapse; /* No gaps between cells */
}

.day-picker td {
    padding: 5px; /* Padding for readability */
    text-align: center; /* Center-align checkboxes */
    border: 1px solid #ddd; /* Light gray borders for alignment */
}

/* Preview table styling for Event Wizard Preview */
.wizard-preview-form {
    max-width: 800px; /* Wider form for better visibility */
    width: 100%; /* Ensure it takes full available width up to max-width */
}

.wizard-preview-form table {
    min-width: 800px; /* Minimum width to ensure all columns are visible */
}

.wizard-preview-form th, .wizard-preview-form td {
    min-width: 120px; /* Minimum width for each cell to prevent crowding */
}
nav a.active {
    font-weight: bold;
    color: #000;
}
#policy-list li { cursor: move; }
nav a.active { font-weight: bold; color: #000; }
#policy-list li { cursor: move; }

table.wp-list-table img {
    max-width: 100px;
    height: auto;
}
table.wp-list-table .description {
    max-width: 200px;
    word-wrap: break-word;
}
.r25pr-checkouts-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.r25pr-checkouts-table th, .r25pr-checkouts-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.r25pr-checkouts-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}
.r25pr-checkouts-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.r25pr-checkouts-table img {
    max-width: 100px;
    height: auto;
}
.r25pr-checkouts-table .description {
    max-width: 200px;
    word-wrap: break-word;
}
.r25td-dashboard .button {
    margin-right: 10px;
    margin-bottom: 10px;
}
.week-header {
    font-weight: bold;
    background-color: #f0f0f0;
}

/* New styles for production-agreement.php */
header {
    text-align: center;
    margin-bottom: 20px;
}
header h1 {
    font-size: 24px;
    font-weight: bold;
}
.business-details {
    font-size: 14px;
    margin: 10px 0;
}
main h2 {
    text-align: center;
    font-size: 20px;
    margin: 20px 0;
}
.section {
    margin-bottom: 20px;
}
.section h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.section p {
    margin: 5px 0;
}
.agreement-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.agreement-table th, .agreement-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.agreement-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}
.agreement-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.policies {
    list-style-type: disc;
    margin-left: 20px;
}
.policies li {
    margin-bottom: 10px;
}
.button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin: 5px;
}
.button:hover {
    background-color: #0056b3;
}

/* booking request form */

hr { border: 1px solid #000; }
.week-section { margin-bottom: 20px; }
.week-section h4 { margin: 10px 0; }
.day-checkboxes label { margin-right: 10px; }
.time-input { width: 100px; }
.conflict { color: red; }

/* footer */

.footer {
    text-align: center;
    padding: 10px;
    background-color: #f4f4f4;
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    width: 100%;
}
.footer a {
    text-decoration: none;
    color: #0066cc;
    margin: 0 10px;
}
.footer a:hover {
    text-decoration: underline;
}