/* Admin Styles */
/* --- Flatpickr Calendar and Time Picker Overrides --- */

/* Make the Flatpickr time picker take full width of its container */
.flatpickr-calendar .flatpickr-time {
    width: 100% !important;
    box-sizing: border-box;
}

/* Make the Flatpickr calendar popup width auto and responsive */
.flatpickr-calendar {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* When calendar is open, ensure width remains consistent */
.flatpickr-calendar.open {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* --- Admin Settings Page Fields Row --- */

.ts-admin-settings-row {
    display: flex;
    gap: 20px; /* space between fields */
    align-items: center; /* vertically align fields */
}

/* Make each field container equally share the row's width */
.ts-admin-settings-row > div {
    flex: 1 1 0; /* flexible and equal width */
    min-width: 0; /* prevent overflow */
}

/* Optional: If your fields have labels inside the div, you may want label styling */
.ts-admin-settings-row label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}


.ts-plugin form:not(.ts-schedule-filter-form) input,
.ts-plugin form:not(.ts-schedule-filter-form) textarea,
.ts-plugin form:not(.ts-schedule-filter-form) select {
    display: block;
    margin: 10px 0;
    width: 100%;
}

.ts-plugin .ts-schedule-filter-form {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: nowrap;
}

.ts-plugin .ts-schedule-filter-form select {
    min-width: 150px;
}

.ts-plugin .ts-schedule-filter-form input[type="submit"] {
    height: 2.5em; /* was 2.2em */
    cursor: pointer;
}

.ts-plugin .ts-transport-form {
  max-width: 1141px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1.2rem 2rem;
  font-family: Arial, sans-serif;
}

.ts-plugin .ts-transport-form .form-row {
  display: flex;
  flex-direction: column;
}

.ts-plugin .ts-transport-form .form-row.full-width {
  grid-column: 1 / -1; /* Span all columns for submit button or wide elements if needed */
}

.ts-plugin .ts-transport-form label {
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #333;
  font-size: 0.95rem;
}

.ts-plugin .ts-transport-form input[type="text"],
.ts-plugin .ts-transport-form input[type="email"],
.ts-plugin .ts-transport-form input[type="time"],
.ts-plugin .ts-transport-form select {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s ease-in-out;
}

.ts-plugin .ts-transport-form input[type="text"]:focus,
.ts-plugin .ts-transport-form input[type="email"]:focus,
.ts-plugin .ts-transport-form input[type="time"]:focus,
.ts-plugin .ts-transport-form select:focus {
  border-color: #0066cc;
  outline: none;
}

.ts-plugin .ts-transport-form .ts-submit-button {
  background-color: #dec37d;
  color: #4b3b00; /* Dark, readable brown */
  font-weight: 700;
  padding: 12px 0;
  font-size: 1.1rem;
  border: none;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ts-plugin .ts-transport-form .ts-submit-button:hover,
.ts-plugin .ts-transport-form .ts-submit-button:focus {
  background-color: #c7b26a; /* Slightly darker tan on hover */
  outline: none;
}

@media (max-width: 720px) {
  .ts-plugin .ts-transport-form {
    grid-template-columns: 1fr;
  }
}

.ts-plugin .ts-add-schedule-form .wp-core-ui select {
    max-width: 12rem !important;
}

.ts-plugin .ts-textarea-cols-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2rem; /* vertical 1.5rem, horizontal 2rem */
    margin-bottom: 1.5rem;
}

.ts-plugin .ts-textarea-col textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: monospace;
    font-size: 14px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

@media (max-width: 720px) {
    .ts-plugin .ts-textarea-cols-container {
        grid-template-columns: 1fr;
    }

    .ts-plugin .ts-approver-email-container {
        max-width: 100% !important;
    }
}

.ts-plugin .ts-add-schedule-form {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
    max-width: 100%;
}

.ts-plugin .ts-add-schedule-form label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 0.9rem;
}

