html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Smoother slide on the offcanvas itself */
.offcanvas.offcanvas-smooth {
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    backface-visibility: hidden;
}

    /* Keep a minimum body height so big content doesn't cause layout thrash while loading */
    .offcanvas.offcanvas-smooth .offcanvas-body {
        contain: layout paint;
        min-height: 50vh;
    }

/* Smoother slide on the offcanvas itself */
.offcanvas.offcanvas-smooth {
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    backface-visibility: hidden;
}

    /* Keep a minimum body height so big content doesn't cause layout thrash while loading */
    .offcanvas.offcanvas-smooth .offcanvas-body {
        contain: layout paint;
        min-height: 50vh;
    }

/* Fade-in wrapper for the panel contents (after we fetch the fragment) */
.canvas-fade {
    opacity: 0;
    transition: opacity .18s ease-in-out;
}

    .canvas-fade.show {
        opacity: 1;
    }

/* Ensure motion isn’t disabled by OS “reduce motion” */
@media (prefers-reduced-motion: reduce) {
    .offcanvas.offcanvas-smooth {
        transition: transform .32s cubic-bezier(.22,.61,.36,1) !important;
    }
}

/* TEST: should make offcanvas header text blue */
#claimDetailsCanvas .offcanvas-title {
    color: #2196f3 !important;
}

/* Claims grid styling */
.claims-grid-wrap {
    max-height: 70vh;
    overflow: auto;
}

.claims-grid {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    .claims-grid thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--bs-body-bg);
        border-bottom: 2px solid var(--bs-border-color);
        text-transform: uppercase;
        letter-spacing: .02em;
        font-size: .72rem;
        color: var(--bs-secondary-color);
    }

    .claims-grid thead tr.group th {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--bs-light);
        border-bottom: 1px solid var(--bs-border-color);
        font-weight: 700;
        font-size: .74rem;
    }

    .claims-grid tbody tr:hover {
        background-color: var(--bs-table-hover-bg);
    }

td.num, th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

th.nowrap, td.nowrap {
    white-space: nowrap;
}

td.ellipsis {
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

tfoot th, tfoot td {
    background: var(--bs-body-bg);
    position: sticky;
    bottom: 0;
    z-index: 1;
}

    tfoot td.num, tfoot th.num {
        font-weight: 700;
    }

/* Compact, scrollable data table */
.data-table-container {
    max-height: 600px; /* adjust to taste */
    overflow-y: auto;
}

/* Smaller font + tighter padding + sticky header */
.data-table-sm td,
.data-table-sm th {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.80rem !important;
    white-space: nowrap;
}

.data-table-sm thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f8f9fa;
    font-weight: 600;
}

/* Numeric columns (right aligned) */
.data-col-money {
    text-align: right;
}

/* Action column (Details button) */
.data-col-action {
    width: 70px;
    text-align: right;
}

/* Visual hint for sortable columns */
.th-sortable {
    cursor: pointer;
}

    .th-sortable::after {
        content: ' ⇅';
        font-size: 0.7rem;
        opacity: 0.6;
    }