@use "sass:meta";
// bs variables
$grid-gutter-width: 1.5rem;
$border-radius: .425rem;
$btn-border-width: var(--bs-border-width);

$form-file-button-bg: var(--bs-body-bg);
$form-file-button-hover-bg: var(--pngx-bg-alt);

@import "node_modules/bootstrap/dist/css/bootstrap.css";
@include meta.load-css("theme");
@import "@ng-select/ng-select/themes/default.theme.css";
@include meta.load-css("print");

// re-created bootstrap styles
.mt-n2 {
  margin-top: -0.5rem;
}
.me-n2 {
  margin-right: -0.5rem;
}
.me-n3 {
  margin-right: -1rem;
}
.mb-n2 {
  margin-bottom: -0.5rem;
}
.ms-n1 {
  margin-left: -0.25rem;
}
.ms-n2 {
  margin-left: -0.5rem;
}
.my-n2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 2400px
);

:root {
  --bs-border-radius: #{$border-radius};

  @each $name, $value in $grid-breakpoints {
    --bs-breakpoint-#{$name}: #{$value};
  }
}

// Paperless-ngx styles
body {
  --pngx-body-font-size: 0.875rem;
  --pngx-sidebar-expanded-width: clamp(15rem, 16.66666667vw, 20rem);
  font-size: var(--pngx-body-font-size);
  height: 100vh;
  letter-spacing: -0.005em;
}

* {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card,
.dropdown-menu,
.modal-content,
.popover {
  --bs-card-border-color: color-mix(in srgb, var(--bs-border-color) 72%, transparent);
  border-radius: .55rem;
}

.card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .035);
}

.btn {
  --bs-border-radius-sm: #{$border-radius};
  font-weight: 500;
}

.pagination, .input-group {
  --bs-border-radius-sm: #{$border-radius};
}

@media(min-width: 768px) {
  .col-slim {
    padding-left: calc(56px + $grid-gutter-width) !important;
  }

  .col-sidebar-expanded {
    flex: 0 0 auto;
    width: calc(100% - var(--pngx-sidebar-expanded-width));
  }

  .offset-sidebar-expanded {
    margin-left: var(--pngx-sidebar-expanded-width);
  }
}

svg.logo {
  .leaf {
    fill: var(--bs-primary) !important;
  }
  .text {
    fill: var(--bs-body-color) !important;
  }
}

.navbar.bg-primary {
  --bs-primary: hsl(var(--pngx-primary),var(--pngx-primary-lightness));
  --bs-primary-rgb: var(--bs-primary);
}

.border {
  border-color: var(--bs-border-color) !important;
}

.border-end {
  border-right: 1px solid var(--bs-border-color) !important;
}

.border-start {
  border-left: 1px solid var(--bs-border-color) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.nav-link, .list-group-item {
  color: var(--bs-body-color);
}

.list-group-item .btn-link,
table .btn-link {
  font-size: 1em;
}

.fs-7 {
  font-size: 0.75rem !important;
}

.bg-body {
  background-color: var(--bs-body-bg);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
}

pngx-page-header h3 {
  font-size: 1.5rem;
}

table,
.badge,
.card-info,
.pagination {
  font-variant-numeric: tabular-nums;
}

.bg-primary {
  background-color: var(--bs-primary) !important;
  color: var(--pngx-primary-text-contrast);
}

.bg-darker {
  background-color: var(--pngx-bg-darker) !important;
}

.navbar-brand {
  color: var(--pngx-primary-text-contrast) !important;
}

.navbar .dropdown > .btn {
  color: var(--pngx-primary-text-contrast) !important;
}

.btn-primary {
  color: var(--pngx-primary-text-contrast);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);

  &:hover, &:focus {
    background-color: var(--pngx-primary-darken-5) !important;
    border-color: var(--pngx-primary-darken-5) !important;
  }

  &:disabled, &.disabled {
    color: var(--pngx-primary-text-contrast);
    background-color: var(--pngx-primary-darken-5) !important;
    border-color: var(--pngx-primary-darken-5) !important;
  }
}

