/* ==========================================================================
   forms-theme.css
   Shared visual layer for the three data-entry forms:
     Views/Folio/AddOrEdit.cshtml      (ثبت / ویرایش فولیو)
     Views/Reserve/AddorEdit.cshtml    (ثبت رزرو)
     Views/Reserve/HafReserve.cshtml   (ثبت رزرو نیمروز)

   Loaded AFTER each page's own stylesheet (AddOrEditFolio.css /
   addorEditReserve.css).

   WHY THE FIELDS ARE LIGHT, NOT DARK
   addOrEditFolio.js -> TenLettersValidator() writes an INLINE
   background-color onto every .TenLettersValidate field as the user types:
     #fff     (under 10 chars)
     #3dff57  (exactly 10 - valid)
     #ff2626  (over 10 - invalid)
   Inline styles beat any stylesheet, so a dark field theme would flash
   white the moment someone types. The panels are therefore light cards on
   the dark page, which keeps that feedback legible and correct.

   STRUCTURAL CONTRACTS THAT MUST NOT BE BROKEN
   - #peymentContainer / #peymentContainerPre / #peymentContainerBefore and
     #PassengerContainer are reindexed by their DIRECT children:
        $('#peymentContainer > div').each(function (index) {...})
        $('#PassengerContainer > div').each(function (index) {...})
     No wrapper element may be introduced inside them, and no rule here may
     change which element is the direct child.
   - #frmReserve is serialised wholesale by js.js ($('#frmReserve')
     .serialize()), so every named field must stay inside that form.
   - .confim badges are absolutely positioned against .confim by
     AddOrEditFolio.css; nothing here may add overflow to their ancestors.
   ========================================================================== */

:root {
  --fm-page-ink: #f2f5fa;
  --fm-card: #ffffff;
  --fm-card-soft: #f4f6f9;
  --fm-card-border: #dfe4ec;
  --fm-ink: #1c222b;
  --fm-ink-soft: #5b6472;
  --fm-accent: #3b82f6;
  --fm-accent-deep: #1d4ed8;
  --fm-radius: 14px;
  --fm-radius-sm: 8px;
  --fm-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.75);
}

/* ==========================================================================
   1. Page title
   ========================================================================== */

h3.text-center.text-white {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2.25rem auto 1.5rem auto;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fm-page-ink);
}

h3.text-center.text-white::before,
h3.text-center.text-white::after {
  content: "";
  flex: 1 1 0;
  max-width: 9rem;
  height: 1px;
  background: linear-gradient(
    to var(--fm-line-dir, left),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 100%
  );
}

h3.text-center.text-white::after {
  --fm-line-dir: right;
}

/* ==========================================================================
   2. Form shell + section cards
   `.formShell`, `.formCard`, `.formCardTitle` and `.formActions` are added
   by the views purely as styling hooks — no JS references them.
   ========================================================================== */

.formShell {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto 2rem auto;
  padding: 0 1rem;
}

.formCard {
  background-color: var(--fm-card);
  border: 1px solid var(--fm-card-border);
  border-radius: var(--fm-radius);
  box-shadow: var(--fm-shadow);
  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
  margin-bottom: 1.25rem;
}

.formCardTitle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--fm-ink);
  margin: 0 0 1rem 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--fm-card-border);
}

.formCardTitle::before {
  content: "";
  width: 4px;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--fm-accent);
  flex: 0 0 auto;
}

.formActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   3. Field rows
   The existing markup nests .inputDiv inside .inputGroup. Turning the group
   into a wrapping flex row aligned on flex-end lines every control up on a
   shared baseline regardless of whether it has a label above it.
   ========================================================================== */

.formCard .inputGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-top: 0 !important;
  text-align: right !important;
}

.formCard .inputDiv {
  display: block;
  height: auto;
  margin: 0;
  margin-right: 0;
}

/* Utility margins on fields fight flex-end alignment exactly the way the
   datepicker's `mb-4` did in the list toolbars — zero them inside cards. */
.formCard .inputGroup .mb-3,
.formCard .inputGroup .mb-4,
.formCard .inputGroup .mb-2 {
  margin-bottom: 0 !important;
}

/* AddOrEditFolio.css nudges these two with position/bottom offsets to fake
   alignment under the old inline-block layout. Under flex-end they push the
   controls out of line instead, so the hacks are neutralised. */
.formCard .inputDiv.carModel,
.formCard .description {
  position: static;
  bottom: auto;
  margin-top: 0;
  margin-bottom: 0;
}

.formCard label,
.formCard .form-lable {
  display: block;
  margin: 0 0 0.3rem 0 !important;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fm-ink-soft);
}

