@import url("./theme.css");

/* CSS RESET START */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  background: var(--background-color);
  min-height: 100vh;
  padding: 0em;

  & > .navbar {
    max-height: 3.5em;
  }
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

Inherit fonts for form controls */ input,
button,
textarea,
select {
  font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* CSS RESET END */

.navbar-brand {
  font-family: "Tomorrow", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--text-color);
  transition: all 0.3s ease;
  text-shadow: 2px 2px 6px #000000;
}

/* paginator */
.pagination {
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
}

/* reduce all scrollbars widths to 4px */
::-webkit-scrollbar {
  max-width: 5px;
  max-height: 5px;
}

/* Standard scrollbar properties for future compatibility */
html {
  scrollbar-width: thin;
}

* {
  font-family: "Aptos", sans-serif;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--light-grey) transparent;
}

.box-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 80vh;

  * {
    padding: 0.25em;
  }
}

.box-1 {
  background: red;
}
.box-2 {
  background: green;
}
.box-3 {
  background: blue;
}
.box-4 {
  background: purple;
}

.review-split-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1em;

  > div {
    overflow: auto;
  }
}

.table-responsive {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

  .table {
    margin-bottom: 0;
  }
}

tr {
  position: relative;
}

@keyframes fadeIn {
  from {
    box-shadow:
      rgba(14, 30, 37, 0.12) 0px 0px 0px 0px,
      rgba(14, 30, 37, 0.32) 0px 0px 0px 0px;
  }
  to {
    box-shadow:
      rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
      rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  }
}

.review-table-section {
  padding-left: 1em;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color-light);
  --bs-btn-hover-border-color: var(--primary-color-light);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-color-light);
  --bs-btn-active-border-color: var(--primary-color-light);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--primary-color);
  --bs-btn-disabled-border-color: var(--primary-color);
}

.btn-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--admin-color);
  --bs-btn-border-color: var(--admin-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--admin-color), black 20%);
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--admin-color),
    black 20%
  );
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--admin-color), black 20%);
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--admin-color),
    black 20%
  );
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--admin-color);
  --bs-btn-disabled-border-color: var(--admin-color);
}

.btn-outline-primary {
  --bs-btn-color: var(--primary-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary-color);
}

.btn-white {
  --bs-btn-color: black;
  --bs-btn-bg: white;
  --bs-btn-border-color: white;
  --bs-btn-hover-color: black;
  --bs-btn-hover-bg: var(--off-white);
  --bs-btn-hover-border-color: var(--off-white);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: black;
  --bs-btn-active-bg: var(--off-white);
  --bs-btn-active-border-color: var(--off-white);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: black;
  --bs-btn-disabled-bg: white;
  --bs-btn-disabled-border-color: white;
}

.btn-outline-white {
  --bs-btn-color: white;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: white;
  --bs-btn-hover-color: black;
  --bs-btn-hover-bg: white;
  --bs-btn-hover-border-color: white;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: black;
  --bs-btn-active-bg: white;
  --bs-btn-active-border-color: white;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: black;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: white;
  --bs-btn-disabled-box-shadow: none;
}

.text-admin {
  color: var(--admin-color);
}

.table-header-row-th {
  box-shadow: inset 0 0 0 9999px var(--secondary-color-dark) !important;
  align-content: baseline;
}

.statement-info-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr) auto;
  gap: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 0.2em;

  .statement-info {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    background: var(--secondary-color-dark);
    border-radius: 0.25em;
    color: white;

    span {
      font-weight: bold;
    }

    .info-data {
      color: color-mix(in srgb, var(--primary-color), white 25%);
    }
  }
}

.manual-document-controls {
  margin-bottom: 1em;
  width: 100%;

  .btn {
    margin-right: 0.5em;
  }
}

.statement-control-bar {
  display: grid;
  padding: 0.2em;
  width: 100%;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.5em;
  align-items: center;
  color: var(--standard-grey);
  white-space: nowrap;
  background: color-mix(in srgb, var(--secondary-color), transparent 90%);
  margin: 1em 0em;
  border-radius: 0.25em;
  overflow: hidden;

  button {
    border: none;

    &:hover {
      i {
        color: var(--primary-color);
      }
    }
  }
}

.history-split-view {
  & > :first-child {
    border-right: 1px dashed var(--light-grey);
  }
}

.document-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1em 0.5em;
  gap: 0.5em;
  background: color-mix(in srgb, var(--background-color), white 25%);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  border-radius: 0.25em;
  margin-top: 1em;
  margin-bottom: 1.5em;
  margin-left: 0em;
  margin-right: 0em;
}