.btn-dark {
  --bs-btn-color: var(--bs-gray-600);
  --bs-btn-bg: var(--bs-gray-200);
  --bs-btn-border-color: var(--bs-gray-200);
  --bs-btn-hover-bg: var(--bs-gray-400);
  --bs-btn-hover-border-color: var(--bs-gray-500);
  --bs-btn-active-bg: var(--bs-gray-200);
}

.text-primary {
  color: var(--bs-primary) !important;
}

.btn-outline-primary {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;

  &:hover, &:focus, &.active, &:active {
    background-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;
  }
}

.btn-outline-secondary {
  color: var(--bs-secondary);

  &:hover {
    color: var(--bs-light);
  }
}

.btn:focus,
.btn:active:focus,
.dropdown-item:focus,
.btn-check:focus + .btn,
.form-control:focus,
.form-check-input:focus,
.form-check-radio:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem hsla(var(--pngx-primary), var(--pngx-primary-lightness), var(--pngx-focus-alpha));
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  background-color: var(--bs-primary);
  color: var(--pngx-primary-text-contrast) !important;
}

.form-switch .form-check-input:focus {
  // neutral knob in place of bootstrap's blue, which clashes with the theme colour
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23bbb'/%3e%3c/svg%3e");
}

.nav-item a:focus-visible {
  outline: none;
  background-color: var(--bs-body-bg);
}

a.navbar-brand:focus-visible {
  outline: none;
  color: var(--pngx-primary-darken-5);
}

.dropdown.show {
  > .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
  }

  > .btn-outline-primary {
    color: var(--pngx-primary-text-contrast) !important;
  }
}

a, a:hover,
.btn-link {
  color: var(--bs-primary);
}

a.btn-link:hover,
a.btn-link:active,
a.btn-link:focus-visible,
.btn-link:hover,
.btn-link:active,
.btn-link:focus-visible {
  color: var(--pngx-primary-lighten-10) !important;
  .primary-light & {
    color: var(--pngx-primary-darken-15) !important;
  }
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark::placeholder {
  color: #fff;
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

// Sortable table headers
th[pngxSortable] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  &::after {
    content: '';
    display: inline-block;
    vertical-align: -0.15em;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.25rem;
    // chevron, matched to the bootstrap-icons set used elsewhere in the app
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") no-repeat center / 0.8rem;
    background-color: currentColor;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
  }

  // hint that an unsorted column can be sorted
  &:hover::after {
    opacity: 0.35;
  }
}

.asc,
.des {
  color: var(--bs-primary);
  --bs-table-color-state: var(--bs-primary); // bootstrap sets cell color at higher specificity

  &::after {
    opacity: 1 !important;
  }
}

.asc::after {
  transform: rotate(180deg);
}

.paperless-input-select {
  .ng-select {
    position: relative;
    flex: 1 1 auto;
    margin-bottom: 0;
    min-height: calc(1em + 0.75rem + 5px);
    line-height: 1.5;

    .ng-select-container {
      border-radius: $border-radius;
    }

    .ng-select-container .ng-value-container .ng-input {
      top: 7px;

      input {
        min-width: 10px;
      }
    }

    &.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder,
    .ng-select-container .ng-value-container .ng-placeholder {
      top: 7px;
    }
  }

  .input-group {
    ng-select:not(:last-child) {
      .ng-select-container {
        height: 100%;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}

// ng-select renders the dropdown panel in a CDK overlay outside the component
.ng-dropdown-panel {
  font-size: var(--pngx-body-font-size);

  .ng-dropdown-panel-items .ng-option.ng-option-marked {
    background-color: var(--pngx-bg-darker) !important;
    color: var(--pngx-body-color-accent) !important;
  }

  .ng-dropdown-panel-items .ng-option.ng-option-selected,
  .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
    font-weight: bold;
    background-color: var(--pngx-bg-alt2) !important;
  }
}

.paperless-input-tags {
  .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
    background-color: transparent;
    border-color: transparent;
  }

  .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
    padding-top: 1px;
  }
}

@supports (-webkit-touch-callout: none) {
  input[type="number"],
  input[type="search"],
  input[type="text"],
  select:focus,
  textarea {
    font-size: 16px;
  }
}

.form-control:not(.btn),
input,
select,
textarea,
.form-select:not(.is-invalid):not(:disabled),
.form-check-input,
.ng-select .ng-select-container .ng-value-container .ng-input > input {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  font-size: 0.875rem;

  &:focus {
    background-color: var(--pngx-bg-darker);
    color: var(--bs-body-color);
  }

  @media(max-width: 768px) {
    font-size: 1rem;
  }
}

@media(max-width: 768px) {
  .input-group-sm .btn-sm {
    // accommodate larger font size on mobile
    padding-top: .35rem;
    padding-bottom: .35rem;
  }
}

.input-group .form-control-sm {
  // accommodate larger font size on mobile
  padding-top: .15rem;
  padding-bottom: .15rem;
  min-height: calc(1.3em + 0.5rem + calc(var(--bs-border-width) * 2)) !important;
}

.input-group .btn-outline-secondary {
  border-color: var(--bs-border-color);
}

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

.form-check-input:focus {
  border-color: var(--bs-primary);
}

.form-control:disabled, .form-control[readonly] {
  background-color: var(--pngx-bg-disabled);
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

ul.pagination {
  margin-bottom: 0;
}

.page-link {
  color: var(--bs-secondary);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color) !important;

  &:hover, &:focus {
    background-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;
  }
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  color: var(--bs-light);
}

.page-item.disabled .page-link {
  background-color: var(--pngx-bg-darker);
}

.nav-tabs {
  border-bottom: 1px solid var(--bs-border-color);

  .nav-link {
    color: var(--bs-primary);

    &.active, &:hover {
      border-color: var(--bs-border-color);
      background-color: var(--bs-body-bg);
      color: var(--bs-body-color);
      border-bottom: 1px solid transparent;
    }

    &:focus {
      border-color: var(--bs-border-color);
    }

    &.active:focus, &:active {
      border-bottom: 1px solid transparent;
    }
  }
}

.nav-underline {
  gap: calc(0.5 * var(--bs-nav-underline-gap)) var(--bs-nav-underline-gap);
  .nav-link {
    &.active, &:hover, &:focus {
      color: var(--bs-primary);
    }
  }
}

.ng-select-container,
.ng-select.ng-select-opened > .ng-select-container,
.ng-dropdown-panel,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;

  input:focus {
    background-color: transparent !important;
  }
}