/* --- plate number (پلاک خودرو) ---------------------------------------
   The markup is: label + four inputs (4rem/6rem/3rem/4rem) + an "ایران"
   label, inside a div with an inline `width: 300px`. Those four inputs
   total 17rem, so under the block-label rule above the group wrapped onto
   three lines and knocked the whole car row out of alignment.
   Laying it out as a flex row puts the caption on top and the plate on one
   line (the inline width needs !important to override).

   The width is pinned rather than `auto`: as a flex item inside .inputGroup
   an auto width resolves against the free space, which blew the group out
   to ~800px and wrapped the entire car row onto extra flex lines. 22rem is
   the content width (4+6+3+4rem of boxes + gaps + the "ایران" caption). */
.formCard .inputDiv.inputsPekal {
  width: 22rem !important;
  max-width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem;
}

/* caption on its own line, plate fields on the next */
.formCard .inputsPekal > label:first-child {
  flex: 0 0 100%;
  margin-bottom: 0.3rem !important;
}

/* trailing "ایران" sits inline with the boxes, not under them */
.formCard .inputsPekal > label:last-child {
  flex: 0 0 auto;
  margin: 0 0 0.45rem 0 !important;
  font-weight: 700;
  color: var(--fm-ink);
}

.formCard .inputsPekal > .form-control {
  flex: 0 0 auto;
  text-align: center;
}

/* ==========================================================================
   4. Controls
   ========================================================================== */

.formCard .form-control,
.formCard .form-select {
  background-color: #fff;
  border: 1px solid var(--fm-card-border);
  border-radius: var(--fm-radius-sm);
  color: var(--fm-ink);
  font-size: 0.9rem;
  padding: 0.45rem 0.7rem;
  box-shadow: none;
}

/* .form-select paints its chevron as a background image at
   `right .75rem center` and reserves room for it with `padding-right:
   2.25rem`. The shorthand above would flatten that to 0.7rem and the text
   would run underneath the arrow, so the arrow side keeps its gutter.
   These are physical sides on purpose: this project loads the LTR
   bootstrap.min.css under dir="rtl", so the chevron stays on the physical
   right. */
.formCard .form-select {
  padding-right: 2.25rem;
  padding-left: 0.7rem;
}

.formCard .form-control::placeholder {
  color: #9aa3b0;
  opacity: 1;
}

.formCard .form-control:focus,
.formCard .form-select:focus {
  border-color: var(--fm-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.formCard .form-control[readonly] {
  background-color: var(--fm-card-soft);
  color: var(--fm-ink-soft);
}

.formCard textarea.form-control {
  min-height: 5.2rem;
  resize: vertical;
}

/* The textareas carry `d-inline-block`, so they sit on the text baseline and
   leave a descender gap under themselves. That gap made the address box ride
   ~8px above the other controls on the same flex-end row. */
.formCard .form-control,
.formCard .form-select,
.formCard textarea {
  vertical-align: bottom;
}

/* Checkboxes sit inline with their label rather than under it. */
.formCard .form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid #9aa3b0;
  vertical-align: middle;
  margin: 0 0.2rem;
}

.formCard .form-check-input:checked {
  background-color: var(--fm-accent);
  border-color: var(--fm-accent);
}

.formCard .inputDiv > label + .form-check-input,
.formCard .inputDiv > .form-check-input + label {
  display: inline-block;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.formCard .btn,
.formActions .btn {
  border-radius: var(--fm-radius-sm);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
}

.formCard .btn-success,
.formActions .btn-success {
  background-color: #15803d;
  border-color: #15803d;
}

.formCard .btn-success:hover,
.formActions .btn-success:hover {
  background-color: #166534;
  border-color: #166534;
}

.formCard .btn-primary,
.formActions .btn-primary {
  background-color: var(--fm-accent);
  border-color: var(--fm-accent);
}

.formCard .btn-primary:hover,
.formActions .btn-primary:hover {
  background-color: var(--fm-accent-deep);
  border-color: var(--fm-accent-deep);
}

.formCard .btn-secondary {
  background-color: #566072;
  border-color: #566072;
}

.btnSubmitFolio,
#btnSubmitReserve,
#btnSubmitHafReserve {
  min-width: 11rem;
  padding: 0.6rem 1.5rem !important;
  font-size: 0.95rem !important;
}

/* ==========================================================================
   6. Repeating rows — payments and companions
   These rows are direct children of the containers the JS reindexes, so the
   styling is applied to `> div` without introducing any element.
   ========================================================================== */

.peyments,
.passengers {
  margin-top: 0.5rem;
}

/* The "افزودن پرداختی" / "افزودن مسافر همراه" button is the first child of
   these blocks and sat flush against the first generated row. Give it its
   own band so the rows read as a list below the action. */
.peyments > .inputDiv:first-child,
.passengers > .inputDiv:first-child {
  display: block;
  margin-bottom: 1rem;
}

#peymentContainer > div,
#peymentContainerPre > div,
#peymentContainerBefore > div,
#PassengerContainer > div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.65rem;
  background: var(--fm-card-soft);
  border: 1px solid var(--fm-card-border);
  border-radius: var(--fm-radius-sm);
  padding: 0.7rem 2.6rem 0.7rem 0.75rem;
  margin-bottom: 0.6rem;
  position: relative;
}

