:root { --page-bg: color-mix(in srgb, var(--theme-base, #ffffff) 8%, #fff); }
.table thead th { font-size: calc(var(--font-size) - 1px); padding-left:15px; padding-right: 15px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; border-top: none; }
.table tbody td { font-size: var(--font-size); padding-left:15px; padding-right: 15px; }
.table input.form-control {
    border-color: transparent;
    background: transparent;
}
.table input.form-control:focus {
    border-color: #ced4da;
    background: #fff;
}

body {
    font-size: var(--font-size) !important;
}

h1 {
  font-size: calc(var(--font-size) + 14px);
}
h2 {
  font-size: calc(var(--font-size) + 11px);
}
h3 {
  font-size: calc(var(--font-size) + 8px);
}
h4 {
  font-size: calc(var(--font-size) + 5px);
}
h5 {
  font-size: calc(var(--font-size) + 4px);
}
h6 {
  font-size: calc(var(--font-size) + 2px);
}

.small {
    font-size: calc(var(--font-size) - 2px) !important;
}

button,
select,
input {
    font-size: var(--font-size) !important;
}

.btn-sm {
    font-size: var(--font-size) !important;
}

/* Icons (<i>) follow the font-size of whatever they sit in — so an icon in small text is small, in a
   heading is bigger, etc. (No forced +8px; components that want a larger icon set it via their own class,
   e.g. .menu-icon.) */
/* Icons follow the font-size of whatever they sit in (heading, button, body). A component that wants a
   deliberately larger icon sets it on its own class (e.g. .menu-icon, .mp-bell > i). */
i {
    font-size: inherit;
}
/* An icon that is followed by something on its right (a label/span, another element) gets a small gap so
   it doesn't touch the text — needed because our icon buttons are flex with no gap, which collapses the
   whitespace between <i> and its label. An icon that ENDS its parent (icon-only button, or the last thing
   before the closing tag) is :last-child and gets no margin, so it stays centred. Saves hand-adding me-*. */
i:not(:last-child) {
    margin-right: 0.35em;
}

/* Vertically centre icon + label in any icon button / nav item / menu item (all sites). */
.btn:has(i),
.btn-primary:has(i),
.btn-ghost:has(i),
.nav-link:has(i) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dropdown-item:has(i) {
    display: flex;
    align-items: center;
}

/* position */
.position-relative { position: relative; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }

/* text */
.justify-text { text-align: justify; }
.center-text { text-align: center; }
.right-text { text-align: right; }

/* width */
.w-100 { width: 100%; }

/* margin */
.m-0 { margin: 0 !important; }
.mx-20 {
    margin-left: 20px !important;
    margin-right: 20px !important;
}
.mt-0 {
    margin-top: 0px !important;
}
.mt-5 {
    margin-top: 5px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mb-5 {
    margin-bottom: 5px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.py-3 {
    padding-top: 3px;
    padding-bottom: 3px;
}
.py-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}
.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* GRIDS */
.grid { display: grid; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.gap-x-20-y-10 { gap: 20px 10px; }
.gap-30 { gap: 30px; }
.gap-10 { gap: 10px; }
.align-items-start { align-items: start !important; }
.align-items-center { align-items: center !important; }
.justify-content-start { justify-content: start !important; }
.justify-content-between { justify-content: space-between !important; }
.flex-grow-1 { flex-shrink: 1; }
.flex-grow-0 { flex-shrink: 0; }
.flex { display: flex; }


/* link */
/* This resets the link to look exactly like its surrounding text */
.no-link-style, 
.no-link-style:hover, 
.no-link-style:visited, 
.no-link-style:active {
    text-decoration: none; /* Removes the underline */
    color: inherit;        /* Inherits the color of the parent element */
    cursor: pointer;       /* Keeps the pointer cursor so users know it's clickable */
}
/* ============================================================
   Shared design tokens (all 3 sites).
   FONT SIZE: already driven by a single --font-size per site (see each site's
   css/general.css) and the h1..h6/small scale above. COLOR: each site sets ONE
   --primary (and --on-primary); the shades below are derived from it. So a site's
   whole accent palette changes by editing --primary in one place.
   ============================================================ */
:root{
    --primary: #10b981;            /* per-site override (member sets green, etc.) */
    --on-primary: #ffffff;         /* readable text on the primary colour */
    --primary-d1: color-mix(in srgb, var(--primary) 85%, #000);   /* hover / darker */
    --primary-d2: color-mix(in srgb, var(--primary) 70%, #000);   /* pressed / text */
    --primary-tint: color-mix(in srgb, var(--primary) 14%, #fff); /* soft fill */
    --primary-tint-2: color-mix(in srgb, var(--primary) 7%, #fff);/* softer fill */
}

/* ---- Standard tab bar (build with UI.tabs) — theme-aware across all sites ---- */
.ui-tabs{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ui-tab{ font-size:calc(var(--font-size) + 1px); font-weight:600; padding:7px 16px; border-radius:20px; cursor:pointer;
    border:1px solid var(--border, #dde6e0); background:var(--paper, #fff); color:var(--muted, #5a7766);
    display:inline-flex; align-items:center; justify-content:center; gap:6px; line-height:1; user-select:none;
    transition:background .12s ease, color .12s ease, border-color .12s ease; }
.ui-tab:hover{ border-color:var(--theme-base, var(--accent, var(--primary, #15b67c))); }
.ui-tab.on{ background:var(--theme-base, var(--accent, var(--primary, #15b67c)));
    border-color:var(--theme-base, var(--accent, var(--primary, #15b67c))); color:var(--accent-on, var(--on-primary, #fff)); }
.ui-tab-badge{ font-size:calc(var(--font-size) - 3px); font-weight:700; background:rgba(0,0,0,.08); padding:1px 7px; border-radius:10px; min-width:18px; text-align:center; }
.ui-tab.on .ui-tab-badge{ background:rgba(255,255,255,.28); }

/* ---- Phone layout for every table.js listing: each row becomes a labelled card (≤ 767px) ----------------
   table.js stamps data-label="<column label>" on every cell; action columns have an empty label and sit
   right-aligned. Inline per-column widths from column definitions are neutralised so cards stay full width. */
@media (max-width: 767.98px) {
    .table-responsive > table.tbl-stack { display: block; width: 100%; }
    table.tbl-stack thead { display: none; }
    table.tbl-stack tbody, table.tbl-stack tr, table.tbl-stack td { display: block; width: 100% !important; min-width: 0 !important; max-width: none !important; }
    table.tbl-stack tr { border: 1px solid var(--bs-border-color, #e5e7eb); border-radius: var(--primary-border-radius, 10px); margin: 0 0 10px; padding: 4px 0; background: #fff; text-align: left; }
    table.tbl-stack tr:last-child { margin-bottom: 0; }
    table.tbl-stack td { display: flex; align-items: flex-start; gap: 12px; padding: 7px 12px !important; border: 0 !important; text-align: left !important; background: transparent !important; }
    table.tbl-stack td::before { content: attr(data-label); flex: 0 0 38%; max-width: 38%; font-weight: 600; color: #6b7280; font-size: calc(var(--font-size) - 2px); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; overflow-wrap: anywhere; }
    table.tbl-stack td > .tbl-cell { flex: 1 1 auto; min-width: 0; }
    table.tbl-stack td > .tbl-cell > * { max-width: 100%; }
    table.tbl-stack td[data-label=""] { justify-content: flex-end; }
    table.tbl-stack td[data-label=""]::before { display: none; }
    table.tbl-stack td.tbl-empty { display: block; text-align: center !important; }
    table.tbl-stack td .btn-group { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
    table.tbl-stack td .btn-group > .btn { border-radius: 6px !important; }
}