.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.unread-notification {
    opacity: 1;
}

.unread-hitbox:hover .unread-notification {
    opacity: 0.25;
}

.read-notification {
    opacity: 0;
}

.read-hitbox:hover .read-notification {
    opacity: 0.25;
}

tr td.table-actions-button {
    opacity: 0;
}
tr:hover td.table-actions-button {
    opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
    tr .table-actions-button {
        opacity: 1 !important;
    }
}

.ts-dropdown {
    background-color: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow);
}

.ts-dropdown-content .option:hover{
    background-color: var(--tblr-gray-100) !important;
}

.ts-dropdown-content {
    background-color: var(--tblr-bg-surface, #fff);
}

.chevron {
    transition: transform .2s ease; 
}

/* When the collapse is open, Bootstrap sets aria-expanded="true" on the toggler */
[data-bs-toggle="collapse"][aria-expanded="true"] .chevron {
    transform: rotate(-180deg); 
}

/* Fixes the layering issue when using a list group and making a row active */
.list-group-item.active {
    z-index: auto !important;
}

/* Hides the star ratings select object */
.gl-star-rating select {
  display: none !important;
}
.gl-star-rating--stars span {
  cursor: pointer;
}

.vr {
  display: inline-block;
  width: 1px;
  height: 1.5rem; /* adjust height as needed */
  background-color: var(--tblr-border-color);
  opacity: 0.25;
  margin: 0 0.75rem; /* horizontal spacing */
  align-self: stretch; /* makes it stretch inside flex containers */
}

/* Make selectgroup items as small as .btn-sm */
.form-selectgroup.form-selectgroup-sm .form-selectgroup-label {
    padding: 0.25rem 0.5rem; /* match btn-sm */
    font-size: 0.75rem;      /* match btn-sm */
    line-height: 1.5;
    border-radius: 0.25rem;  /* match btn-sm */
}

/* Reduce checkbox hit area */
.form-selectgroup.form-selectgroup-sm .form-selectgroup-item {
    margin-right: .25rem; /* optional tighter spacing */
}


.list-group-flush > .list-group-item.list-group-item-dark {
    border-left-width: 3px !important;
    border-left-style: solid !important;
    border-left-color: var(--tblr-dark) !important;
    border-top: 0px solid var(--tblr-border-color) !important;
    border-right: 0px solid var(--tblr-border-color) !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
}

.list-group-flush > .list-group-item.list-group-item-danger {
    border-left-width: 3px !important;
    border-left-style: solid !important;
    border-left-color: var(--tblr-danger) !important;
    border-top: 0px solid var(--tblr-border-color) !important;
    border-right: 0px solid var(--tblr-border-color) !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
}

.list-group-flush > .list-group-item.list-group-item-primary {
    border-left-width: 3px !important;
    border-left-style: solid !important;
    border-left-color: var(--tblr-primary) !important;
    border-top: 0px solid var(--tblr-border-color) !important;
    border-right: 0px solid var(--tblr-border-color) !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
}

.tabs-border-hover:hover {
    border-color: #cacaca !important;
    cursor: pointer;
}

/* Banner Carousel */
@media (min-width: 300px) {
    .banner-margin {
        margin-left: 3.5rem;
        margin-right: 3.5rem;
    }
}
@media (min-width: 768px) {
    .banner-margin {
        margin-left: 5.5rem;
        margin-right: 5.5rem;
    }
}
@media (min-width: 992px) {
    .banner-margin {
        margin-left: 9rem;
        margin-right: 9rem;
    }
}

.vh-75 {
    height: 75vh !important;
}
.vh-80 {
    height: 80vh !important;
}
.vh-85 {
    height: 85vh !important;
}
.vh-90 {
    height: 90vh !important;
}
.vh-95 {
    height: 95vh !important;
}

.sticky-first th:first-child,
.sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 2; /* keeps it above other cells */
    background-color: var(--tblr-body-bg); /* prevents overlap bleed */
}

.avatar-xxl {
  --tblr-avatar-size: 7rem;
  --tblr-avatar-status-size: 1rem;
  --tblr-avatar-font-size: 2rem;
  --tblr-avatar-icon-size: 3rem;
  --tblr-avatar-brand-size: 1.25rem;
}