/* ==========================================================================
   Shared page furniture: headers, stat strips and tables.

   Every list screen under Members (and anywhere else that shows a table) uses
   these classes, so the pages look like one product rather than fourteen
   separately-built screens.

   Loaded after ba-ui.css, which supplies the dark-theme variables.
   ========================================================================== */

.ba-page {
    --pg-card:   #ffffff;
    --pg-border: #eceef2;
    --pg-text:   #101828;
    --pg-dim:    #667085;
    --pg-soft:   #f7f8fa;
    --pg-accent: #7c3aed;
}

[data-ba-theme="dark"] .ba-page {
    --pg-card:   #1a1f2b;
    --pg-border: #2c3444;
    --pg-text:   #e4e7ec;
    --pg-dim:    #98a2b3;
    --pg-soft:   #222836;
    --pg-accent: #a97ce0;
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.pg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.pg-head-text { min-width: 0; }

.pg-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--pg-text);
    margin: 0 0 .2rem;
    line-height: 1.25;
}

.pg-title-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem;
    flex: 0 0 auto;
    background: linear-gradient(140deg, var(--pg-icon-from, #7c3aed), var(--pg-icon-to, #a78bfa));
}

.pg-subtitle {
    font-size: .85rem;
    color: var(--pg-dim);
    margin: 0;
}

.pg-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Stat strip
   -------------------------------------------------------------------------- */

.pg-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: .85rem;
    margin-bottom: 1.25rem;
}

.pg-stat {
    background: var(--pg-card);
    border: 1px solid var(--pg-border);
    border-radius: 12px;
    padding: .95rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}

.pg-stat-icon {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: #fff; flex: 0 0 auto;
}

.pg-stat-n {
    font-size: 1.3rem; font-weight: 700; line-height: 1.15;
    color: var(--pg-text);
}

.pg-stat-l {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--pg-dim); font-weight: 600;
}

/* --------------------------------------------------------------------------
   Card wrapper
   -------------------------------------------------------------------------- */

.pg-card {
    background: var(--pg-card);
    border: 1px solid var(--pg-border);
    border-radius: 14px;
    /* The card had no padding at all. That was fine while every card held a
       DataTable, which brings its own spacing — but a card holding figures or
       prose put its text hard against the border. Padding now belongs to the
       card, and the two things that genuinely want the full width opt out
       below. */
    padding: 1.15rem 1.35rem;
    overflow: hidden;
}

/* A card whose entire content is one table: the grid goes edge to edge, the way
   a data table should, while the card keeps its shape. */
.pg-card > .pg-card-head:first-child,
.pg-card > .table-responsive:only-child,
.pg-card > table:only-child {
    margin: -1.15rem -1.35rem;
    width: calc(100% + 2.7rem);
}

.pg-card > .pg-card-head:first-child { margin-bottom: 1.15rem; }

.pg-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    padding: 1rem 1.35rem;
    border-bottom: 1px solid var(--pg-border);
}

.pg-card-head h6 {
    margin: 0; font-size: .92rem; font-weight: 600; color: var(--pg-text);
}

.pg-card-body { padding: 1.35rem; }

/* --------------------------------------------------------------------------
   Tables

   The old screens used .text-uppercase on the whole table and text-nowrap on
   30 columns, which forced a horizontal scrollbar the width of three screens
   and made every name SHOUT. These keep the header uppercase and let the body
   read normally.
   -------------------------------------------------------------------------- */

.ba-page table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
    margin: 0 !important;
}

.ba-page table.dataTable thead th {
    background: var(--pg-soft);
    border-bottom: 1px solid var(--pg-border) !important;
    border-top: 0 !important;
    color: var(--pg-dim);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .8rem .9rem;
    white-space: nowrap;
    vertical-align: middle;
}

