@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --kanisa-font: 'Plus Jakarta Sans', Arial, sans-serif;
  --kanisa-active: #5d87ff;
  --kanisa-active-hover: #4b73dc;
  --kanisa-active-soft: #edf2ff;
  --kanisa-ui-text: #263246;
  --kanisa-ui-muted: #667386;
  --kanisa-ui-border: #dfe6ef;
}

html,
body,
button,
input,
select,
textarea,
.tooltip,
.popover,
.dropdown-menu,
.select2-container,
.select2-dropdown,
.flatpickr-calendar {
  font-family: var(--kanisa-font) !important;
}

body {
  color: var(--kanisa-ui-text);
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  text-rendering: optimizeLegibility;
}

/* Keep the right panel close to the sidebar instead of centring a narrow canvas. */
body.kanisa-ui-ready .body-wrapper > .container,
body.kanisa-ui-ready .body-wrapper > .container-fluid,
body.kanisa-ui-ready .body-wrapper > .container-lg,
body.kanisa-ui-ready .body-wrapper > .container-md,
body.kanisa-ui-ready .body-wrapper > .container-sm,
body.kanisa-ui-ready .body-wrapper > .container-xl,
body.kanisa-ui-ready .body-wrapper > .container-xxl {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 18px !important;
  padding-left: 18px !important;
}

.records-shell,
.expense-workspace,
.structure-workspace {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Use the active sidebar blue consistently. */
body.kanisa-ui-ready {
  --kanisa-primary: var(--kanisa-active);
  --kanisa-primary-hover: var(--kanisa-active-hover);
  --kanisa-primary-soft: var(--kanisa-active-soft);
  --kanisa-primary-border: #becdff;
  --rc-primary: var(--kanisa-active);
  --rc-primary-soft: var(--kanisa-active-soft);
  --expense-primary: var(--kanisa-active);
  --expense-primary-soft: var(--kanisa-active-soft);
}

body.kanisa-ui-ready .btn-primary,
body.kanisa-ui-ready .page-item.active .page-link,
body.kanisa-ui-ready .nav-tabs .nav-link.active,
body.kanisa-ui-ready .nav-pills .nav-link.active,
.resource-chip.active,
.expense-tabs .nav-link.active {
  border-color: var(--kanisa-active) !important;
  background: var(--kanisa-active) !important;
  background-image: none !important;
  color: #fff !important;
}

body.kanisa-ui-ready .btn-primary:hover,
body.kanisa-ui-ready .btn-primary:focus,
body.kanisa-ui-ready .btn-primary:active {
  border-color: var(--kanisa-active-hover) !important;
  background: var(--kanisa-active-hover) !important;
  color: #fff !important;
}

/* Do not lose active text when an already selected tab or filter is hovered. */
body.kanisa-ui-ready .nav-tabs .nav-link.active:hover,
body.kanisa-ui-ready .nav-tabs .nav-link.active:focus,
body.kanisa-ui-ready .nav-pills .nav-link.active:hover,
body.kanisa-ui-ready .nav-pills .nav-link.active:focus,
.resource-chip.active:hover,
.resource-chip.active:focus,
.expense-tabs .nav-link.active:hover,
.expense-tabs .nav-link.active:focus,
.category-tab.active:hover,
.category-tab.active:focus {
  border-color: var(--kanisa-active-hover) !important;
  background: var(--kanisa-active-hover) !important;
  color: #fff !important;
}

.category-tab.active {
  border-color: var(--kanisa-active) !important;
  background: #fff !important;
  color: var(--kanisa-active) !important;
  box-shadow: inset 0 -2px 0 var(--kanisa-active) !important;
}

.category-tab.active:hover,
.category-tab.active:focus {
  background: var(--kanisa-active-soft) !important;
  color: var(--kanisa-active-hover) !important;
}

body.kanisa-ui-ready .form-control:focus,
body.kanisa-ui-ready .form-select:focus,
body.kanisa-ui-ready .select2-container--default.select2-container--focus .select2-selection--single,
body.kanisa-ui-ready .select2-container--default.select2-container--focus .select2-selection--multiple,
body.kanisa-ui-ready .select2-container--default.select2-container--open .select2-selection--single,
body.kanisa-ui-ready .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #9db4ff !important;
  box-shadow: 0 0 0 .2rem rgba(93, 135, 255, .12) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--kanisa-active-soft) !important;
  color: #365bbd !important;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
  background: var(--kanisa-active) !important;
  color: #fff !important;
}

