/* Staff Step 1, the renter & booking screen: a grid of titled boxes like the office's old desktop program.
   Loads after reservation-detail-layout.css and before mobile-enhancements.css. */
/* The car/trip/price strip (.reservation-context) stays: since 2026-10-05 it is a horizontal row above the
   panels (reservation-detail-layout.css), which the user asked for. */
@media screen {
  :root .has-reservation-screen #reservationSummaryPanel > .summary-grid,
  :root .has-reservation-screen #reservationSummaryPanel > .confirmation-section,
  :root .has-reservation-screen #reservationDriversPanel { display: none; }
  :root .has-reservation-screen #reservationSummaryPanel { padding: 0; background: transparent; }
}
.reservation-screen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 14px; }
.reservation-screen > *, .reservation-screen #reservationDrivers > form > * { grid-column: 1 / -1; min-width: 0; }
.screen-box { min-width: 0; margin: 0; padding: 14px 16px 14px; border: 1px solid #c9d1de; border-radius: 14px; background: #fff; }
.screen-box > legend { padding: 0 8px; color: #c0262d; font-size: 17px; font-weight: 700; }
.screen-drivers #reservationDrivers > form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 14px; }
.screen-drivers .screen-box[data-box="licence"], .screen-drivers .screen-box[data-box="intl-licence"] { grid-column: span 3; }
.screen-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 8px 18px; }
.screen-drivers .screen-box:is([data-box="licence"], [data-box="intl-licence"]) .screen-fields { grid-template-columns: minmax(0, 1fr); }
.screen-field { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.screen-field > label, .screen-field > .screen-label { color: #526177; font-size: 13px; font-weight: 600; }
.screen-field :is(input, select, textarea) { width: 100%; min-width: 0; min-height: 36px; margin: 0; padding: 6px 10px; border: 1px solid #c9d1de; border-radius: 8px; background: #fff; font: inherit; font-size: 14px; }
.screen-field textarea { min-height: 60px; resize: vertical; }
.screen-booking-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.screen-booking-facts > .summary-item { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f5f7fa; }
/* The moved parts keep ID rules from reservation-detail-layout.css/reservation-workspace.css (rate editor pinned to
   grid column 2, card styling, animation delays). These overrides outrank them and exist only on the staff screen. */
:root .has-reservation-screen #reservationScreen .screen-booking-facts > :is(#confirmationRateEditor, .summary-item) { grid-column: auto; grid-row: auto; margin: 0; padding: 10px 12px; border-radius: 10px; background: #f5f7fa; border: 0; animation-delay: 0s; }
/* The strip above (.reservation-context) already shows the day count and the saved total, so the staff Booking box drops
   the duration and saved-total tiles. #confirmationDuration and #confirmationTotal stay in the DOM: confirmation.js
   writes them and the strip mirrors them. Customers keep both tiles. The rate editor is then the only tile: one column
   at its natural width, from the start edge, rather than stretched across the box. */
:root .has-reservation-screen #reservationScreen .screen-booking-facts > :is(.summary-duration, .summary-total) { display: none; }
:root .has-reservation-screen #reservationScreen .screen-booking-facts { grid-template-columns: minmax(0, 420px); justify-content: start; }
/* With the trip editor in the strip, the Booking box holds the rate tile and then the assignment controls. */
:root .has-reservation-screen #reservationScreen [data-box="booking"] > .screen-booking-facts { margin-top: 0; }
.screen-box [role="status"] { margin: 8px 0 0; color: #59677b; font-size: 13px; }
.screen-box [role="status"]:empty { display: none; }
.screen-notice { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fdecec; color: #9b1c1c; font-weight: 700; }
@media (max-width: 760px) {
  .reservation-screen, .screen-drivers #reservationDrivers > form { grid-template-columns: minmax(0, 1fr); }
  .screen-drivers .screen-box[data-box] { grid-column: 1 / -1; }
  .screen-field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.screen-primary { display: contents; }
.screen-drivers .screen-box[data-box="renter"], .screen-drivers .screen-box[data-box="drivers"] { grid-column: 1 / -1; }
#reservationDrivers .driver-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); justify-content: start; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; }
#reservationDrivers .driver-columns [data-driver-card] { margin: 0; padding: 10px; border: 1px solid #e1e5ec; border-radius: 10px; }
#reservationDrivers .driver-column-fields { display: grid; gap: 4px; }
#reservationDrivers .driver-column-field { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; }
#reservationDrivers .driver-column-field > .screen-label { color: #526177; font-size: 13px; font-weight: 600; }
#reservationDrivers .driver-column-field :is(input, select) { box-sizing: border-box; width: 100%; height: 36px; min-height: 36px; padding: 5px 8px; border: 1px solid #c9d1de; border-radius: 8px; font: inherit; font-size: 14px; }
@media (max-width: 760px) { #reservationDrivers .driver-columns { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); justify-content: stretch; overflow-x: visible; } #reservationDrivers .driver-column-field { grid-template-columns: minmax(0, 1fr); gap: 4px; } #reservationDrivers .driver-column-field :is(input, select) { height: auto; min-height: 44px; } }
/* The boxes the drivers editor renders sit under #reservationDrivers, whose older fieldset/legend rules (blue 20px
   legends on a grey fill, cards with a 20px padding) would otherwise win. On the staff screen every box looks alike. */
:root .has-reservation-screen #reservationScreen fieldset.screen-box { margin: 0; padding: 14px 16px; border: 1px solid #c9d1de; border-radius: 14px; background: #fff; }
:root .has-reservation-screen #reservationScreen fieldset.screen-box > legend { padding: 0 8px; color: #c0262d; font-size: 17px; font-weight: 700; }
:root .has-reservation-screen #reservationScreen .driver-columns fieldset[data-driver-card] { margin: 0; padding: 10px; border: 1px solid #e1e5ec; border-radius: 10px; background: #fff; }
:root .has-reservation-screen #reservationScreen .driver-columns fieldset[data-driver-card] > legend { padding: 0 6px; color: #172033; font-size: 14px; font-weight: 700; }
:root .has-reservation-screen #reservationScreen #reservationDrivers .fancy-select-trigger { box-sizing: border-box; height: 36px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; }
:root .has-reservation-screen #reservationScreen .driver-column-field .fancy-select { height: 36px; }
:root .has-reservation-screen #reservationScreen .driver-columns .driver-action-row { margin-block: 8px 0; }
:root .has-reservation-screen #reservationScreen .driver-columns .driver-action-row > button { min-height: 36px; padding: 6px 16px; }
/* The custom select (fancy-select.js) takes the whole input track, so it lines up with the inputs beside it. */
:root .has-reservation-screen #reservationScreen :is(.screen-field, .driver-column-field) .fancy-select { width: 100%; min-width: 0; margin: 0; }
:root .has-reservation-screen #reservationScreen :is(.screen-field, .driver-column-field) .fancy-select-trigger { width: 100%; min-width: 0; margin: 0; box-sizing: border-box; }
/* Staff do not print from the booking page (customers print their confirmation): the print button is the actions row's
   only control, so the whole row goes and leaves no empty gap. */
:root .has-reservation-screen .confirmation-actions, :root #confirmationCard.has-step-navigation > .confirmation-actions { display: none; }
/* The Documents box already has its legend; the panel's own heading keeps only the count, at the inline end. */
:root .has-reservation-screen #reservationScreen [data-box="documents"] .section-heading { justify-content: flex-end; }
:root .has-reservation-screen #reservationScreen [data-box="documents"] .section-heading > h2 { display: none; }
:root .has-reservation-screen #reservationScreen .screen-field :is(input, select) { box-sizing: border-box; height: 36px; min-height: 36px; }
:root .has-reservation-screen #reservationScreen .screen-field textarea { box-sizing: border-box; min-height: 60px; }
.screen-trip-type { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.screen-trip-type > button { min-height: 32px; padding: 4px 12px; border: 1px solid #c9d1de; border-radius: 999px; background: #f0f1f5; font: inherit; font-size: 13px; cursor: pointer; }
/* The trip fields match the other boxes: 36px controls, including the custom place selects. */
:root .has-reservation-screen #reservationTripEditor .fancy-select-trigger { width: 100%; min-width: 0; margin: 0; box-sizing: border-box; height: 36px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; }
:root .has-reservation-screen #reservationTripEditor .fancy-select { width: 100%; min-width: 0; margin: 0; height: 36px; }
/* The car/trip/price strip is the trip editor on the staff screen: reservation-screen.js puts #reservationTripEditor in
   its trip column and reservation-trip.js draws Pickup and Return groups there (a heading, the date, the place), hiding
   the column's read-only sections while it does; Change car goes under the car column's class line. Customers keep
   the read-only strip. The strip clips its rounded corners with overflow: hidden, which would also clip the place
   menus, so the staff strip lets them out. */
:root .has-reservation-screen .reservation-context { overflow: visible; }
/* The trip editor and the Assign/Change car button live in the strip; the Booking box holds the rate only. */
:root .has-reservation-screen .reservation-context-trip > #reservationTripEditor { grid-column: 1 / -1; min-width: 0; }
.screen-trip-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.screen-trip-group { display: grid; gap: 6px; min-width: 0; align-content: start; }
:root .has-reservation-screen .reservation-context-trip .screen-trip-group > h3 { margin: 0; }
:root .has-reservation-screen #reservationTripEditor .screen-trip-group :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; min-height: 36px; margin: 0; padding: 6px 10px; border: 1px solid #c9d1de; border-radius: 8px; background: #fff; color: #172033; font: inherit; font-size: 14px; }
#reservationTripEditor > [role="status"] { margin: 8px 0 0; color: #59677b; font-size: 13px; }
#reservationTripEditor > [role="status"]:empty { display: none; }
.reservation-context-car > .screen-trip-change { display: block; margin: 8px auto 0; min-height: 32px; padding: 4px 12px; border: 1px solid #c9d1de; border-radius: 999px; background: #fff; color: #172033; font: inherit; font-size: 13px; cursor: pointer; }
/* Where the car column is a grid (image | name and class), the button sits under the class line, in the text column. */
@media screen and (min-width: 1001px) { .reservation-context-car > .screen-trip-change { grid-column: 2; justify-self: start; margin-inline: 0; } }
@media screen and (max-width: 600px) {
  .reservation-context-car > .screen-trip-change { grid-column: 2; justify-self: start; margin-inline: 0; }
  /* reservation-detail-layout.css hides the trip column on phones; on the staff screen it is the editor, so it shows
     across the strip, under the car and the price, with the two groups stacked. */
  :root .has-reservation-screen .reservation-context-trip { display: grid; grid-column: 1 / -1; order: 1; grid-template-columns: minmax(0, 1fr); padding: 10px; border-top: 1px solid var(--line, #d5d7dc); }
  .screen-trip-groups { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the strip's dates and places take the 44px touch size of the app's other phone controls. */
@media screen and (max-width: 760px) {
  :root .has-reservation-screen #reservationTripEditor .screen-trip-group :is(input, select),
  :root .has-reservation-screen #reservationTripEditor .fancy-select-trigger { height: 44px; min-height: 44px; }
  :root .has-reservation-screen #reservationTripEditor .fancy-select { height: 44px; }
}
/* admin.html New reservation uses the same boxes; the form's own driver box reuses the booking screen's columns. */
.new-reservation-screen { margin-top: 12px; }
.new-reservation-screen > [data-box="customer"], .new-reservation-screen > [data-box="blacklist"] { grid-column: span 3; }
/* The Renter, Licence and International licence boxes (driver-boxes.js) sit in #newReservationPrimary, which is
   display: contents (.screen-primary), so they are grid items of the screen like on the booking page: Renter across
   the row, Licence and International licence side by side with one field column each. */
.new-reservation-screen > .screen-primary > .screen-box { grid-column: 1 / -1; min-width: 0; }
.new-reservation-screen > .screen-primary > .screen-box:is([data-box="licence"], [data-box="intl-licence"]) { grid-column: span 3; }
.new-reservation-screen > .screen-primary > .screen-box:is([data-box="licence"], [data-box="intl-licence"]) .screen-fields { grid-template-columns: minmax(0, 1fr); }
.new-reservation-screen .screen-field :is(input, select) { box-sizing: border-box; height: 36px; min-height: 36px; }
.new-reservation-screen .screen-field textarea { box-sizing: border-box; min-height: 60px; }
/* A problem note (form-problems.js) goes under its control, in the input track, not under the label. */
.new-reservation-screen .screen-field > .field-problem { grid-column: 2; margin: 0; }
/* The booking page's driver columns: each card capped at 340px from the start edge, not stretched across the box. */
#newReservationDrivers.driver-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); justify-content: start; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; }
#newReservationDrivers [data-add-driver] { display: none; }
@media (max-width: 760px) {
  .new-reservation-screen > [data-box], .new-reservation-screen > .screen-primary > .screen-box[data-box] { grid-column: 1 / -1; }
  .new-reservation-screen .screen-field > .field-problem { grid-column: 1; }
  #newReservationDrivers.driver-columns { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); justify-content: stretch; overflow-x: visible; }
}
/* The booking screen's driver-card and field rules are scoped to #reservationDrivers / #reservationScreen; the
   admin form's own driver cards and Blacklist box get the same look here. */
#newReservationDrivers [data-driver-card] { min-width: 0; margin: 0; padding: 10px; border: 1px solid #e1e5ec; border-radius: 10px; background: #fff; }
#newReservationDrivers [data-driver-card] > legend { padding: 0 6px; color: #172033; font-size: 14px; font-weight: 700; }
#newReservationDrivers .driver-column-fields { display: grid; gap: 4px; }
#newReservationDrivers .driver-column-field { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; }
#newReservationDrivers .driver-column-field > .screen-label { color: #526177; font-size: 13px; font-weight: 600; }
#newReservationDrivers .driver-column-field :is(input, select) { box-sizing: border-box; width: 100%; height: 36px; min-height: 36px; padding: 5px 8px; border: 1px solid #c9d1de; border-radius: 8px; font: inherit; font-size: 14px; }
.new-reservation-screen :is(.screen-field, .driver-column-field) :is(.fancy-select, .fancy-select-trigger) { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; }
/* The custom selects match the 36px inputs beside them, in the renter boxes and the driver cards alike. */
@media (min-width: 761px) {
  .new-reservation-screen :is(.screen-field, .driver-column-field) .fancy-select { height: 36px; }
  .new-reservation-screen :is(.screen-field, .driver-column-field) .fancy-select-trigger { height: 36px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; }
}
@media (max-width: 760px) { #newReservationDrivers .driver-column-field { grid-template-columns: minmax(0, 1fr); gap: 4px; } #newReservationDrivers .driver-column-field :is(input, select) { height: auto; min-height: 44px; } }
/* .screen-box [role="status"] above would turn the review total and the availability tone into grey 13px notes. */
.new-reservation-screen .journey-price { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--ink); }
.new-reservation-screen .journey-availability[data-tone="ok"] { color: var(--ink); }
.new-reservation-screen .journey-availability[data-tone="warn"] { color: var(--amber-ink); }
/* admin.html keeps every legend at the shared label size (app-labels.css; tests/app-labels.test.cjs). */
.new-reservation-screen > .screen-box > legend, .new-reservation-screen > .screen-primary > .screen-box > legend { font-size: var(--field-label-size); }
/* The rate tile's own "السعر اليومي للحجز" heading repeats what its current-rate line and field label already say. */
/* …and so does its explanatory hint (VAT included, this booking only, saves automatically). */
:root .has-reservation-screen #reservationScreen #confirmationRateEditor > :is(h2, #reservationRateHint) { display: none; }

/* One compact booking/customer panel; retain the existing editors and autosave behavior. */
:root .has-reservation-screen #reservationScreen .screen-booking-controls { display:grid; grid-template-columns:minmax(240px, .85fr) minmax(0, 1.65fr); gap:20px; align-items:start; }
:root .has-reservation-screen #reservationScreen .screen-booking-controls .screen-booking-facts { display:block; min-width:0; margin:0; }
:root .has-reservation-screen #reservationScreen .screen-booking-controls .screen-booking-facts #confirmationRateEditor { display:grid; grid-template-columns:minmax(0,1fr); padding:0; background:transparent; border:0; border-radius:0; gap:10px; }
:root .has-reservation-screen #reservationScreen .screen-booking-controls #confirmationRateEditor[hidden] { display:none; }
.screen-booking-blacklist { min-width:0; padding-inline-start:20px; border-inline-start:1px solid var(--line, #c9d1de); }
.screen-booking-blacklist > h3 { margin:0 0 10px; font-size:16px; line-height:1.5; color:var(--ink); }
:root .has-reservation-screen #reservationScreen .screen-booking-blacklist .screen-fields { grid-template-columns:minmax(190px, .9fr) minmax(0, 1.1fr); gap:16px; align-items:start; }
:root .has-reservation-screen #reservationScreen .screen-booking-blacklist .screen-field { grid-template-columns:minmax(0,1fr); gap:6px; }
:root .has-reservation-screen #reservationScreen .screen-booking-blacklist .screen-field > label { font-size:13px; line-height:1.5; }
:root .has-reservation-screen #reservationScreen .screen-booking-blacklist textarea { height:40px; min-height:40px; }
:root .has-reservation-screen #reservationScreen .screen-booking-blacklist .fancy-select-trigger { height:40px; min-height:40px; }
:root .has-reservation-screen #reservationScreen .screen-booking-controls .reservation-rate-current { font-size:16px; line-height:1.5; }
:root .has-reservation-screen #reservationScreen .screen-booking-controls .reservation-rate-form { margin:0; }
:root .has-reservation-screen #reservationScreen .screen-booking-controls .reservation-rate-form label { display:block; margin:0 0 6px; line-height:1.5; }
:root .has-reservation-screen #reservationScreen .screen-booking-controls .reservation-rate-field input { height:40px; min-height:40px; }
:root .has-reservation-screen #reservationScreen .screen-booking-controls .reservation-rate-preview:empty { display:none; }
@media (max-width:900px) {
  :root .has-reservation-screen #reservationScreen .screen-booking-controls { grid-template-columns:minmax(0,1fr); gap:16px; }
  .screen-booking-blacklist { padding-inline-start:0; border-inline-start:0; padding-block-start:14px; border-block-start:1px solid var(--line, #c9d1de); }
}
@media (max-width:480px) {
  :root .has-reservation-screen #reservationScreen .screen-booking-blacklist .screen-fields { grid-template-columns:minmax(0,1fr); gap:12px; }
}