.document-overview-item {
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-items: center;
  border-left: 1px dashed var(--light-color);
  gap: 0.5em;

  .document-overview-title {
    font-family: "Tomorrow", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-overflow: ellipsis;
    overflow: clip;
    white-space: nowrap;
    font-size: 0.85em;
  }

  .document-overview-value {
    font-size: 1.1em;
    font-family: "Montserrat", sans-serif;
    animation: revealUp 0.8s ease forwards;
    letter-spacing: 2px;
    font-weight: bold;
  }
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.document-overview-item:nth-child(1) {
  border: none;
}

.csv_link_group {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.35em;
}

.recon-tab-controls {
  display: flex;
  gap: 1em;
  flex-direction: row;

  &:empty {
    display: none;
  }
}

.spreadsheet-card-footer {
  overflow: hidden;
  border-radius: 0.25em;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.spreadsheet-card {
  margin-bottom: 1rem !important;
  border: 2px solid white;
  box-shadow:
    rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.recon-tool-container {
  .col.mb-3 {
    display: grid;
    grid-template-rows: 1fr auto;
  }

  .card {
    justify-items: center;
    background: var(--secondary-color-dark);
    color: white;
    border: none;
    text-align: center;
  }
}

.sidenav-sections {
  height: calc(100vh - 5em);
  margin: 0em 1em;
}

.sheet-link {
  color: var(--admin-color);
  text-decoration: underline;
  font-size: 0.85em;
  cursor: pointer;
}

.filter-popup-footer {
  display: flex;
  gap: 0.5em;
}

.recon-tool-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  background: var(--secondary-color-dark);
  color: white;
  border: none;
  text-align: center;

  .recon-tool-data {
    background: var(--secondary-color-dark);
    font-weight: bold;
    font-size: 1.1em;
    width: fit-content;
    border-radius: 0.25em;
  }

  label {
    font-size: 0.875em;
    color: var(--off-white);
  }

  .recon-tool-col {
    display: grid;
    gap: 0.25em;
    justify-items: center;
    padding: 0.5em;
  }
}

.btn-table-link:not(:empty)::after {
  content: "\F1C5";
  justify-content: flex-end;
  font-family: "bootstrap-icons", sans-serif;
  margin-left: 0.5em;
}

/* Pulse Color Animations */
@keyframes pulse-color {
  0% {
    background-color: color-mix(in srgb, var(--primary-color), white 0%);
  }
  50% {
    background-color: color-mix(in srgb, var(--primary-color), white 50%);
  }
  100% {
    background-color: color-mix(in srgb, var(--primary-color), white 75%);
  }
}

.recon-empty-state {
  display: grid;
  width: 100%;
  height: calc(100vh - 18em);
  align-items: center;
  justify-items: center;
  grid-template-rows: 1fr auto auto auto 1fr;

  .empty-state-text {
    font-size: 1.15em;
    color: var(--bs-body-color);
    text-align: center;
    margin-top: 1em;
    font-family: "Tomorrow", sans-serif;
    font-weight: 500;
    font-style: normal;
  }

  .empty-state-subtext {
    color: color-mix(in srgb, var(--secondary-color), var(--bs-body-color) 15%);
  }
}

.overview-currency-rate {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 0.5em;
  color: var(--secondary-color-dark);
  margin-top: 0.5em;
  border: 1px dashed var(--light-grey);
  padding: 1em;
  border-radius: var(--border-radius);

  .currency-rate-label {
    color: color-mix(in srgb, var(--primary-color), black 50%);
    font-weight: bold;
  }

  .currency-rate-value {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--primary-color);
  }
}

.subsection-tabs {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  justify-items: center;
  gap: 1em;
  padding: 0.5em 1em;
  font-size: small;
  border-radius: 0.25em;
  box-shadow:
    0 1px 1px 0px rgba(0, 0, 0, 0.08),
    0 1px 1px rgba(0, 0, 0, 0.08);

  .subsection-tabs-options {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.2em;
    overflow-x: auto;
    border-radius: var(--border-radius);
    background: color-mix(
      in srgb,
      var(--secondary-color-dark),
      transparent 90%
    );
    width: 100%;
    scroll-behavior: smooth;
    overflow-y: hidden;
    box-shadow:
      inset 0 1px 1px 0px rgba(0, 0, 0, 0.12),
      inset 0 1px 1px rgb(0 0 0 / 11%);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      display: none;
    }

    .subsection-tab-item {
      padding: 0.5em 2em;
      border-radius: var(--border-radius);
      font-weight: bold;
      word-wrap: normal;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: clip;
      color: #757e89;
      transition: all 0.3s ease;

      &:hover {
        color: var(--primary-color);
      }

      &.active {
        color: white;
        background: var(--secondary-color-dark);
        box-shadow:
          0 1px 3px rgba(0, 0, 0, 0.12),
          0 1px 2px rgba(0, 0, 0, 0.24);

        &:hover {
          color: white;
        }
      }
    }
  }
}

