/* ==========================================================================
   homeReserves-theme.css
   Visual layer for Views/Home/Index.cshtml (لیست رزروها).

   Loaded AFTER mainPage.css. Restyling only — no class is renamed, added or
   removed, so every hook in datePickerMainPage.js keeps working:
     .seprator      (added per date-group to the first row of each date)
     .editReserve / .editRoom / .editPrice / .editWebsite
                    (hover injects <i class="bi bi-pen">, click injects
                     .editReserveBox — both positioned by index.css against
                     the cell's `position-relative`, so no rule here may add
                     overflow or a transform to those cells)
     .deleteReserve, .reserveBtn, .foliobtn, .NameFamilyLink
     #tableReserve  (fed straight into XLSX.utils.table_to_book by
                     ExportToExcel — nothing below hides or reorders cells)

   Row status classes come from the controller and keep their meaning:
     .emptyTr .pastTr .fullTr .reserveTr .beforReserveTr
     .HfPastTd .HfFullTd .HfReserveTd .HfBeforeReserveTd

   Perf note: long reserve lists render many rows, so there are no per-row
   transitions or shadows — only flat colour swaps.
   ========================================================================== */

:root {
  /* --- overrides of mainPage.css variables (same semantics, refreshed
         hues, aligned with the reserve-table palette) ------------------- */
  --colorPast: #14181f;
  --colorPastHover: #3b424d;
  --colorFull: #0b5d2b;
  --colorFullHover: #2f8c52;
  --colorReserve: #8c1122;
  --colorReserveHover: #b3444f;
  --colorBeforeReserve: #4a067a;
  --colorBeforeReserveHover: #7c50a0;
  --colorWhite: #f7f9fc;
  --borderColor1: #c3ccd8;
  --rowSeperator: #0ea5e9;

  /* --- local tokens ------------------------------------------------------ */
  --hr-page-ink: #f2f5fa;
  --hr-head: #313947;
  --hr-head-2: #3a4354;
  --hr-head-ink: #e7ecf4;
  --hr-accent: #3b82f6;
  /* Vertical divider before the نیمروز block. Amber because it has to stay
     visible against white, green, dark-red, purple AND near-black rows —
     the original solid black vanished on .pastTr. */
  --hr-halfday-divider: #d97706;
  --hr-radius: 14px;
  --hr-radius-sm: 8px;
}

/* ==========================================================================
   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(--hr-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(--hr-line-dir, left),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 100%
  );
}

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

/* ==========================================================================
   2. Filter toolbar
   ========================================================================== */

/* The Vue datepicker popup must be able to overhang the table below it, so
   this bar gets its own stacking position above the sticky table header
   (z-index 20/21). Do NOT add overflow, transform, filter or
   backdrop-filter here — any of those creates a stacking context that traps
   the popup behind the grid. */
#filterBox {
  position: relative;
  z-index: 300;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--hr-radius);
  padding: 0.85rem 1rem !important;
  margin-bottom: 1rem;

  /* The children are all inline-block via inline styles and therefore
     aligned on the text baseline, which is what threw the datepicker and
     the labelled selects out of line. Flex items get blockified, so the
     inline `display:inline-block` is overridden while the inline `width`
     on each field is preserved. */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

/* Same fix as the folio toolbar: `mb-4` on the datepicker wrapper and
   `mb-3` on the selects are !important utility margins that push those
   controls above the shared baseline. */
#filterBox .mb-4,
#filterBox .mb-3,
#filterBox .mb-2 {
  margin-bottom: 0 !important;
}

#filterBox .btnSearch {
  background-color: #4b5566;
  border-radius: var(--hr-radius-sm);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.45rem 1.25rem;
}

#filterBox .btnSearch:hover {
  background-color: #5a6577;
}

#filterBox .form-control,
#filterBox .form-select {
  background-color: #2b3240;
  border: 1px solid #3d4756;
  border-radius: var(--hr-radius-sm);
  color: #e8ecf3;
  font-size: 0.88rem;
  padding: 0.45rem 0.7rem;
}

/* Same trap as the forms: .form-select reserves `padding-right: 2.25rem`
   for its chevron background-image, and the shorthand above flattens it,
   so option text runs under the arrow. Physical sides, because the LTR
   bootstrap.min.css is used under dir="rtl" and the chevron stays right. */
#filterBox .form-select {
  padding-right: 2.25rem;
  padding-left: 0.7rem;
}

#filterBox .form-control::placeholder {
  color: #8b95a5;
  opacity: 1;
}

#filterBox .form-control:focus,
#filterBox .form-select:focus {
  background-color: #2b3240;
  color: #fff;
  border-color: var(--hr-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Native option lists inherit the dark field otherwise and go unreadable
   on some platforms. */
#filterBox .form-select option {
  background-color: #2b3240;
  color: #e8ecf3;
}

