/* Arabic font (Cairo). English keeps Vuexy's default (Public Sans). */
html[lang="ar"] {
  --bs-font-sans-serif: "Cairo", sans-serif;
  --bs-body-font-family: "Cairo", sans-serif;
}

html[lang="ar"] body {
  font-family: "Cairo", sans-serif;
}

/* Keep the brand name clear of the menu collapse toggle */
.app-brand-text.demo {
  font-size: 1.125rem;
}

/* Claim form: keep the calculation in view beside the form on wide screens. */
@media (min-width: 1200px) {
  .claim-calculation-card {
    position: sticky;
    top: 6rem;
  }
}

/* Claim form: fields filled from the read documents. */
.form-control.field-filled,
.form-select.field-filled {
  border-color: var(--bs-success);
  background-color: rgba(var(--bs-success-rgb), 0.08);
}

.form-control.field-uncertain,
.form-select.field-uncertain {
  border-color: var(--bs-warning);
  background-color: rgba(var(--bs-warning-rgb), 0.12);
}

.form-check.field-filled .form-check-label {
  color: var(--bs-success);
}

.form-check.field-uncertain .form-check-label {
  color: var(--bs-warning);
}

/* Claim form: approval items taken from the invoice are locked. */
#claim-form .form-control[readonly] {
  background-color: var(--bs-secondary-bg);
}

/* Claim form: a section a status reason points to. */
.problem-section {
  box-shadow: 0 0 0 2px var(--bs-danger);
}

/* Claims table: a long claim number is cut with "…" (full text in its tooltip). */
.claim-no {
  max-width: 8.5rem;
}

/*
 * A form wrapping a modal's header, body and footer. Bootstrap's
 * modal-dialog-scrollable only scrolls a .modal-body that is a direct child
 * of .modal-content; the form sits in between, so it passes the flex layout
 * on: header and footer stay in place, the body scrolls.
 */
.modal-content > .modal-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.modal-content > .modal-form > .modal-body {
  overflow-y: auto;
  min-height: 0;
}

.modal-content > .modal-form > .modal-header,
.modal-content > .modal-form > .modal-footer {
  flex-shrink: 0;
}

/* A line between the scrolling body and the buttons. */
.modal-content > .modal-form > .modal-footer {
  border-top: var(--bs-border-width) solid var(--bs-border-color);
  padding-top: 1rem;
}