/* Global Design Start */
#toastr-container>div {
      opacity: 0.95 !important;
}

table.ashik-table {
      border: 1px dashed #F1F1F4 !important;
      border-collapse: collapse !important;
}

table.ashik-table th,
table.ashik-table td {
      border: 1px dashed #F1F1F4 !important;
      text-align: center !important;
      vertical-align: middle !important;
}

/* Metronic Dark Mode */
html[data-bs-theme="dark"] table.ashik-table {
      border: 1px dashed #2B2B40 !important;
      background-color: #1E1E2D;
}

html[data-bs-theme="dark"] table.ashik-table th,
html[data-bs-theme="dark"] table.ashik-table td {
      border: 1px dashed #2B2B40 !important;
      color: #E1E1EF;
      background-color: transparent;
}

/* Optional: header emphasis */
html[data-bs-theme="dark"] table.ashik-table th {
      color: #FFFFFF;
      background-color: #1B1B29;
}

/* Optional: hover effect (Metronic-like) */
html[data-bs-theme="dark"] table.ashik-table tbody tr:hover {
      background-color: #2A2A3C;
}

/* Global Design End */


/*
| Admin modals
|------------------------------------------------------------------------------
| Bootstrap's .modal-dialog-scrollable derives its height from the .modal
| element, which Metronic's layout does not resolve to the viewport. A vh unit
| has no such dependency, so the body scrolls and the footer stays reachable
| whatever the surrounding layout does.
*/
.sh-modal-scroll .modal-content {
      max-height: calc(100vh - 3rem);
}

.sh-modal-scroll .modal-body {
      max-height: calc(100vh - 15rem);
      overflow-y: auto;
      overscroll-behavior: contain;
}

.sh-modal-scroll--nofoot .modal-body {
      max-height: calc(100vh - 10rem);
}

/* Select2 replaces the native control, so the invalid state has to be
   mirrored onto the rendered element. */
.is-invalid+.select2-container .select2-selection {
      border-color: var(--bs-danger) !important;
}

/* Days the studio cannot take. Struck through rather than merely dimmed:
   Flatpickr's default disabled state is a lighter grey, which on a calendar of
   small grey numbers reads as "slightly further away" rather than as "not
   available" — and on a phone in daylight it reads as nothing at all.

   The number stays legible on purpose. Somebody looking for the 17th needs to
   find it and see that it is unavailable, not fail to find it and assume the
   calendar is broken. So the opacity is raised above Flatpickr's own and the
   line does the work.

   Applies to both closed weekdays and blocked dates, since Flatpickr gives
   them the same class — see App\Support\Availability\Closures. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
      color: var(--bs-gray-500);
      text-decoration: line-through;
      text-decoration-thickness: 1px;
      cursor: not-allowed;
      background: transparent;
      border-color: transparent;
}

/* Days outside the shown month are disabled too, and those SHOULD stay quiet —
   striking them through would fill the first and last rows with lines that say
   nothing about availability. */
.flatpickr-day.prevMonthDay.flatpickr-disabled,
.flatpickr-day.nextMonthDay.flatpickr-disabled {
      text-decoration: none;
      color: var(--bs-gray-300);
}