/* ====== Css Vars ===== */
:root {
  --tblr-primary: var(--tblr-purple);
  --tblr-primary-rgb: var(--tblr-purple-rgb);
  --tblr-primary-fg: var(--tblr-light);
  --tblr-primary-darken: var(--tblr-purple-darken);
  --tblr-primary-lt: var(--tblr-purple-lt);
  --tblr-primary-lt-rgb: var(--tblr-purple-lt-rgb);
  --tblr-secondary: var(--tblr-orange);
  --tblr-secondary-rgb: var(--tblr-orange-rgb);
  --tblr-secondary-fg: var(--tblr-light);
  --tblr-secondary-darken: var(--tblr-orange-darken);
  --tblr-secondary-lt: var(--tblr-orange-lt);
  --tblr-secondary-lt-rgb: var(--tblr-orange-lt-rgb);
  --tblr-success: var(--tblr-green);
  --tblr-success-rgb: var(--tblr-green-rgb);
  --tblr-success-fg: var(--tblr-light);
  --tblr-success-darken: var(--tblr-green-darken);
  --tblr-success-lt: var(--tblr-green-lt);
  --tblr-success-lt-rgb: var(--tblr-green-lt-rgb);
  --tblr-info: var(--cafe-darken);
  --tblr-info-rgb: var(--cafe-darken-rgb);
  --tblr-info-fg: var(--tblr-light);
  --tblr-info-darken: var(--cafe-darken);
  --tblr-info-lt: var(--cafe);
  --tblr-info-lt-rgb: var(--cafe-rgb);
  --tblr-warning: var(--tblr-yellow);
  --tblr-warning-rgb: var(--tblr-yellow-rgb);
  --tblr-warning-fg: var(--tblr-light);
  --tblr-warning-darken: var(--tblr-yellow-darken);
  --tblr-warning-lt: var(--tblr-yellow-lt);
  --tblr-warning-lt-rgb: var(--tblr-yellow-lt-rgb);
  --tblr-danger: var(--tblr-red);
  --tblr-danger-rgb: var(--tblr-red-rgb);
  --tblr-danger-fg: var(--tblr-light);
  --tblr-danger-darken: var(--tblr-red-darken);
  --tblr-danger-lt: var(--tblr-red-lt);
  --tblr-danger-lt-rgb: var(--tblr-red-lt-rgb);

  --tblr-body-color: var(--tblr-dark);

  --tblr-link-color: var(--tblr-teal);
  --tblr-link-color-rgb: var(--tblr-teal-rgb);
  --tblr-link-hover-color-rgb: var(--tblr-teal-lt);

  --tblr-font-sans-serif: "Nunito Sans", sans-serif;
  --tblr-font-secondary: "Figtree", sans-serif;

  /* set bootstrap vars for plugins */
  --bs-body-bg: var(--tblr-body-bg);
  --bs-border-color-translucent: var(--tblr-border-color-translucent);
  --bs-border-radius: var(--tblr-border-radius);
  --bs-border-width: var(--tblr-border-width);

  /* Altcha variables */
  --altcha-border-width: var(--tblr-border-width);
  --altcha-border-radius: var(--tblr-border-radius);
  --altcha-color-base: #ffffff;
  --altcha-color-border: var(--tblr-border-color-translucent);
  --altcha-color-text: currentColor;
  --altcha-color-border-focus: currentColor;
  --altcha-color-error-text: var(--tblr-danger);
  --altcha-color-footer-bg: var(--tblr-light);
  --altcha-max-width: 260px;
}

:host,
:root {
  margin-left: 0;
}

[data-bs-theme="dark"] {
  --tblr-bg-surface: var(--tblr-primary-darken);
}

