/* Custom CSS Overrides for Tabler */
/* Target the root HTML element to change these globally */
:root {
    /* The standard radius (used on cards, buttons, inputs) */
    --tblr-border-radius: 0.25rem;

    /* The small radius (used on tiny badges or small inputs) */
    --tblr-border-radius-sm: 0.25rem;

    /* The large radius (used on modals or large layout blocks) */
    --tblr-border-radius-lg: 0.25rem;
}


@media (max-width: 768px) {

    /* Targeting the badge inside the navbar links */
    body .navbar .navbar-nav .nav-link .badge {
        transform: translate(-20%, 50%);
    }

    /* Hide the desktop table headers */
    .table-mobile-cards thead {
        display: none;
    }

    /* Turn each row into a nicely separated card */
    .table-mobile-cards tbody tr {
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid #e6e8e9;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        background-color: #ffffff;
        overflow: hidden;
    }

    /* Turn each cell into a flexbox row */
    .table-mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f4f6f8;
        padding: 0.75rem 1.25rem;
        text-align: right;
        white-space: normal !important;
        /* Allow text to wrap instead of squishing */
    }

    /* Remove border from the last cell in the card */
    .table-mobile-cards tbody td:last-child {
        border-bottom: none;
        background-color: #f8f9fa;
        /* Slight background for the actions row */
        justify-content: flex-end;
        /* Push buttons to the right */
    }

    /* INJECT THE COLUMN HEADERS ON THE LEFT */
    .table-mobile-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: #6c7a91;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    /* Hide the label for the Actions column if you prefer */
    .table-mobile-cards tbody td.td-actions::before {
        display: none;
    }
}
}


@media (min-width: 768px) {

    /* Targeting the badge inside the navbar links */
    body .navbar .navbar-nav .nav-link .badge {
        transform: translate(40%, -50%);
    }
}

@media (min-width: 992px) {

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

/* Perfectly center badges vertically inside text */
.markdown .badge {
    vertical-align: middle;

    /* If it STILL looks a tiny bit low depending on your font, 
     you can force a micro-adjustment by uncommenting the line below: */
    /* transform: translateY(-2px); */
}

/* Force alert titles to sit on the exact same line as the text */
.markdown .alert .alert-title {
    display: inline-block;
    margin-bottom: 0;
    /* Kills the default heading gap below it */
    margin-right: 0.5rem;
    /* Adds a nice space between the title and the text */
    vertical-align: baseline;
    /* Locks it to the exact same baseline as your text */
}

/* Ensure the text element inside the alert also behaves inline */
.markdown .alert>div,
.markdown .alert>p {
    display: inline;
    margin-bottom: 0;
}

/* Override Tabler's default bottom alignment for all icons */
.icon {
    vertical-align: middle;
}

/* If you only want to fix this inside your text blocks, use this instead: */
.markdown .icon {
    vertical-align: middle;
}