.ts-plugin .ts-add-schedule-form label select,
.ts-plugin .ts-add-schedule-form label input[type="time"] {
    min-width: 150px;
    padding: 4px 8px;
    margin-top: 0.25em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.ts-plugin .ts-add-schedule-form label[min-width="150px"] {
    min-width: 150px;
}

.ts-plugin .ts-add-schedule-form input[type="submit"] {
    white-space: nowrap;
    height: 2.4em;
    padding: 0 1.2em;
    cursor: pointer;
    width: auto;
    height: 37.6px !important;
    margin-top: 10px;    
}

@media (max-width: 600px) {
    .ts-plugin .ts-add-schedule-form {
        flex-direction: column;
        align-items: stretch;
    }
    .ts-plugin .ts-add-schedule-form label,
    .ts-plugin .ts-add-schedule-form input[type="submit"] {
        min-width: 100%;
        width: 100%;
        margin-bottom: 0.7em;
    }
}

/* Style the input field with your plugin's input styles */
.ts-plugin .flatpickr-input {
    font-family: inherit;
    font-size: 1rem;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    height: 36.8px;
    width: 100%;
    /* Add transition for focus */
    transition: border-color 0.2s ease-in-out;
}

.ts-plugin .flatpickr-input:focus {
    border-color: #0066cc;
    outline: none;
}

/* Style the calendar dropdown */
.ts-plugin .flatpickr-calendar {
    font-family: inherit;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background: #fff;
    color: #333;
}

/* Style the time container */
.ts-plugin .flatpickr-time {
    border-top: 1px solid #ccc;
    padding-top: 0.5rem;
}

/* Style time inputs (hours/minutes) */
.ts-plugin .numInput, 
.ts-plugin .flatpickr-time input {
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 1rem;
    width: 2.2em;
    box-sizing: border-box;
    text-align: center;
    margin-right: 0.4em;
}

/* On focus, highlight inputs */
.ts-plugin .numInput:focus,
.ts-plugin .flatpickr-time input:focus {
    border-color: #0066cc;
    outline: none;
}

/* Style the AM/PM toggle if enabled */
.ts-plugin .flatpickr-am-pm {
    font-size: 0.9rem;
    margin-left: 0.5em;
    background: #eaeaea;
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    user-select: none;
}

/* Navigation arrows */
.ts-plugin .flatpickr-prev-month, 
.ts-plugin .flatpickr-next-month {
    cursor: pointer;
    color: #666;
    font-weight: bold;
    padding: 0 7px;
    font-size: 1.2em;
}
.ts-plugin .flatpickr-prev-month:hover, 
.ts-plugin .flatpickr-next-month:hover {
    color: #0066cc;
}

/* Highlight selected/hovered days */
.ts-plugin .flatpickr-day:hover,
.ts-plugin .flatpickr-day.selected,
.ts-plugin .flatpickr-day.startRange,
.ts-plugin .flatpickr-day.endRange {
    background: #dec37d;
    border-color: #dec37d;
    color: #4b3b00;
}

/* Today highlight */
.ts-plugin .flatpickr-day.today {
    border-color: #0066cc;
}

/* Clean up number input spin buttons (if needed) */
.ts-plugin input::-webkit-outer-spin-button,
.ts-plugin input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ts-plugin input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

.flatpickr-calendar.open {
    width: 150px;
}

/* Ad-hoc form, reason for request */
.form-row.form-row--2 {
    display: flex;
    gap: 1em; /* adjust space between fields as needed */
    align-items: flex-start; /* aligns input and button tops */
}

.form-element--expand {
    flex: 1 1 auto; /* Makes this element expand to fill available space */
    min-width: 0;
}

.form-element input[type="text"] {
    width: 100%; /* Ensures input inside expander takes full width of its parent */
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .form-row.form-row--2 {
        flex-direction: column;
        gap: 0.5em;
    }
}

/* if style issues occur, copy the below part to theme's custom css */
/* transport schedules page */
.ts-plugin .ts-schedule-filter-form {
    display: flex;
    flex-wrap: wrap;       /* allow wrapping on small screens */
    gap: 0.75rem 1rem;     /* vertical and horizontal spacing */
    align-items: center;
    margin-bottom: 1.5rem;
}

.ts-plugin .ts-schedule-filter-form select,
.ts-plugin .ts-schedule-filter-form input[type="submit"] {
    flex-grow: 1;          /* allow selects and button to grow */
    flex-basis: 150px;     /* minimum comfortable width */
    min-width: 110px;      /* do not shrink below this */
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out;
}

.ts-plugin .ts-schedule-filter-form select:focus,
.ts-plugin .ts-schedule-filter-form input[type="submit"]:focus {
    border-color: #0066cc;
    outline: none;
}

.ts-plugin .ts-schedule-filter-form input[type="submit"] {
    flex-grow: 0;          /* keep button size from growing too much */
    flex-shrink: 0;        /* avoid shrinking too small */
    padding: 9px 1.5em;
    background-color: #dec37d;
    color: #4b3b00;
    font-weight: 700;
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.ts-plugin .ts-schedule-filter-form input[type="submit"]:hover,
.ts-plugin .ts-schedule-filter-form input[type="submit"]:focus {
    background-color: #c7b26a;
    color: #fff;
    outline: none;
}

/* Responsive behavior: stack vertically on narrow viewports */
@media (max-width: 720px) {
    .ts-plugin .ts-schedule-filter-form {
        flex-direction: column;
        gap: 0.75rem 0;
    }

    .ts-plugin .ts-schedule-filter-form select,
    .ts-plugin .ts-schedule-filter-form input[type="submit"] {
        flex-grow: 0;
        flex-basis: auto;
        width: 100%;
        min-width: unset;
        max-width: 100%;
    }
}

/* flatpickr overrides */
/* --- Ensure Flatpickr calendar popup width works correctly --- */
.flatpickr-calendar.open {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* --- Force button text color for visibility --- */
.ts-plugin .ts-submit-button {
    color: #4b3b00 !important;           /* Dark brown text */
    background-color: #dec37d !important;
    font-weight: 400 !important;
        border: 0;
}

.ts-plugin .ts-submit-button:hover,
.ts-plugin .ts-submit-button:focus {
    background-color: #c7b26a !important;
    color: #fff !important;              /* White text on hover/focus */
    outline: none !important;
}

/* --- Make "Reason for request" input stretch fully next to button --- */
.form-row.form-row--2 {
    display: flex !important;
    gap: 1em !important;
    align-items: flex-start !important;
}

.form-element--expand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.form-element--expand input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Override any conflicting widths or inline styles on the submit button container --- */
.form-row.form-row--2 .form-element:not(.form-element--expand) {
    flex: 0 0 150px !important; /* fixed width for button container */
}

/* --- Important: Increase specificity by prepending body.wp-admin if for admin overrides --- */
body.wp-admin .ts-plugin .ts-submit-button,
body.wp-admin .form-row.form-row--2,
body.wp-admin .form-element--expand,
body.wp-admin .form-element--expand input[type="text"],
body.wp-admin .form-row.form-row--2 .form-element:not(.form-element--expand) {
    /* Repeat all above rules here if you want to restrict to admin only */
}