.ba-page table.dataTable tbody td {
    border-bottom: 1px solid var(--pg-border);
    border-top: 0 !important;
    color: var(--pg-text);
    font-size: .86rem;
    padding: .75rem .9rem;
    vertical-align: middle;
}

.ba-page table.dataTable tbody tr:last-child td { border-bottom: 0; }
.ba-page table.dataTable tbody tr:hover td { background: var(--pg-soft); }

.ba-page table.dataTable.no-footer { border-bottom: 0 !important; }

/* Row photo */
.pg-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--pg-border);
    background: var(--pg-soft);
}

.pg-person {
    display: flex; align-items: center; gap: .65rem;
    min-width: 0;
}
.pg-person-name {
    font-weight: 600; color: var(--pg-text); line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-person-sub {
    font-size: .74rem; color: var(--pg-dim); line-height: 1.2;
}

/* Status pills */
.pg-pill {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: capitalize;
    white-space: nowrap;
}
.pg-pill-green  { background: rgba(18,183,106,.12);  color: #039855; }
.pg-pill-amber  { background: rgba(247,144,9,.14);   color: #b54708; }
.pg-pill-red    { background: rgba(240,68,56,.12);   color: #d92d20; }
.pg-pill-blue   { background: rgba(41,112,255,.12);  color: #175cd3; }
.pg-pill-grey   { background: rgba(102,112,133,.12); color: #475467; }
.pg-pill-purple { background: rgba(124,58,237,.12);  color: #6941c6; }

[data-ba-theme="dark"] .pg-pill-green  { background: rgba(18,183,106,.2);  color: #6ce9a6; }
[data-ba-theme="dark"] .pg-pill-amber  { background: rgba(247,144,9,.2);   color: #fdb022; }
[data-ba-theme="dark"] .pg-pill-red    { background: rgba(240,68,56,.2);   color: #fda29b; }
[data-ba-theme="dark"] .pg-pill-blue   { background: rgba(41,112,255,.2);  color: #84adff; }
[data-ba-theme="dark"] .pg-pill-grey   { background: rgba(152,162,179,.2); color: #cdd3dc; }
[data-ba-theme="dark"] .pg-pill-purple { background: rgba(169,124,224,.2); color: #c4b5fd; }

/* --------------------------------------------------------------------------
   DataTables chrome
   -------------------------------------------------------------------------- */

.ba-page .dataTables_wrapper { padding: 1.1rem 1.35rem 1.25rem; }

.ba-page .dataTables_filter { margin: 0; }
.ba-page .dataTables_filter label { width: 100%; margin: 0; }

.ba-page .dataTables_filter input {
    width: 100%;
    max-width: 300px;
    margin: 0 !important;
    padding: .48rem .8rem .48rem 2.1rem;
    border: 1px solid var(--pg-border);
    border-radius: 9px;
    background: var(--pg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .7rem center;
    color: var(--pg-text);
    font-size: .86rem;
}

.ba-page .dataTables_filter input:focus {
    outline: none;
    border-color: var(--pg-accent);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.ba-page .dt-buttons { display: flex; gap: .4rem; flex-wrap: wrap; }

/*
  buttons.bootstrap5.js rewrites the export button class from `dt-button` to
  `btn btn-secondary`, so styling only .dt-button leaves five grey Bootstrap
  blocks. Both are matched.
*/
.ba-page .dt-buttons .btn,
.ba-page .dt-button {
    padding: .42rem .8rem !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 8px !important;
    background: var(--pg-card) !important;
    color: var(--pg-dim) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.ba-page .dt-buttons .btn:hover,
.ba-page .dt-button:hover {
    background: var(--pg-soft) !important;
    border-color: var(--pg-accent) !important;
    color: var(--pg-text) !important;
}

.ba-page .dataTables_info {
    font-size: .8rem;
    color: var(--pg-dim);
    padding-top: .3rem !important;
}

.ba-page .dataTables_paginate { padding-top: 0 !important; }

.ba-page .dataTables_paginate .paginate_button {
    padding: .34rem .7rem !important;
    margin: 0 .12rem !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--pg-dim) !important;
    font-size: .82rem;
}

.ba-page .dataTables_paginate .paginate_button:hover {
    background: var(--pg-soft) !important;
    border-color: var(--pg-border) !important;
    color: var(--pg-text) !important;
}

.ba-page .dataTables_paginate .paginate_button.current {
    background: var(--pg-accent) !important;
    border-color: var(--pg-accent) !important;
    color: #fff !important;
}

.ba-page .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    pointer-events: none;
}

.ba-page .dataTables_empty {
    padding: 2.75rem 1rem !important;
    color: var(--pg-dim);
    font-size: .88rem;
}

/* Wide tables scroll inside their own card rather than the page. */
.pg-table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Detail modal
   -------------------------------------------------------------------------- */

.pg-modal .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--pg-card);
    color: var(--pg-text);
}

.pg-modal-hero {
    background: linear-gradient(135deg, #4c1d95, #7c3aed);
    padding: 1.6rem 1.5rem 1.35rem;
    text-align: center;
    color: #fff;
}

.pg-modal-hero img {
    width: 92px; height: 92px; border-radius: 50%;
    object-fit: cover; border: 3px solid rgba(255,255,255,.5);
    margin-bottom: .65rem;
}

.pg-modal-hero h5 { color: #fff; margin: 0 0 .15rem; font-weight: 600; }
.pg-modal-hero .sub { color: rgba(255,255,255,.8); font-size: .82rem; }

.pg-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 1.5rem;
}

.pg-detail {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--pg-border);
    font-size: .85rem;
}
.pg-detail dt { color: var(--pg-dim); font-weight: 500; margin: 0; }
.pg-detail dd { color: var(--pg-text); font-weight: 600; margin: 0; text-align: right; }

.pg-detail-section {
    grid-column: 1 / -1;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--pg-accent);
    margin: 1.1rem 0 .1rem;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.pg-empty {
    padding: 3.25rem 1.5rem;
    text-align: center;
    color: var(--pg-dim);
}
.pg-empty-icon { font-size: 2.6rem; opacity: .3; margin-bottom: .6rem; }
.pg-empty h6 { color: var(--pg-text); font-weight: 600; margin-bottom: .3rem; }
.pg-empty p { font-size: .86rem; margin: 0; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.pg-form-section {
    padding-bottom: .6rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--pg-border);
}

.pg-form-section h6 {
    font-size: .8rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--pg-accent); margin: 0 0 .2rem;
}
.pg-form-section p { font-size: .8rem; color: var(--pg-dim); margin: 0; }

@media (max-width: 767.98px) {
    .pg-title { font-size: 1.1rem; }
    .ba-page .dataTables_wrapper { padding: .9rem; }
    .ba-page .dataTables_filter input { max-width: 100%; }
    .pg-actions { width: 100%; }
    .pg-actions .btn { flex: 1 1 auto; }
}


/* ==========================================================================
   A chart that slides

   A year of giving in a phone-width card put the bars four pixels apart with
   the month labels printed over each other. The rail scrolls sideways instead,
   so every bar keeps a readable width however many months there are.
   ========================================================================== */

.chart-rail {
    overflow-x: auto;
    overflow-y: hidden;
    /* Scrolling the chart must not drag the page with it. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
}

.chart-rail::-webkit-scrollbar        { height: 8px; }
.chart-rail::-webkit-scrollbar-thumb  { background: #d8dde5; border-radius: 999px; }
.chart-rail::-webkit-scrollbar-track  { background: transparent; }

.chart-rail-inner {
    position: relative;
    height: 240px;
}

.chart-rail-hint {
    margin-top: .35rem;
    font-size: .72rem;
    text-align: center;
    user-select: none;
}

@media (max-width: 576px) {
    .chart-rail-inner { height: 210px; }
}