/* Native number controls should not show spinner arrows. */
input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.kanisa-amount-source {
  display: none !important;
}

.kanisa-amount-display {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.kanisa-amount-display.is-invalid {
  border-color: #dc6571 !important;
  box-shadow: 0 0 0 .2rem rgba(182, 55, 67, .1) !important;
}

/* White finance surfaces. This also overrides old tab-pane and radial backgrounds. */
.expense-workspace,
.expense-panel,
.expense-tab-body,
.expense-panel .tab-content,
.expense-panel .tab-pane,
.expense-entry-form,
.expense-form-card,
.expense-summary,
.expense-summary-item,
.expense-container-summary,
.expense-container-stat,
#containerModal .modal-content,
#containerModal .modal-body,
#containerModal .modal-header,
#containerModal .modal-footer {
  background: #fff !important;
  background-image: none !important;
}

/* Make every modal usable on short desktops and mobile screens. */
.modal {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
}

.modal-dialog {
  display: flex;
  width: auto;
  min-height: calc(100% - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  align-items: center;
  margin: .75rem auto;
  pointer-events: none;
}

.modal-dialog .modal-content {
  display: flex;
  width: 100%;
  max-height: calc(100dvh - 1.5rem) !important;
  flex-direction: column;
  overflow: hidden !important;
  pointer-events: auto;
}

.modal-dialog .modal-header,
.modal-dialog .modal-footer {
  flex: 0 0 auto;
}

.modal-dialog .modal-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
}

.modal-dialog-scrollable {
  height: auto !important;
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100dvh - 1.5rem) !important;
}

/* Helpful structure-page navigation and richer data cells. */
.structure-quick-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.structure-quick-link {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--kanisa-ui-border);
  border-radius: 14px;
  background: #fff;
  color: var(--kanisa-ui-text);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.structure-quick-link:hover,
.structure-quick-link:focus {
  border-color: #b9c9ff;
  color: var(--kanisa-ui-text);
  box-shadow: 0 10px 24px rgba(38, 50, 70, .07);
  transform: translateY(-1px);
}

.structure-quick-link-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--kanisa-active-soft);
  color: #4167c7;
  font-size: 1rem;
}

.structure-quick-link strong,
.structure-quick-link span {
  display: block;
}

.structure-quick-link strong {
  margin-bottom: 2px;
  font-size: .87rem;
}

.structure-quick-link span {
  color: var(--kanisa-ui-muted);
  font-size: .75rem;
}

.structure-count {
  display: inline-flex;
  min-width: 34px;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid #dce5ff;
  border-radius: 999px;
  background: #f6f8ff;
  color: #3f5fae;
  font-size: .78rem;
  font-weight: 700;
}

.structure-actions .btn {
  display: inline-flex;
  min-width: 38px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1199.98px) {
  .structure-quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body.kanisa-ui-ready .body-wrapper > .container,
  body.kanisa-ui-ready .body-wrapper > .container-fluid,
  body.kanisa-ui-ready .body-wrapper > .container-lg,
  body.kanisa-ui-ready .body-wrapper > .container-md,
  body.kanisa-ui-ready .body-wrapper > .container-sm,
  body.kanisa-ui-ready .body-wrapper > .container-xl,
  body.kanisa-ui-ready .body-wrapper > .container-xxl {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .modal-dialog {
    min-height: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
    margin: .5rem;
  }

  .modal-dialog .modal-content,
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100dvh - 1rem) !important;
  }
}

@media (max-width: 575.98px) {
  .structure-quick-links {
    grid-template-columns: 1fr;
  }
}