#peymentContainer > div .inputDiv,
#peymentContainerPre > div .inputDiv,
#peymentContainerBefore > div .inputDiv,
#PassengerContainer > div .inputDiv {
  margin: 0;
  height: auto;
}

#peymentContainer > div .mb-3,
#peymentContainerPre > div .mb-3,
#peymentContainerBefore > div .mb-3,
#PassengerContainer > div .mb-3 {
  margin-bottom: 0 !important;
}

#peymentContainer .form-control,
#peymentContainerPre .form-control,
#peymentContainerBefore .form-control,
#PassengerContainer .form-control {
  border: 1px solid var(--fm-card-border);
  border-radius: 6px;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
}

#peymentContainer .form-control:focus,
#peymentContainerPre .form-control:focus,
#peymentContainerBefore .form-control:focus,
#PassengerContainer .form-control:focus {
  border-color: var(--fm-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* Delete affordance pinned to the row's leading edge (RTL: left). */
.deleteButton {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #c0392b;
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  line-height: 1;
}

.deleteButton:hover {
  background-color: rgba(192, 57, 43, 0.12);
}

/* `.confim` keeps its own absolute badge positioning from
   AddOrEditFolio.css — only the row reserves space for it. */
.confim {
  min-width: 2.5rem;
  align-self: center;
}

#titleHasPassengers,
#titleNoPassengers {
  font-size: 0.95rem !important;
  color: var(--fm-ink-soft) !important;
  margin: 0 0 0.6rem 0 !important;
}

/* ==========================================================================
   7. Validation messages
   js.js toggles these spans with .show()/.hide(), so `display` is owned by
   the script — only colour and spacing are set here.
   ========================================================================== */

.frmReserveValidation,
.frmReserveValidationHafDay {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-top: 0.75rem;
}

.frmReserveValidation span,
.frmReserveValidationHafDay span {
  color: #b91c1c !important;
  font-size: 0.88rem !important;
  font-weight: 700;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: var(--fm-radius-sm);
  padding: 0.4rem 0.8rem;
  margin: 0 0 0 0.5rem !important;
}

/* ==========================================================================
   8. Page-specific bits
   ========================================================================== */

/* Reserve/AddorEdit — the day-count stepper */
.UpDownArrow {
  display: inline-flex;
  gap: 0.25rem;
  vertical-align: bottom;
}

.UpDownArrow span {
  background-color: #566072;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.42rem 0.7rem;
  top: 0;
  position: static;
  border-radius: var(--fm-radius-sm);
  line-height: 1.2;
}

.UpDownArrow span:hover {
  background-color: #6b7688;
}

/* Reserve/HafReserve — the read-only room/date banner */
.hafReserveInfo {
  background-color: var(--fm-card-soft) !important;
  color: var(--fm-ink) !important;
  border: 1px solid var(--fm-card-border);
  border-radius: var(--fm-radius-sm);
  padding: 0.85rem 1rem !important;
  font-size: 0.95rem !important;
}

.hafReserveInfo .inputHafReserveInfo {
  background-color: #fff !important;
  color: var(--fm-ink) !important;
  border: 1px solid var(--fm-card-border);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font-weight: 700;
}

/* Folio/AddOrEdit — the رزرو / پیش‌رزرو / خارجی switch row.
   The view used `transform:scale(1.12) translate(-9%,0)` to fake sizing;
   that inline transform is removed in the view itself, so this is a plain
   toolbar now. */
.folioModeSwitch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
}

.folioModeSwitch label {
  display: inline-block !important;
  margin: 0 !important;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fm-ink);
}

.folioModeSwitch .form-check-input {
  margin: 0 0.35rem 0 0 !important;
}

/* The old layout pushed the whole folio form off-centre. */
.mainContainerFolio {
  margin-right: 0;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media only screen and (max-width: 1200px) {
  h3.text-center.text-white {
    font-size: 1.15rem;
    margin: 1.5rem auto 1rem auto;
  }

  h3.text-center.text-white::before,
  h3.text-center.text-white::after {
    max-width: 3rem;
  }

  .formCard {
    padding: 1rem;
  }
}

@media only screen and (max-width: 768px) {
  .formCard .inputGroup {
    gap: 0.65rem;
  }

  .formCard .inputDiv,
  .formCard .form-control,
  .formCard .form-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  #peymentContainer > div,
  #peymentContainerPre > div,
  #peymentContainerBefore > div,
  #PassengerContainer > div {
    padding-left: 0.75rem;
    padding-top: 2.4rem;
  }

  .deleteButton {
    top: 0.5rem;
    transform: none;
  }
}