#filterBox label {
  font-size: 0.82rem;
  color: #cdd5e1;
  margin-bottom: 0.15rem !important;
}

#filterBox .form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid #6b7686;
  background-color: #2b3240;
  vertical-align: middle;
  margin-inline-start: 0.15rem;
}

#filterBox .form-check-input:checked {
  background-color: var(--hr-accent);
  border-color: var(--hr-accent);
}

#filterBox .form-check-label {
  font-size: 0.82rem;
  color: #cdd5e1;
}

/* ==========================================================================
   3. The table
   ========================================================================== */

#tableReserve {
  --bs-table-border-color: var(--borderColor1);
  font-variant-numeric: tabular-nums;
  margin-top: 0;
  /* No `overflow` here: it would make the table its own scrollport and the
     sticky thead below would scroll away with it instead of pinning. */
}

#tableReserve > :not(caption) > * > * {
  padding: 0.4rem 0.45rem;
  vertical-align: middle;
}

/* --- header ------------------------------------------------------------
   Two header rows, where row 1 is a mix of rowspan="2" cells and one
   colspan="4" cell. Row 1 pins at 0; row 2 pins directly below it, so its
   offset must equal row 1's rendered height — hence the explicit height on
   row 1 plus `nowrap` on the colspan cell, which would otherwise wrap on
   narrow screens and silently desynchronise the two offsets.
   `border-collapse: collapse` drops borders on sticky cells, so the header
   rules are drawn with inset shadows instead. */

#tableReserve thead th {
  background-color: var(--hr-head) !important;
  color: var(--hr-head-ink);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#tableReserve thead tr:first-child > th {
  position: sticky;
  top: 0;
  z-index: 21;
  height: 2.6rem;
}

#tableReserve thead tr:first-child > th[colspan] {
  white-space: nowrap;
  background-color: var(--hr-head-2) !important;
}

#tableReserve thead tr.hafDayHeader > th {
  position: sticky;
  top: 2.6rem;
  z-index: 20;
  height: 2.1rem;
  background-color: var(--hr-head-2) !important;
  font-size: 0.75rem;
  box-shadow: inset 0 -2px 0 0 var(--hr-accent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* The rowspan="2" cells span both header rows, so they carry the accent
   underline for their own columns. */
#tableReserve thead tr:first-child > th[rowspan] {
  box-shadow: inset 0 -2px 0 0 var(--hr-accent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* --- body --------------------------------------------------------------- */

#tableReserve tbody td,
#tableReserve tbody th {
  font-size: 0.82rem;
}

/* Date-group separator, applied by datePickerMainPage.js to the first row
   of each date. Thinner than the original 7px but in the same colour
   family, so the grouping still reads at a glance.
   The narrow variant is emitted inline by the view when
   ViewBag.thinLineSeprator is set and carries !important — it still wins. */
.seprator {
  border-top: 4px solid var(--rowSeperator) !important;
}

/* Vertical divider in front of the نیمروز block. index.css sets this with
   !important on td, and the two matching th carry it as an inline style —
   inline beats everything short of !important, so both need it here. */
#tableReserve td:nth-child(13),
#tableReserve thead th[colspan],
#tableReserve thead tr.hafDayHeader > th:first-child {
  border-right: 4px solid var(--hr-halfday-divider) !important;
}

/* Empty slots stay light so occupied rows carry the colour. */
.emptyTr {
  background-color: var(--colorWhite);
}

/* Occupied rows: the hover feedback is opacity on the row (from
   mainPage.css) rather than a per-cell repaint, which keeps long lists
   cheap. Nothing added here. */

#tableReserve tbody .priceFormat {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Reserve / delete controls */
#tableReserve .reserveBtn a {
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
}

#tableReserve .reserveBtn a:hover {
  opacity: 0.78;
}

#tableReserve .foliobtn a {
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.8rem;
}

#tableReserve .deleteReserve {
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  line-height: 1;
}

#tableReserve .deleteReserve:hover {
  background-color: rgba(220, 53, 69, 0.18);
}

#tableReserve .NameFamilyLink {
  font-weight: 600;
}

/* The inline edit affordances are positioned by index.css against these
   cells; only the colour of the injected pen icon is softened here. */
#tableReserve .editReserve i.btnEditReserve,
#tableReserve .editWebsite i.btnEditWebsite {
  color: var(--hr-accent);
}

/* ==========================================================================
   4. Refresh button
   ========================================================================== */

.btnRefresh {
  background-color: #f5c518;
  border: 1px solid #d4a707;
  border-radius: 999px;
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.75);
}

.btnRefresh:hover {
  background-color: #ffd633;
  opacity: 1;
}

/* ==========================================================================
   5. 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;
  }

  #filterBox {
    padding: 0.75rem !important;
  }

  #tableReserve tbody td,
  #tableReserve tbody th,
  #tableReserve thead th {
    font-size: 0.75rem;
  }
}