/* ==========================================================================
   Admin area shared helpers
   --------------------------------------------------------------------------
   Every /admin/* view is server-rendered Bootstrap 5. These helpers keep the
   admin pages consistent across viewports:

   - .admin-head ......... page title + action button row (wraps on phones)
   - .admin-tabs-scroll .. horizontally scrollable nav-tabs (6-tab bars)
   - .admin-table ........ desktop table that never squeezes: min-width plus
                           a word-break override. The global mobile rule in
                           v2.css sets `overflow-wrap: anywhere` on
                           .table-responsive (inherited by cells), which broke
                           words letter-by-letter on narrow tables. Direct
                           td/th rules beat inheritance, so tables scroll
                           intact instead of breaking mid-word.
   - .admin-stat ......... compact stat cards (2 per row on phones)
   ========================================================================== */

.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.admin-head h1 {
    margin-bottom: 0;
}

/* Scrollable tab bar: tabs keep their width, the bar scrolls.
   Mirrors the user-area .pill-group behavior (see v2.css §22):
   proximity snap so a tab never rests half-cut, hidden scrollbar,
   momentum scrolling on iOS, edge fades painted by JS
   (.can-left/.can-right), and the active tab auto-centered on load
   and on every tab switch (see inline script on the reports page). */
.admin-tabs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-bottom: 1.5rem;
    scroll-snap-type: x proximity;
    --admin-tabfade: 26px;
    -webkit-mask-image: linear-gradient(to right, #000, #000);
    mask-image: linear-gradient(to right, #000, #000);
}

.admin-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.admin-tabs-scroll.can-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--admin-tabfade)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--admin-tabfade)), transparent);
}

.admin-tabs-scroll.can-left {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--admin-tabfade));
    mask-image: linear-gradient(to right, transparent, #000 var(--admin-tabfade));
}

.admin-tabs-scroll.can-left.can-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--admin-tabfade), #000 calc(100% - var(--admin-tabfade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--admin-tabfade), #000 calc(100% - var(--admin-tabfade)), transparent);
}

.admin-tabs-scroll .nav-tabs {
    flex-wrap: nowrap;
    margin-bottom: 0;
    min-width: max-content;
}

.admin-tabs-scroll .nav-tabs .nav-link {
    white-space: nowrap;
    scroll-snap-align: start;
}

/* Desktop tables: intact content, horizontal scroll as a last resort. */
.admin-table {
    min-width: 620px;
}

.admin-table > thead > tr > th {
    white-space: nowrap;
}

.admin-table > thead > tr > th,
.admin-table > tbody > tr > td {
    word-break: normal;
    overflow-wrap: break-word;
}

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

/* Stat cards: readable numbers on every viewport. */
.admin-stat .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.admin-stat .stat-label {
    font-size: 0.8125rem;
}

@media (max-width: 575.98px) {
    .admin-stat .stat-value {
        font-size: 1.375rem;
    }
}

/* Accordion headers with badges must wrap instead of overflowing. */
.admin-accordion .accordion-button {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-accordion .accordion-button > span:first-child {
    min-width: 0;
}

/* Mobile list cards share one neutral shape. */
.admin-card-list .card-title {
    overflow-wrap: break-word;
}

.admin-card-list .admin-card-meta {
    overflow-wrap: break-word;
}

.admin-card-list .admin-card-meta a {
    overflow-wrap: anywhere;
}