/* ============================================================
   Stat tile cards (used on dashboards and index pages)
   ============================================================ */
.stat-tile h2 {
    font-weight: 700;
    margin-bottom: 0;
}

.stat-tile .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-tile .card-footer {
    background-color: transparent;
    border-top: 1px dashed var(--bs-border-color);
}

/* ============================================================
   "Label" colour variants - solid background, white text.
   The Sneat-style .bg-label-* classes are referenced throughout
   the views (badges, avatar initials, status pills, etc.) but
   only ship in legacy /dist/css theme files that aren't loaded.
   This shim maps them to solid colour backgrounds so existing
   markup renders correctly without changing the views.
   ============================================================ */
.bg-label-primary {
    background-color: rgb(var(--ins-primary-rgb)) !important;
    color: #fff !important;
}

.bg-label-secondary {
    background-color: rgb(var(--ins-secondary-rgb)) !important;
    color: #fff !important;
}

.bg-label-success {
    background-color: rgb(var(--ins-success-rgb)) !important;
    color: #fff !important;
}

.bg-label-danger {
    background-color: rgb(var(--ins-danger-rgb)) !important;
    color: #fff !important;
}

.bg-label-warning {
    background-color: rgb(var(--ins-warning-rgb)) !important;
    color: #212529 !important;
}

.bg-label-info {
    background-color: rgb(var(--ins-info-rgb)) !important;
    color: #fff !important;
}

.bg-label-dark {
    background-color: rgb(var(--ins-dark-rgb)) !important;
    color: #fff !important;
}

.bg-label-light {
    background-color: rgb(var(--ins-light-rgb)) !important;
    color: #212529 !important;
}

/* ============================================================
   Avatar wrapper + initial. The Sneat-style .avatar / .avatar-initial
   classes are referenced throughout the views (table rows, side menu,
   notification items, etc.) but only the size variants (.avatar-sm,
   .avatar-md, ...) ship in app.min.css. This shim adds the base
   wrapper sizing and the initial-content positioning so existing
   markup like:
       <div class="avatar avatar-sm">
           <span class="avatar-initial rounded-circle bg-label-primary">A</span>
       </div>
   renders as a 32px circle with centred initial.
   ============================================================ */
.avatar {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

.avatar-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    color: inherit;
    text-transform: uppercase;
}

/* ============================================================
   Hide Bootstrap's dropdown caret on icon-only triggers (the
   three-dot row buttons in tables). The legacy theme exposed this
   as .hide-arrow but app.min.css only defines .drop-arrow-none -
   so the markup using .hide-arrow falls through. Mirror it.
   ============================================================ */
.hide-arrow::after,
.hide-arrow::before {
    display: none !important;
}