/* =========================================================================
   CiviCRM UI Boost – CiviCRM member dashboard, styled to match Kadence.
   Setting: CiviCRM → UI Boost → Dashboard styling.
   Pairs with dashboard-tabs.js (setting: Dashboard tabs), which builds
   the tabs. Without the script the sections simply stack as cards.
   Every colour comes from your Kadence palette, so changing the palette
   in the Customizer restyles the dashboard too.
   ========================================================================= */

/* ---------- 1. Design tokens (edit these to taste) ---------- */
:root {
  --lab-accent:       var(--global-palette-btn-bg, var(--global-palette1, #3182ce));
  --lab-accent-hover: color-mix(in srgb, var(--lab-accent) 80%, #000); /* darker version of the accent */
  --lab-on-accent:    var(--global-palette-btn, #ffffff);
  --lab-heading:      var(--global-palette3, #1a202c);
  --lab-text:         var(--global-palette4, #2d3748);
  --lab-muted:        var(--global-palette5, #4a5568);
  --lab-subtle:       var(--global-palette6, #718096);
  --lab-surface:      var(--global-palette9, #ffffff);
  --lab-surface-alt:  var(--global-palette8, #f7fafc);
  --lab-line:         var(--global-palette7, #edf2f7);
  --lab-border:       var(--global-gray-400, #cbd5e0);
  --lab-radius:       8px;   /* cards, tab bar */
  --lab-radius-sm:    3px;   /* buttons, inputs, tabs (matches the site's 3px buttons) */
  --lab-focus:        color-mix(in srgb, var(--lab-accent) 28%, transparent);
  --lab-shadow:       0 1px 2px rgba(26, 32, 44, .06), 0 4px 12px rgba(26, 32, 44, .05);
}

/* ---------- 2. Layout: turn the dashboard table into stacked blocks ---------- */
.crm-container.crm-public table.dashboard-elements,
.crm-container.crm-public table.dashboard-elements > tbody,
.crm-container.crm-public table.dashboard-elements > tbody > tr,
.crm-container.crm-public table.dashboard-elements > tbody > tr > td {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.crm-container.crm-public table.dashboard-elements > tbody > tr { margin-bottom: 1.5rem; }

/* each section is a card */
.crm-container.crm-public table.dashboard-elements > tbody > tr > td {
  padding: 1.5rem;
  background: var(--lab-surface);
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius);
  box-shadow: var(--lab-shadow);
  color: var(--lab-text);
}

/* section headings (visible when tabs are off) */
.crm-container.crm-public .header-dark {
  margin: 0 0 1.1rem;
  padding: 0 0 .65rem;
  background: transparent;
  color: var(--lab-heading);
  border: 0;
  border-bottom: 2px solid var(--lab-accent);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- 3. Tabs ---------- */
.lab-tabs-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: .25rem;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.crm-container.crm-public .lab-tab {
  flex: 0 0 auto;
  margin: 0;
  padding: .85rem 1.15rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -3px 0 transparent;
  color: var(--lab-muted);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.crm-container.crm-public .lab-tab:hover {
  background: var(--lab-surface-alt);
  color: var(--lab-heading);
  box-shadow: inset 0 -3px 0 var(--lab-border);
}
.crm-container.crm-public .lab-tab[aria-selected="true"] {
  background: transparent;
  color: var(--lab-accent);
  box-shadow: inset 0 -3px 0 var(--lab-accent);
}
.crm-container.crm-public .lab-tab:focus-visible {
  outline: 2px solid var(--lab-accent);
  outline-offset: -2px;
}

/* tabbed mode: only the active section shows, headings are replaced by tabs */
.crm-container.lab-tabs-ready table.dashboard-elements > tbody > tr { margin-bottom: 0; }
.crm-container.lab-tabs-ready table.dashboard-elements > tbody > tr[hidden] { display: none !important; }
.crm-container.lab-tabs-ready .header-dark { display: none; }

/* style A (default): underline tabs joined to the panel */
.crm-container.lab-tabs--underline .lab-tabs-nav { border-bottom: 1px solid var(--lab-line); }
.crm-container.lab-tabs--underline table.dashboard-elements > tbody > tr > td {
  border-top: 0;
  border-radius: 0 0 var(--lab-radius) var(--lab-radius);
}

/* style B: pill tabs in a rounded bar (setting: Dashboard tab style → Pills) */
.crm-container.lab-tabs--pills .lab-tabs-nav {
  margin-bottom: 1rem;
  padding: .35rem;
  background: var(--lab-surface-alt);
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius);
}
.crm-container.crm-public.lab-tabs--pills .lab-tab {
  padding: .6rem 1.1rem;
  border-radius: var(--lab-radius-sm);
  box-shadow: none;
}
.crm-container.crm-public.lab-tabs--pills .lab-tab:hover { background: var(--lab-line); box-shadow: none; }
.crm-container.crm-public.lab-tabs--pills .lab-tab[aria-selected="true"] {
  background: var(--lab-accent);
  color: var(--lab-on-accent);
  box-shadow: 0 1px 3px rgba(26, 32, 44, .2);
}

/* ---------- 4. Buttons ---------- */
/* Match the site's Kadence buttons: 3px corners, small uppercase text with
   letter spacing, generous padding; hover = darker accent plus the site's
   hard offset shadow. */
.crm-container.crm-public :is(button.crm-button, a.crm-button, button.crm-form-submit, input.crm-form-submit, a.button) {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: calc(var(--global-kb-spacing-xs, 1rem) - 1px) calc(var(--global-kb-spacing-sm, 1.5rem) - 1px); /* minus the 1px border */
  background: var(--lab-accent);
  border: 1px solid var(--lab-accent);
  border-radius: var(--lab-radius-sm);
  box-shadow: none;
  color: var(--lab-on-accent);
  font: inherit;
  font-size: var(--global-kb-font-size-sm, .9rem);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.6;
  text-decoration: none;
  text-shadow: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s ease;
}
.crm-container.crm-public :is(button.crm-button, a.crm-button, button.crm-form-submit, input.crm-form-submit, a.button):hover,
.crm-container.crm-public :is(button.crm-button, a.crm-button, button.crm-form-submit, input.crm-form-submit, a.button):focus-visible {
  background: var(--lab-accent-hover);
  border-color: var(--lab-accent-hover);
  color: var(--lab-on-accent);
  box-shadow: 8px 8px 0 0 var(--global-palette4, #2D3748); /* hard shadow, as on the site's buttons */
}
.crm-container.crm-public :is(button.crm-button, button.crm-form-submit, input.crm-form-submit, a.button):focus-visible {
  outline: 2px solid var(--lab-accent);
  outline-offset: 2px;
}
.crm-container.crm-public :is(button, input.crm-form-submit)[disabled],
.crm-container.crm-public .crm-button.disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* secondary: cancel / back buttons are outlined */
.crm-container.crm-public :is(.crm-button-type-cancel, .crm-button-type-back) {
  background: transparent;
  color: var(--lab-accent);
}
.crm-container.crm-public :is(.crm-button-type-cancel, .crm-button-type-back):hover {
  background: var(--lab-accent);
  color: var(--lab-on-accent);
}
/* CiviCRM sometimes wraps the real button in a span.crm-button: keep it invisible */
.crm-container.crm-public span.crm-button { padding: 0; background: transparent; border: 0; box-shadow: none; }

/* small pill links inside tables: View, Edit, Cancel, Renew ... */
.crm-container.crm-public table a.action-item,
.crm-container.crm-public .action-link a {
  display: inline-block;
  margin: 0 .25rem .25rem 0;
  padding: .25rem .7rem;
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius-sm);
  color: var(--lab-accent);
  font-size: .85em;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.crm-container.crm-public table a.action-item:hover,
.crm-container.crm-public .action-link a:hover {
  background: var(--lab-accent);
  border-color: var(--lab-accent);
  color: var(--lab-on-accent);
}

/* ---------- 5. Form fields ---------- */
.crm-container.crm-public label { color: var(--lab-heading); font-weight: 600; }

.crm-container.crm-public :is(
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="password"], input[type="search"], input[type="date"],
  textarea, select:not([multiple])
) {
  max-width: 100%;
  padding: .6rem .85rem;
  background-color: var(--lab-surface);
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius-sm);
  box-shadow: none;
  color: var(--lab-text);
  font: inherit;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.crm-container.crm-public :is(
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="password"], input[type="search"], input[type="date"],
  textarea, select
):focus {
  outline: none;
  border-color: var(--lab-accent);
  box-shadow: 0 0 0 3px var(--lab-focus);
}
.crm-container.crm-public :is(input, textarea, select)::placeholder { color: var(--lab-subtle); }
.crm-container.crm-public :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--lab-accent); }

/* native dropdowns: custom chevron */
.crm-container.crm-public select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: .75rem;
}

/* Join-a-group row: dropdown and Add button side by side */
.crm-container.crm-public .crm-dashboard-groups .form-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
}
/* the wrench (edit group options) is for admins, not members */
.crm-container.crm-public .crm-option-edit-link { display: none !important; }

/* ---------- 6. Select2 dropdowns (CiviCRM's "Join a Group" etc.) ---------- */
.crm-container.crm-public .select2-container {
  width: auto !important;          /* beats the inline pixel width */
  min-width: 15rem;
  max-width: 100%;
}
.crm-container.crm-public .select2-container .select2-choice {
  height: auto;
  min-height: 2.75rem;
  padding: .6rem 2.6rem .6rem .85rem;
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius-sm);
  box-shadow: none;
  color: var(--lab-text);
  line-height: 1.5;
}
.crm-container.crm-public .select2-container .select2-choice > .select2-chosen { margin: 0; }
.crm-container.crm-public .select2-container.select2-container-active .select2-choice,
.crm-container.crm-public .select2-container.select2-dropdown-open .select2-choice {
  border-color: var(--lab-accent);
  box-shadow: 0 0 0 3px var(--lab-focus);
}
.crm-container.crm-public .select2-container .select2-choice .select2-arrow {
  width: 2.4rem;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.crm-container.crm-public .select2-container .select2-choice .select2-arrow b {
  position: relative;
  background: none !important;     /* drop the old sprite arrow */
}
.crm-container.crm-public .select2-container .select2-choice .select2-arrow b::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .45rem;
  height: .45rem;
  margin: -.35rem 0 0 -.25rem;
  border-right: 2px solid var(--lab-muted);
  border-bottom: 2px solid var(--lab-muted);
  transform: rotate(45deg);
}

/* the opened list is appended to <body>, outside .crm-container */
.select2-drop {
  background: var(--lab-surface);
  border: 1px solid var(--lab-accent);
  border-radius: var(--lab-radius-sm);
  box-shadow: var(--lab-shadow);
  color: var(--lab-text);
}
.select2-drop.select2-drop-above { border-radius: var(--lab-radius-sm); }
.select2-drop .select2-search input {
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius-sm);
}
.select2-results .select2-result-label { padding: .55rem .85rem; }
.select2-results .select2-highlighted { background: var(--lab-accent); color: var(--lab-on-accent); }
.select2-results .select2-no-results,
.select2-results .select2-searching { padding: .55rem .85rem; color: var(--lab-muted); }

/* ---------- 7. Tables (contributions, events, memberships, contacts) ---------- */
.crm-container.crm-public :is(table.selector, table.display, table.dataTable, .view-content table) {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--lab-surface);
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius-sm);
  overflow: hidden;
  font-size: .95em;
}
.crm-container.crm-public :is(table.selector, table.display, table.dataTable, .view-content table) thead th {
  width: auto !important;          /* beats DataTables' inline widths */
  padding: .75rem 1rem;
  background: var(--lab-surface-alt);
  border: 0;
  border-bottom: 1px solid var(--lab-line);
  color: var(--lab-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.crm-container.crm-public table.dataTable thead th:empty { width: 1px !important; }   /* icon-only columns */
.crm-container.crm-public table.dataTable thead .sorting,
.crm-container.crm-public table.dataTable thead .sorting_asc,
.crm-container.crm-public table.dataTable thead .sorting_desc { background-position: right .6rem center; padding-right: 1.9rem; }

.crm-container.crm-public :is(table.selector, table.display, table.dataTable, .view-content table) tbody td {
  padding: .8rem 1rem;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--lab-line);
  color: var(--lab-text);
  vertical-align: middle;
}
.crm-container.crm-public :is(table.selector, table.display, table.dataTable, .view-content table) tbody tr:first-child td { border-top: 0; }
.crm-container.crm-public :is(table.selector, table.display, table.dataTable, .view-content table) tbody tr:hover td { background: var(--lab-surface-alt); }
.crm-container.crm-public table.dataTable td.dataTables_empty {
  padding: 2rem 1rem;
  color: var(--lab-muted);
  text-align: center;
}

/* DataTables chrome: "Show N entries", search box, pager */
.crm-container.crm-public .dataTables_wrapper { overflow-x: auto; }
.crm-container.crm-public .crm-datatable-pager-top,
.crm-container.crm-public .crm-datatable-pager-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .75rem 0;
  color: var(--lab-muted);
  font-size: .9em;
}
.crm-container.crm-public :is(.dataTables_length, .dataTables_filter) label { font-weight: 500; color: var(--lab-muted); }
.crm-container.crm-public .dataTables_length select { margin: 0 .4rem; padding-top: .4rem; padding-bottom: .4rem; }
.crm-container.crm-public .dataTables_paginate .paginate_button {
  display: inline-block;
  min-width: 2.1rem;
  margin: 0 0 0 .25rem;
  padding: .35rem .7rem;
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius-sm);
  color: var(--lab-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.crm-container.crm-public .dataTables_paginate .paginate_button:hover { background: var(--lab-surface-alt); border-color: var(--lab-accent); color: var(--lab-accent); }
.crm-container.crm-public .dataTables_paginate .paginate_button.current,
.crm-container.crm-public .dataTables_paginate .paginate_button.current:hover {
  background: var(--lab-accent);
  border-color: var(--lab-accent);
  color: var(--lab-on-accent);
}
.crm-container.crm-public .dataTables_paginate .paginate_button.disabled,
.crm-container.crm-public .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--lab-surface);
  border-color: var(--lab-line);
  color: var(--lab-subtle);
  opacity: .6;
  cursor: default;
}

/* ---------- 8. Status messages ("You are not subscribed to any Groups." etc.) ---------- */
.crm-container.crm-public .messages {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  background: var(--lab-surface-alt);
  border: 1px solid var(--lab-line);
  border-left: 4px solid var(--lab-accent);
  border-radius: var(--lab-radius-sm);
  color: var(--lab-muted);
}
.crm-container.crm-public .messages .crm-i { margin-top: .2rem; color: var(--lab-accent); }
.crm-container.crm-public .messages.success { border-left-color: #2f855a; }
.crm-container.crm-public .messages.success .crm-i { color: #2f855a; }
.crm-container.crm-public .messages.warning { border-left-color: #c05621; }
.crm-container.crm-public .messages.warning .crm-i { color: #c05621; }
.crm-container.crm-public .messages.error { border-left-color: #c53030; background: #fff5f5; }
.crm-container.crm-public .messages.error .crm-i { color: #c53030; }

/* ---------- 8b. Site-specific adjustments ---------- */

/* Use the full content width on the dashboard. Scoped to the dashboard
   so the sign-up forms keep their narrower, easier-to-read width. */
#crm-container.crm-public:has(table.dashboard-elements) {
  max-width: 100%;
}

/* Contributions: hide the "Receipt Sent" column (4th from the left).
   If a CiviCRM update moves the columns, change the number. */
.crm-dashboard-civicontribute table th:nth-child(4),
.crm-dashboard-civicontribute table td:nth-child(4) {
  display: none;
}

/* Groups: full-width "Join a Group" row. Uses the section's class rather
   than the tab id, so it keeps working if the tab is renamed. */
.crm-dashboard-groups .form-item > div {
  width: 100%;
}

/* ---------- 8c. Extra tabs: "My details" and "Member resources" ---------- */

.cub-extra-content { color: var(--lab-text); line-height: 1.6; }
.cub-extra-content > :first-child { margin-top: 0; }
.cub-extra-content > :last-child { margin-bottom: 0; }

/* "My details": short intro, then the Edit button */
.cub-account-intro { margin: 0 0 1rem; color: var(--lab-muted); }
.crm-container.crm-public a.cub-account-button { margin-top: .25rem; }
.cub-account-failed { margin: 0 0 .75rem; color: var(--lab-muted); }

/* "Member resources": WordPress page content */
.cub-extra-content--cub-resources :is(h2, h3, h4) {
  margin: 1.5em 0 .5em;
  color: var(--lab-heading);
  line-height: 1.3;
}
.cub-extra-content--cub-resources :is(ul, ol) { margin: 0 0 1em; padding-left: 1.4em; }
.cub-extra-content--cub-resources li { margin: 0 0 .35em; }
.cub-extra-content--cub-resources a { color: var(--lab-accent); text-decoration: underline; text-underline-offset: .15em; }
.cub-extra-content--cub-resources :is(img, video, iframe) { max-width: 100%; height: auto; border-radius: var(--lab-radius-sm); }
.cub-extra-content--cub-resources iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.cub-extra-content--cub-resources .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* "Members only" message (tab and resources page) */
.cub-members-only {
  padding: 1rem 1.15rem;
  background: var(--lab-surface-alt);
  border: 1px solid var(--lab-line);
  border-left: 4px solid var(--lab-accent);
  border-radius: var(--lab-radius-sm);
  color: var(--lab-muted);
}
.cub-members-only p { margin: 0; }
.cub-members-only-login { margin-top: 1rem; }

/* ---------- 9. Small screens & motion ---------- */
@media (max-width: 700px) {
  .crm-container.crm-public table.dashboard-elements > tbody > tr > td { padding: 1rem; }
  .crm-container.crm-public .lab-tab { padding: .75rem .9rem; }
  .crm-container.crm-public .view-content table.selector { display: block; overflow-x: auto; white-space: nowrap; }
  .crm-container.crm-public .select2-container { min-width: 0; width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-container.crm-public * { transition: none !important; transform: none !important; }
}