/* Utils */
.font-secondary {
  font-family: var(--tblr-font-secondary);
}
.text-cafe {
  color: var(--cafe) !important;
}
.text-cafe-lt {
  color: var(--cafe-lt) !important;
}
.text-cafe-darken {
  color: var(--cafe-darken) !important;
}
.border-cafe {
  border-color: var(--cafe) !important;
}
.border-cafe-lt {
  border-color: var(--cafe-lt) !important;
}
.border-cafe-darken {
  border-color: var(--cafe-darken) !important;
}
.bg-cafe {
  background-color: var(--cafe) !important;
}
.bg-cafe-lt {
  background-color: var(--cafe-lt) !important;
}
.bg-cafe-darken {
  background-color: var(--cafe-darken) !important;
}
.bg-purple-lt,
.bg-orange-lt {
  color: color-mix(
    in srgb,
    var(--tblr-light) calc(var(--tblr-text-opacity, 1) * 100%),
    transparent
  ) !important;
}
.bg-primary-darken {
  background-color: var(--tblr-primary-darken) !important;
}
.bg-secondary-darken {
  background-color: var(--tblr-secondary-darken) !important;
}

/* Globals */

body {
  font-optical-sizing: auto;
}

/* [data-bs-theme="dark"],
  body[data-bs-theme="dark"] [data-bs-theme="light"] {
    --tblr-bg-surface: var(--tblr-primary);
  } */

.navbar-toggler {
  --tblr-navbar-color: var(--tblr-cafe-lt);
}
.navbar-nav {
  --tblr-nav-link-color: var(--tblr-primary);
  --tblr-navbar-active-color: var(--tblr-primary-darken);
  --tblr-icon-color: var(--tblr-primary-lt);
  --tblr-nav-link-hover-color: var(--tblr-primary-lt);
}
.navbar-nav .nav-link.active .nav-link-icon,
.navbar-nav .nav-link.show .nav-link-icon {
  color: var(--tblr-navbar-active-color);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  font-weight: var(--tblr-font-weight-bold);
}

.navbar-nav .nav-link {
  padding: 0.5rem calc(calc(var(--tblr-page-padding) * 2) / 2);
  border-radius: var(--tblr-border-radius);
}

/**
 * Fix to not show scollbar arrows on Chrome browsers
**/
.navbar-vertical.navbar-expand-lg {
  overflow-y: auto;
}

/* ====== Global ===== */
.container-narrow {
  max-width: 60rem;
}

.pdf-viewer {
  width: 100%;
  aspect-ratio: 3/4;
}

.header-dots svg {
  height: 24px;
}
.footer-dots svg {
  height: 16px;
}

/* ====== statuses ===== */
.status {
  --tblr-status-height: auto;
}

/* ====== icons ===== */
.icon g,
.icon path {
  stroke-width: 1.5;
}

.icon-xs {
  --tblr-icon-size: 0.5rem;
  stroke-width: 1;
}
.icon-xl {
  --tblr-icon-size: 7.5rem;
  stroke-width: 1;
}

.avatar .icon.icon-sm {
  --tblr-avatar-icon-size: 1rem;
}

.confirm-icon .icon {
  --tblr-icon-size: 3rem;
}
.modal-alert-icon .icon {
  --tblr-icon-size: 2rem;
}