.input-group-text {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

.list-group-item {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);

  &:hover, &:focus {
    background-color: var(--bs-body-bg);
  }

  &:focus {
    color: var(--bs-body-color);
  }
}

.dropdown-menu {
  background-color: var(--bs-body-bg);

  .dropdown-divider {
    border-color: var(--bs-border-color);
  }

  .dropdown-item {
    color: var(--bs-body-color);

    &:hover, &:focus {
      background-color: var(--pngx-bg-darker);
      color: var(--bs-body-color);
    }

    &.active {
      background-color: var(--bs-primary);
      color: var(--pngx-primary-text-contrast);
    }

    &.disabled, &:disabled {
      opacity: 50%;
    }
  }
}

.doc-img-container {
  border: none !important;
  overflow: hidden;

  .doc-img {
    overflow: visible;
  }
}

.card-selected {
  border-color:var(--bs-primary);

  .document-card-check {
    display: block !important;
  }

  .doc-img-container {
    background-color: var(--pngx-primary-faded);
  }
}

table.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-light-rgb);
}

.close {
  color: var(--bs-body-color);
}

.modal .btn-close {
  color: var(--bs-body-color);
}

// Tighten horizontal spacing in modals on small viewports
@media (max-width: 575.98px) {
  .modal {
    --bs-modal-margin: 0.25rem;
    --bs-modal-header-padding-x: 0.5rem;
    --bs-modal-header-padding: var(--bs-modal-header-padding-y) var(--bs-modal-header-padding-x);

    .modal-body {
      padding-inline: 0.5rem;
    }

    .modal-footer {
      padding-inline: 0.25rem;
    }

    .accordion {
      --bs-accordion-btn-padding-x: 0.75rem;
      --bs-accordion-body-padding-x: 0.5rem;
    }

    .card {
      --bs-card-spacer-x: 0.5rem;
    }

    .list-group {
      --bs-list-group-item-padding-x: 0.5rem;
    }
  }
}