.recon-date-items {
  display: grid;
  grid-template-columns: repeat(7, auto);
  gap: 0.5em;

  .recon-date-item {
    background: var(--light-grey);
    color: var(--bs-body-color);
    border-radius: 100%;
    padding: 0.25em 0.5em;
    width: 2em;
    height: 2em;
    text-align: center;
    font-size: 0.875em;
    cursor: pointer;

    &.selected {
      background: var(--primary-color);
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
      color: white;
    }
  }
}

.monetary-symbol {
  font-size: 0.75em;
  border: 1px solid black;
  padding: 0.2em;
  margin: 0em 1em;
  border-radius: var(--border-radius);
}

.file-preview-iframe {
  background: url(/static/svg/empty_iframe.svg) center center no-repeat;
  background-size: 15em;
  width: 100%;
  height: calc(100vh - 15em);
  border-radius: 0.25em;
  background-color: var(--background-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass {
  background: color(var(--background-color) 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  container-type: scroll-state;
  box-shadow:
    rgba(0, 0, 0, 0.12) 0px 1px 3px,
    rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.separator {
  height: 1px;
  background-color: rgba(var(--text-color-rgb), 0.1);
  margin: 0.5em 0;
  width: 100%;
}

/* Styles to apply when sticky parent is “stuck” */
@container scroll-state(stuck: top) {
  .navbar-brand,
  i {
    color: color-mix(in srgb, var(--primary-color), black 50%);
  }
}

.form-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: anchor-center;
}

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

.filter-section {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.info-pile {
  background: color-mix(in srgb, var(--primary-color), black 65%);
  color: white;
  border-radius: 0.25em;
  font-size: small;
  padding: 0.25em 0.5em;
  align-content: center;
  height: fit-content;
}

.filter-criteria {
  display: grid;
  background: color-mix(in srgb, var(--background-color), white 25%);
  box-shadow: 0 4px 10px rgb(0 0 0 / 19%);
  border: 1px solid transparent;
  border-color: color-mix(in srgb, var(--background-color), white 25%);

  .filter-criteria-body {
    margin-top: 0.25em;
    height: 12em;
    overflow-y: auto;
    padding: 0.5em;
    font-size: 0.8em !important;

    & input {
      font-size: 0.8em !important;
    }
  }

  .filter-criteria-mini-body {
    padding: 0.5em;
    width: fit-content;
    display: flex;
    gap: 0.25em;
    flex-wrap: wrap;
    font-size: 0.8em !important;
  }

  .filter-criteria-header {
    font-weight: bold;
    padding: 0.5em;
    padding-bottom: 0em;
    font-size: 0.85em !important;

    & > .bi {
      color: color-mix(in srgb, var(--text-color), white 65%);
    }
  }

  .filter-criteria-footer {
    margin-top: 0.5em;
    box-shadow: 0px -4px 15px rgb(0 0 0 / 10%);
    font-size: 0.85em !important;

    & > button {
      color: color-mix(in srgb, var(--primary-color), black 40%);
    }
  }
}

.document-overview.reconciliation-overview {
  box-shadow: none;
  padding: 0em;
  background: transparent;

  .document-overview-item {
    border: 1px solid var(--light-grey);
    border-radius: var(--border-radius);
    padding: 0.5em 0em;

    .document-overview-value {
      color: var(--primary-color);
    }
  }
}

.admin-table-control-btn {
  min-width: 10em;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
  filter: grayscale(1);
}

.loading-text {
  opacity: 0;
  transition-property: opacity; /* Specify the property to transition */
  transition-duration: 0.5s; /* The transition will take 0.5 seconds */
}

/* When the element should become visible */
.loading-text.is-visible {
  opacity: 1;
}

.wobble {
  animation-name: wobble;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes wobble {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(10deg) translateY(-3px);
  }
  50% {
    transform: rotate(0deg) translateY(0);
  }
  75% {
    transform: rotate(-10deg) translateY(-3px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

.recon-link {
  background-repeat: no-repeat !important;
  background-clip: padding-box !important;
  background-position: 0.2em 3.5em !important;

  .recon-link-status {
    display: none;
  }

  &:hover {
    .recon-link-status {
      display: inline !important;
    }
    .recon-link-content {
      display: none !important;
    }
  }
}

.recon-link-short {
  background-repeat: no-repeat !important;
  background-clip: padding-box !important;
  background-position: 0.2em 1.5em !important;
  height: 2em !important;
  overflow: hidden !important;

  .recon-link-status {
    display: none;
  }

  &:hover {
    background-size: 0em 0em !important;

    .recon-link-status {
      display: inline !important;
    }
    .recon-link-content {
      display: none !important;
    }
  }
}