/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

:root {
    --primary-color: 47 227 172;
    --negative-color: 236 57 122;
    --primary-hue: 162;
    --primary-color-hover: 67 247 192;
    --background-secondary: 15 15 16;
    --background-tertiary: 20 20 21;
    --primary-stroke: 36 37 41;
    --secondary-stroke: 36 38 41;
    --text-primary: 242 242 243;
    --text-secondary: 190 191 193;
    --text-tertiary: 112 114 117;
    --background: #06070B;
}

body {
    background-color: var(--background) !important;
    color: rgb(var(--text-secondary)) !important;
}

.bg-dark {
    background-color: var(--background) !important;
    border-bottom: 1px solid rgb(var(--primary-stroke));
    margin-bottom: 10px;
}

.nav-link {
    color: rgb(var(--text-secondary));
}
.nav-link:focus, .nav-link:hover {
    color: rgb(var(--primary-color));
}

.table-link {
    text-decoration: none;
    color: rgb(var(--negative-color));
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.table-link:hover {
    color: rgb(var(--primary-color));
    cursor: pointer;
}

/* Group Key column sizing and content handling */
.table .group-key-col {
    max-width: 10%;
    width: 10%;
}

/* Ensure content inside the Group Key cell doesn’t overflow the capped width */
.table .group-key-col .group-key-content {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    overflow: hidden;
}

.table .group-key-col .group-key-content code {
    min-width: 0; /* allow flex item to shrink */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

/* Pagination styled to match dark table */
.table.table-dark ~ nav .pagination {
    /* Use Bootstrap 5 pagination CSS variables to theme controls */
    --bs-pagination-color: #dee2e6; /* light gray text like table-dark */
    --bs-pagination-bg: #212529; /* table-dark bg */
    --bs-pagination-border-color: #2c3034; /* slightly lighter border */

    --bs-pagination-hover-color: #ffffff;
    --bs-pagination-hover-bg: #2c3034; /* hover a bit lighter */
    --bs-pagination-hover-border-color: #373b3e;

    --bs-pagination-focus-color: #ffffff;
    --bs-pagination-focus-bg: #2c3034;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(47, 227, 172, 0.25);

    /* Active page highlights with brand color (fallback provided) */
    --bs-pagination-active-color: #ffffff;
    --bs-pagination-active-bg: rgb(var(--primary-color, 47 227 172));
    --bs-pagination-active-border-color: rgb(var(--primary-color, 47 227 172));

    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #212529;
    --bs-pagination-disabled-border-color: #2c3034;
}

/* Tighten spacing a bit under tables */
.table.table-dark ~ nav .pagination {
    margin-top: 0.5rem;
}

/* Avatar utilities */
.size-40 {
    width: 40px;
    height: 40px;
}
.avatar-cover {
    object-fit: cover;
}

.input-group-sm .form-control,
.input-group-sm .btn {
    height: calc(1.5em + .5rem + 2px); /* така ж як інпут */
}


/* Tippy.js theme to mirror previous .tg-popover (Bootstrap) styles */
.tippy-box[data-theme~="tg-popover"] {
    background-color: var(--background);
    color: rgb(var(--text-secondary));
    border: 1px solid #6c757d; /* matches --bs-popover-border-color */
    border-radius: .5rem; /* close to Bootstrap popover radius */
    max-width: 300px; /* matches --bs-popover-max-width */
}
.tippy-box[data-theme~="tg-popover"] .tippy-content {
    padding: .5rem 1rem; /* y: --bs-popover-body-padding-y, x: --bs-popover-body-padding-x */
}
/* Arrow color to blend with background; border effect is optional/minimal */
.tippy-box[data-theme~="tg-popover"] > .tippy-arrow {
    color: var(--background); /* sets SVG roundArrow fill */
    filter: drop-shadow(0 0 0 1px #6c757d); /* simulate 1px border like the box */
}

/* Toast border hover/focus styles for messages */
.toast.border-secondary {
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.toast.border-secondary:hover,
.toast.border-secondary:focus,
.toast.border-secondary:focus-within {
    border-color: rgb(var(--primary-color))  !important;
    box-shadow: 0 0 0 0.2rem rgba(153, 200, 188, 0.20);
}

/* Active nav item styling */
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active {
    color: rgb(var(--primary-color)) !important;
    position: relative;
}

.navbar .nav-item.active > .nav-link::after,
.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.25rem;
    height: 2px;
    background-color: rgb(var(--primary-color));
    border-radius: 2px;
}

/* Token tracker toast: two-column 50/50 layout */
.toast .toast-body .tt-two-col {
    display: flex;
    width: 100%;
}
.toast .toast-body .tt-two-col .tt-col-left,
.toast .toast-body .tt-two-col .tt-col-right {
    flex: 0 0 50%;
    max-width: 50%;
}
/* Ensure the right column is pinned to the right edge */
.toast .toast-body .tt-two-col .tt-col-right {
    margin-left: auto;
}

 /* Choices.js */
.choices__item {
    background-color: var(--background) !important;
}
.choices__item:hover {
    background-color: rgb(var(--primary-color)) !important;
    color: var(--background) !important;
}

.btn-primary {
    background-color: rgb(var(--primary-color)) !important;
    border-color: rgb(var(--primary-color)) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: rgba(var(--primary-color). 0) !important;
    border-color: rgba(var(--primary-color). 0) !important;
}

/* AirDatepicker inputs */
.air-datepicker,
.air-datepicker-range {
    border: 1px solid #6c757d !important;
    background-color: var(--background) !important;
    color: rgb(var(--text-secondary)) !important;
}

.air-datepicker:focus,
.air-datepicker-range:focus {
    border-color: rgb(var(--primary-color)) !important;
    box-shadow: 0 0 0 0.2rem rgba(47, 227, 172, 0.25) !important;
}

.air-datepicker::placeholder,
.air-datepicker-range::placeholder {
    color: rgb(var(--text-tertiary)) !important;
}

.air-datepicker--pointer:after {
    background-color: var(--background) !important;
}

.air-datepicker-nav--action:hover,
.air-datepicker-nav--title:hover,
.air-datepicker-cell.-focus- {
    background-color: rgba(var(--background)) !important;
    border-color: rgba(var(--primary-color)) !important;
    border: 1px solid rgb(var(--primary-color)) !important;
}

.air-datepicker-cell.-current- {
    color: rgba(var(--primary-color))
}

.air-datepicker-cell.-selected-{
    background-color: rgba(var(--primary-color)) !important;
}