// Wider-width modals on small viewports when the content is wide (e.g. landscape)
@media (min-width: 576px) and (max-height: 700px) {
  .modal {
    --bs-modal-margin: 0.5rem;
  }

  .modal-dialog {
    max-width: min(var(--bs-modal-width), calc(100% - 1rem));
  }

  .modal-lg {
    --bs-modal-width: 800px;
  }

  .modal-xl {
    --bs-modal-width: 1140px;
  }
}

.toast {
  --bs-toast-max-width: var(--pngx-toast-max-width);
}

.alert-primary {
  --bs-alert-color: var(--bs-primary);
  --bs-alert-bg: var(--pngx-primary-faded);
  --bs-alert-border-color: var(--bs-primary);
}

.alert-danger {
  color: var(--bs-body-color);
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.progress {
  background-color: var(--bs-body-bg);

  .text-bg-primary {
    background-color: var(--bs-primary) !important;
  }
}

.ngb-dp-header,
.ngb-dp-weekdays,
.ngb-dp-month {
  background-color: var(--bs-body-bg);
}

.popover {
  background-color: var(--pngx-bg-alt);
  .popover-header {
    background-color: var(--pngx-bg-alt);
  }
  .popover-header,
  .popover-body {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
  }
}

// Tour
.tour-active .popover {
  min-width: 360px;
  margin: 0 .25rem .25rem !important;
}

body.tour-active .row.sticky-top,
body.tour-active .sidebar {
  z-index: inherit !important;
}

.tour-step {
  .popover-header {
    --bs-popover-header-padding-y: .75rem;
  }

  .popover-body {
    // reset ngx-ui-tour overrides
    padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x) !important;
  }
}

.nav-item.touranchor--is-active a {
  font-weight: bold !important;
  color: var(--bs-primary);
}

// fix popover carat colors
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] {
  border-left-color: var(--pngx-bg-alt);
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] {
  border-right-color: var(--pngx-bg-alt);
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] {
  border-top-color: var(--pngx-bg-alt);
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] {
  border-bottom-color: var(--pngx-bg-alt);
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^=bottom] .popover-header::before {
  border-bottom-color: var(--pngx-bg-alt);
}

// Bootstrap 5 tweaks
a.badge {
  text-decoration: none;
}

.btn-link {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-group-xs {
  > .btn {
    padding: 0.2rem 0.25rem;
    font-size: 0.675rem;
    line-height: 1.2;
    border-radius: 0.15rem;
  }

  > .btn:not(:first-child):not(:nth-child(2)) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

code {
  color: var(--pngx-body-color-accent)
}

.accordion {
  --bs-accordion-btn-bg: var(--bs-light);
  --bs-accordion-btn-color: var(--bs-primary);
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-light);
  --bs-accordion-active-color: var(--bs-primary);
  --bs-accordion-active-bg: var(--pngx-bg-alt);
}

.accordion-button::after {
  filter: invert(0.5) saturate(0);
}

.accordion-button {
  font-size: var(--pngx-body-font-size);
}

.me-1px {
  margin-right: 1px !important;
}

.cdk-drag-placeholder {
  opacity: .5;
}

.whitespace-preserve {
  white-space: preserve;
}

/* Animate items as they're being sorted. */
.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

/* Animate an item that has been dropped. */
.cdk-drag-animating {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}

.hidden-button-container {
  button {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  &:hover {
    button {
      opacity: 1;
      pointer-events: initial;
    }
  }
}

// pdfjs
canvas.hiddenCanvasElement {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  height: 0;
  width: 0;
}

// bs icons
.btn-sm i-bs svg {
  vertical-align: text-bottom;
}

.document-card {
  overflow: hidden;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  &:hover:not(.card-selected) {
    border-color: var(--pngx-card-hover-border);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
  }

  .document-card-check {
    border-color: var(--pngx-card-hover-border) !important;
  }

  .card-footer i-bs svg {
    vertical-align: middle;
  }
}

// fixes for buttons in preview popup
.btn-group pngx-preview-popup:not(:last-child) {
  // Prevent double borders when buttons are next to each other
  > .btn {
    margin-left: calc(#{$btn-border-width} * -1);
  }
  > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.btn-group pngx-preview-popup:not(:first-child) {
  > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.btn-group pngx-preview-popup {
  position: relative;
  flex: 1 1 auto;

  > .btn {
    display: block;
  }
}