/* ====== buttons ===== */
.reset-btn {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.btn {
  --tblr-shadow-button: 0 1px 0 rgba(var(--tblr-body-color-rgb), 0.04);
  --tblr-shadow-button-inset: inset 0 -1px 0 rgba(var(--tblr-body-color-rgb), 0.2);
  --tblr-btn-box-shadow: var(--tblr-shadow-button),
    var(--tblr-shadow-button-inset);
}
.btn:not(.btn-icon) > .icon:last-child {
  margin: 0 calc(var(--tblr-btn-padding-x) / -4) 0
    calc(var(--tblr-btn-padding-x) / 2);
}
.btn.btn-sidebar {
  text-transform: uppercase;
  justify-content: start;
  width: 100%;
}
.btn.btn-sidebar > .icon:last-child {
  margin-left: auto;
}

.btn-group-sm > .btn,
.btn-sm {
  --tblr-btn-font-size: 0.875rem;
  --tblr-btn-icon-size: 0.875rem;
  --tblr-btn-padding-y: 0.25rem;
  --tblr-btn-padding-x: 0.5rem;
  --tblr-btn-border-radius: var(--tblr-border-radius);
}

.btn-group-lg > .btn,
.btn-lg {
  --tblr-btn-font-size: 1.1rem;
  --tblr-btn-icon-size: 1.5rem;
}
.btn-reset {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

/* ====== forms ===== */
form.loading,
turbo-frame[busy] {
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0.5;
}

.form-control.disabled,
.form-control:disabled {
  color: var(--tblr-muted);
}

.ts-control {
  padding-top: 0.5625rem !important;
  padding-bottom: 0.5625rem !important;
}

.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
  z-index: 99999 !important;
}

.horizontal-form-container .card-title,
.horizontal-form-container .form-check {
  margin-bottom: 0;
}
.horizontal-form-container .card-title {
  margin-right: 1.5rem;
}

.input-group-vertical .input-group:not(:last-child) .form-control {
  border-bottom-left-radius: 0;
}
.input-group-vertical .input-group:not(:last-child) .input-group-text {
  border-bottom-right-radius: 0;
}
.input-group-vertical .input-group:not(:first-child) .form-control {
  border-top-left-radius: 0;
  border-top: 0;
}
.input-group-vertical .input-group:not(:first-child) .input-group-text {
  border-top-right-radius: 0;
  border-top: 0;
}

@media (min-width: 768px) {
  .checkbox-md-col-3 {
    display: flex;
    flex-wrap: wrap;
    > div {
      width: 33%;
    }
  }
}

/* ====== toast ===== */
.toast {
  --tblr-toast-bg: white;
}

/* ===== accordion ===== */
.accordion-button {
  --tblr-accordion-btn-padding-y: 0.5rem;
  --tblr-accordion-btn-padding-x: 0.75rem;
}

/* Datagrid */
.datagrid-title {
  color: var(--tblr-info);
}

/* Table */
.table-responsive {
  border-top: 1px solid var(--tblr-border-color-translucent) !important;
}
.table.overflow-with-sticky-table thead th:first-child,
.table.overflow-with-sticky-table tbody td:first-child {
  position: sticky;
  z-index: 10;
  left: 0;
  top: 0;
  box-shadow: -1px 0 0 var(--tblr-border-color-translucent) inset !important;
  border-right: none !important;
}
table.overflow-with-sticky-table tbody td:first-child {
  background-color: white;
}

.markdown > table thead th,
.table thead th {
  color: var(--tblr-info);
}

.table-primary {
  --tblr-table-color: var(--tblr-dark);
  --tblr-table-striped-color: var(--tblr-dark);
  --tblr-table-bg: #e8e4f2;
  --tblr-table-striped-bg: #f3f1f8;
  --tblr-table-border-color: #cfe4fa;
}
.table-danger {
  --tblr-table-color: var(--tblr-dark);
  --tblr-table-striped-color: var(--tblr-dark);
  --tblr-table-bg: #f8e4e2;
  --tblr-table-striped-bg: #fcf0ef;
  --tblr-table-border-color: #f2d8db;
}
.table-success {
  --tblr-table-color: var(--tblr-dark);
  --tblr-table-striped-color: var(--tblr-dark);
  --tblr-table-bg: #e1f2f2;
  --tblr-table-striped-bg: #f0f9f9;
  --tblr-table-border-color: #d0e9d9;
}
.table-warning {
  --tblr-table-color: var(--tblr-dark);
  --tblr-table-striped-color: var(--tblr-dark);
  --tblr-table-bg: #f9f5f2;
  --tblr-table-striped-bg: #fdfaf8;
  --tblr-table-border-color: #f0ebe9;
}

.table-striped-3n > tbody > tr:not(:nth-of-type(3n)) > * {
  --tblr-table-bg-type: var(--tblr-table-striped-bg);
}

/** === steps === */
.steps-cafe-lt {
  --tblr-steps-color: var(--cafe-lt);
}
.steps-cafe {
  --tblr-steps-color: var(--cafe);
}
.steps-counter.steps-alpha-counter .step-item::before {
  content: counter(steps, upper-alpha);
}

/** === Tooltip === */
.tooltip {
  --tblr-tooltip-max-width: 400px;
}