@import url(../../../core/css/_base.css); /* resets and civi wide styles */
@import url(../../../core/css/_cms.css); /* CMS-specific hacks/workarounds */
@import url(../../../core/css/_core.css); /* components and utility classes */
@import url(../../../core/css/_fixes.css); /* deprecated-Civi handling, hacks/workarounds. one day this will go. */

/* Only affect body colour in standalone */
html.cms-standalone body {
  background-color: var(--crm-c-page-background);
}

#crm-container {
  min-height: 100vh;
  background-color: var(--crm-c-page-background);
}

.crm-container details {
  background-color: var(--crm-expand-body-bg);
  border: var(--crm-c-divider);
}

.crm-container summary {
  color: var(--crm-c-blue-darker); /* novar */
  cursor: pointer; /* show it's clickable */
  position: relative; /* so our animated triangle doesn't go walkies */
}
.crm-container summary:hover,
.crm-container summary:focus {
  background-color: var(--crm-c-blue-overlay2);
}

/* Replace Riverlea's FontAwesome icon with our own shape. */
/* This rule is really sensitive to specificity. */
/* .crm-container :where(details, .crm-accordion-wrapper)>:is(summary,.crm-accordion-header)::before {  */

.crm-container details>summary::before /* accordion8 (recommended) */,
.crm-container .crm-accordion-header::before, /* accordion1, accordion2, accordion6 */
.crm-container .crm-collapsible .collapsible-title::before /* accordion3 */ {
  content: "";
  border: .4rem solid transparent;
  border-left-color: var(--crm-expand-icon-color);
  position: absolute;
  margin-left: -1.5rem;
  margin-top: 0.2rem;
  transform: rotate(0);
  transform-origin: .2rem 50%;
  transition: transform .25s ease;
}
/* we have to sort of re-state these rules because the specificity of the above overrules the 'open' state
 * note that a lot of non-recommended patterns use .collapsed, whereas details uses [open] - reverse logic.
 * This covers accordion1, accordion2, accordion6.
 */
.crm-container .crm-accordion-wrapper.collapsed>.crm-accordion-header::before {
  transform: none;
  transform-origin: .2rem 50%;
}
.crm-container .crm-accordion-wrapper:not(.collapsed)>.crm-accordion-header::before {
  transform: rotate(90deg);
}
/* the following 2 rules are for accordion3 and accordion4(still bit weird) */
.crm-container .crm-collapsible.collapsed>.collapsible-title::before {
  transform: none;
  transform-origin: .2rem 50%;
}
.crm-container .crm-collapsible:not(.collapsed)>.collapsible-title::before {
  transform: rotate(90deg);
}

/* Apply subtle animation */
@keyframes crm-details-show {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
}
  50% {
    transform: translateY(-0.1rem);
}
}
.crm-container :is(details,
.crm-accordion-wrapper)>.crm-accordion-body {
  padding: var(--crm-expand-body-padding);
  animation: crm-details-show 240ms ease-in-out;
}
/* We don't want a different colour header bg on 'active' (open) but we do on hover
 * This doesn't work yet.*/
.crm-container .crm-accordion-bold>summary:is(:hover,
:focus) {
  background-color: var(--crm-c-blue-overlay2);
}


/* Alternate backgrounds */
/* .crm-container details:not(.crm-accordion-light) details:not(.crm-accordion-light) { */
/*   --crm-expand-header-bg: var(--crm-c-blue-overlay2); */
/* } */


/* ALERTS (these are in-page-flow boxes with info, not the (normally) popup notifications) */

/* help boxes: put stripe down left with icon in it. */
.crm-container #help,
.crm-container .help {
  border: none;
  border-left: 2rem solid #7cb5e1;
  border-radius: 0;
}
.crm-container #help::before,
.crm-container .help::before {
  color: #fff;
  content: "\f0eb";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  margin-left: -2.3rem;
  position: absolute;
  text-rendering: auto;
}

.crm-container .alert-success {
  background-color: var(--crm-c-green);
}
.crm-container :is(.status,
.alert-warning,
.messages.warning) {
  --crm-roundness: 0.25rem;
}

/* BUTTONS */

/*.crm-container .btn,
.crm-container button,
.crm-container .crm-button,
.crm-container [type="button"],
.crm-container [type="reset"],
.crm-container [type="submit"] {
  Sometimes we have lots of buttons and they wrap to a 2nd line. This puts some vertical space betwixt.
  margin: var(--crm-m) 0;
}

/* Make it clear when you're hovering delete. */
.crm-container .btn.btn-danger:hover,
.crm-container .btn.btn-danger:focus,
.crm-container a.button.delete-button:hover,
.crm-container a.button.delete-button:focus,
.crm-container a.button.delete:hover {
  color: var(--crm-c-red-bright);
}

/* DIALOGS */

/* I feel title, resize, close is a better order for buttons bs modal dialogs */
/* .ui-dialog-title { flex: 1 1 auto; order: 1; } */
/* .crm-dialog-titlebar-resize { order: 2; } */
.crm-container.ui-dialog .ui-dialog-titlebar .ui-button.crm-dialog-titlebar-print {
  display: none;
}

/* .modal-header .close { order: 3; } */
/* .crm-container  .modal-header .ui-icon[class*=" fa-"] { font-size: 1rem; } */
/* I don't know what problem this solved, but it creates an undesired left padding */
/* #bootstrap-theme .modal-header::before, #bootstrap-theme .modal-header::after { */
/*   display: none !important; */
/* } */
/**/
/* #bootstrap-theme .modal-header { */
/*   border:none; */
/* } */
/**/
/* .crm-container button.close { */
/*   color: var(--crm-c-blue-darker) !important; */
/* } */

/* DROPDOWNS */
.crm-container .btn-group .dropdown-menu,
.crm-container .btn.dropdown-toggle+.dropdown-menu {
  border-radius: 4px;
}

/* FORMS */

.crm-container .replace-plain {
  background: #fff;
}


/* NOTIFICATIONS (the popup ones) */
/* This produces a nicer hanging-indent type thing aligning the title and message to the left. */
.crm-container .notify-content {
  padding-left: 1.6rem;
}

/* Thames theme does hanging indent for the little <i>con, but happy for the list bullets to be outside of main text block as is narrow column. */
#crm-notification-container div.ui-notify-message .notify-content ul,
#crm-notification-container div.ui-notify-message .alert.notify-content ul {
  margin: 1rem 0 0;
  padding: 0;
}

/* Only include the margin under the h1 (h1!) when it's not empty. When it's empty the h1 only contains the <i>con and adding a margin messes up vertical alignment of the message. */
#crm-notification-container div.ui-notify-message h1:not(:empty) {
  margin-bottom: 1rem;
}

/* OTHER */
/* 'alpha-filter' is the alphabetical pager you see, for example, on adv search results */
.crm-container #alpha-filter li {
  --crm-c-text: #0002; /* referenced in searchForm.css */
}

.crm-container .description:not(#help),
.crm-container td.description {
  font-size: 0.875rem;
}


/* Get rid of the ugly black overlay during loading */
@keyframes aahblockoverlay {
  0% {
    background-color: var(--crm-c-blue-overlay);
}
  50% {
    background-color: var(--crm-c-page-background);
}
  100% {
    background-color: var(--crm-c-blue-overlay);
}
}
.crm-container .blockUI.blockOverlay {
  animation: aahblockoverlay 10s infinite;
}

/* CONTACT SUMMARY */
/* Ensure the Summary tab's top left corner matches the radius of the container */
.crm-contact-page #mainTabContainer .crm-contact-tabs-list>li:first-child a {
  border-radius: var(--crm-dash-roundness) 0 0 0;
}

.crm-contact-page #mainTabContainer .ui-tabs-nav li .ui-tabs-anchor:has(.crm-i) {
  grid-template-columns: var(--crm-dash-icon-size) 1fr auto;
  gap: 1ch;
}

.crm-contact-page #mainTabContainer .ui-tabs-nav li .ui-tabs-anchor .crm-i:first-child {
  justify-self: center;
}

.crm-summary-contactname-block:not(.crm-edit-ready) #crm-contactname-content {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}

/* make count badges more readable */
.crm-container .ui-tabs ul.ui-tabs-nav a em,
.crm-container .nav-tabs a .badge {
  padding: 0 0.2rem;
}

/* RL has no margin-bottom so the actions ribbon touches the main contact block */
div.crm-summary-contactname-block+.crm-actions-ribbon {
  margin-bottom: var(--crm-r1) !important;
}

/* Use subgrid? No. Not responsive enough. */
/* #contact-summary { grid-template-columns: 1fr 1fr; display: grid; } */
/* .crm-container div.contact_panel { display: grid; grid-template-columns: subgrid; grid-column: 1 / 3; } */
/* .contact_details { grid-template-columns: subgrid; grid-column: 1/ 3; } */

/* Decorations to indicate an editable chunk. */
#contact-summary .crm-edit-help {
  color: transparent;
  transition: 0.3s color;
  opacity: 1;
  font-size: 0.875rem;
}

#contact-summary .crm-edit-help .crm-i.fa-pencil {
  color: var(--crm-c-blue-dark) !important; /* important overrides contactSummary.css */
}

#contact-summary .crm-inline-edit:hover .crm-edit-help {
  color: var(--crm-c-blue-dark);
}

#contact-summary .crm-inline-edit:hover .crm-edit-help .crm-i.fa-pencil {
  color: var(--crm-c-blue-dark) !important;
}

.crm-container div.crm-summary-row {
  display: grid;
  grid-template-columns: var(--crm-input-label-width) 1fr;
}

/* unbold the labels */
.crm-container div.crm-summary-row div.crm-label {
  font-weight: normal !important; /* important overrides contactSummary.css that comes after this stylesheet */
}

/* instead bold the values */
.crm-container div.crm-summary-row div.crm-label+div {
  font-weight: bold;
}

/* drop the ugly mahusive roadsign-atop unreadable icon for things like do not email */
.fa-stack .crm-i.fa-stack-2x {
  font-size: 1rem;
}

.fa-stack .crm-i.fa-stack-1x:first-child {
  display: none;
}

#contact-summary div.crm-summary-row div.crm-label .fa-stack {
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  width: auto;
}

#contact-summary div.crm-summary-row div.crm-label :where(.fa-stack-1x,
.fa-stack-2x) {
  position: static;
  width: auto;
}

/* when space is tight, wrap labels onto next row */
.crm-container div.crm-summary-row {
  flex-wrap: wrap;
}

/* */
#contact-summary .crm-tag-item {
  border-radius: var(--crm-r-1);
}

.crm-container div.crm-summary-row div.crm-label {
  color: var(--crm-c-blue-darker);
}

/* INLINE EDIT */
.crm-editable.crm-editable-editing {
  background: white;
  padding: 0.5em;
  border-radius: 0.25em;
  border: solid 1px var(--crm-c-blue);
}

.crm-container .crm-editable-form [type="submit"] {
  color: var(--crm-c-green-dark) !important;
}

/* nice rounded tables. Pretty niche. */
.crm-container table:not(.crm-inline-edit-form) {
  border-radius: 0.4rem;
  /* Fails when pop-up menus inside table need to extend beyond the table */
  /* clip-path: inset(0 0 0 0 round 0.4rem); */
  border-collapse: separate;
  border-spacing: 0;
}

.crm-container table tr:first-child th:first-child {
  border-radius: 0.4rem 0 0 0;
}

.crm-container table tr:first-child th:last-child {
  border-radius: 0 0.4rem 0 0;
}

.crm-container table tr:last-child td:first-child {
  border-radius: 0 0 0 0.4rem;
}

.crm-container table tr:last-child td:last-child {
  border-radius: 0 0 0.4rem 0;
}

/* ensure thing that wrap tables allow scrolling in case the table overflows. */
div:has(> table) {
  overflow-x: auto;
  max-width: 100%;
}
/* When a menu is activated, allow it 20rem height to prevent it causing scroll
 * when the menu is opened on a row near the bottom of the table and
 * which the user might not notice / might make the menu hard to access.
 * https://lab.civicrm.org/extensions/riverlea/-/issues/90
 */
div:has(> table .btn-slide-active),
div:has(> table .dropdown-toggle[aria-expanded="true"]) {
  padding-bottom: 20rem;
}

/* ...and adjust the individual row checkboxes to be in line
 * Ah, no we have no way to target these.
 * Would be nice if core markup identified this type of <td>
 */

/* apply hanging indent to sorting buttons */
.crm-container tr a.sorting,
.crm-container tr a.sorting_asc,
.crm-container tr a.sorting_desc,
.crm-container table.dataTable thead th.sorting,
.crm-container table.dataTable thead th.sorting_asc,
.crm-container table.dataTable thead th.sorting_desc,
.crm-search-display th.crm-sortable-col {
  padding-left: calc(var(--crm-table-padding, 0) + 1ch);
}
.crm-container tr a.sorting::after,
.crm-container tr a.sorting_asc::after,
.crm-container tr a.sorting_desc::after,
.crm-container table.dataTable thead th.sorting::after,
.crm-container table.dataTable thead th.sorting_asc::after,
.crm-container table.dataTable thead th.sorting_desc::after,
.crm-search-display th.crm-sortable-col::after,
.crm-container tr a.sorting::before,
.crm-container tr a.sorting_asc::before,
.crm-container tr a.sorting_desc::before,
.crm-container table.dataTable thead th.sorting::before,
.crm-container table.dataTable thead th.sorting_asc::before,
.crm-container table.dataTable thead th.sorting_desc::before,
.crm-search-display th.crm-sortable-col::before {
  position: absolute;
  margin-left: -1em;
}

/* ...and in searchkit, this is terribly awkward and could be fixed with a core PR to provide more classes */
.crm-container .table > thead > tr > th:has(.crm-search-table-column-sort-icon) {
  padding-left: 1.5ch;
}
.crm-search-display-table > table.table > thead > tr > th i.crm-search-table-column-sort-icon {
  position: absolute;
  margin-left: -1.5ch;
}

/* Advanced search: override searchForm.css for slightly better aligned fields */
.advanced-search-fields {
  align-items: end;
}

/* tabs */
.crm-container .ui-tabs:not(#mainTabContainer) {
  background: white;
  border: var(--crm-tabs-border) !important;
  border-radius: var(--crm-r-3);
  /* overrides #civicrm-news-feed.ui-tabs and .crm-contact-page #secondaryTabContainer */
}
/* breadcrumbs - links not accessibile using the nromal blue. */
#civicrm-footer a,
nav.breadcrumb a {
  --crm-c-link: var(--crm-c-blue-darker);
  --crm-c-link-hover: var(--crm-c-blue-dark);
}
#crm-contactname-content .crm-edit-help {
  color: var(--crm-c-blue-dark) !important; /* override */
  padding: 0.25rem !important;
  opacity: 1 !important;
}
#crm-contactname-content > .crm-inline-block-content {
  border: solid 1px transparent !important;
}
#crm-contactname-content:hover > .crm-inline-block-content {
  border-color: var(--crm-c-blue-dark) !important;
}

/* Overrides for crmSearchAdmin.css */
.crm-search-nav-tabs > div.btn-group {
  top: 0 !important; /* the buttons already have padding, we don't need this. (crmSearchAdmin.css, L10 at time of writing) */
}


/* Make the tags list nicer. */
.crm-tag-item {
  padding: 0 1ch;
  border-radius: 1rem;
}

/* clickable items in select2 drop downs should be blue like links. */
.select2-drop.select2-drop-active.crm-container .select2-results > li {
  color: var(--crm-c-blue-dark);
}

/* Breadcrumbs */
html.crm-standalone  nav.breadcrumb>ol {
  display: flex;
  gap: var(--crm-m);
}
.breadcrumb ol li:not(:first-child)::before {
  content: " \BB ";
  margin-inline-end: var(--crm-m);
  color: var(--crm-c-blue-dark);
}

/* override _fixes.css */
.crm-container .font-red {
  color: var(--crm-c-red-bright) !important;
}
/* override _icons.css */
.crm-i.fa-ban.fa-stack-2x {
  opacity: 1;
}

/* PHP errors, warnings */
.standalone-errors {
  background: #ead2ce;
}

/* e.g. search buttons followed by count of matches on SK screen */
.crm-search-display .form-inline {
  padding: var(--crm-padding-reg) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--crm-m);
}

/* Spinner. Replace the fa icon with something nicer. */
.fa-spinner::before {
  content: "";
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  border: dashed 1px white;
  border-radius: 1rem;
  animation: thames-spinner 1s infinite;
}
.fa-spin {
  animation: none; /* placing animation on an odd-shaped item is a PITA for getting it 100% centred. */
}
/* Spinner for notifications .status-start notifications e.g. loading/saving. */
.crm-status-box-outer.status-start .crm-status-box-inner {
  /* Allow space for spinner.*/
  padding-left: 2.5ch;
}

/* The spinner. */
.crm-status-box-outer.status-start .crm-status-box-inner::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -2.5ch;
  display: block;
  content: '';
  line-height: 1;
  animation: thames-spinner 1s infinite;
  transform-origin: center;
  width: 1.5ch;
  height: 1.5ch;
  border: dashed 1px white;
  border-radius: 2ch;
}

@keyframes thames-spinner {
  0% {
    transform: none;
}
  100% {
    transform: rotateZ(360deg);
}
}

/* Font */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../../../fonts/lato-v24-latin-regular.woff2') format('woff2');
}

/* lato-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../../../fonts/lato-v24-latin-italic.woff2') format('woff2');
}

/* lato-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../../../fonts/lato-v24-latin-700.woff2') format('woff2');
}

/* lato-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('../../../fonts/lato-v24-latin-700italic.woff2') format('woff2');
}

/* Searchkit preview table headers go weird because of the button margin for the select-all button. */
/* .crm-container .btn, .crm-container button, .crm-container .crm-button, .crm-container [type="button"], .crm-container [type="reset"], .crm-container [type="submit"]*/
.crm-container th.crm-search-result-select {
  --crm-btn-margin: 0;
}
/* Searchkit accordions */
.crm-search-admin-edit-columns details,
.crm-search .crm-search-admin-relative details {
  /*issue https://lab.civicrm.org/extensions/riverlea/-/issues/102 */
  margin-left: 1rem;
  /* crmSearchAdmin applies this var as the bg here and it does not suit us. */
  --crm-c-page-background: transparent;
}

/* Override _dropdowns.css */
#afGuiEditor .af-gui-bar .dropdown-menu {
  --crm-c-danger-text: var(--crm-c-red-dark);
}
/* Override contactSummary.css */
#crm-contact-actions-list a.delete {
  --crm-c-danger-text: var(--crm-c-red-dark);
}
#crm-contact-actions-list a.delete:hover,
#crm-contact-actions-list a.delete:focus {
  /* the hover state gives crm-c-red-dark to the background */
  --crm-c-danger-text: var(--crm-c-red-light);
}

/* Fix Mosaico wizard */
.crm_wizard__tille {
  --crm-panel-background: transparent;
}
.crmb-wizard-button-right {
  gap: 1rem;
}

/* Support contact dashboard image float */
.contactCardRight:has(#crm-contact-thumbnail) .float-left {
  width: calc(100% - var(--crm-flex-gap) - var(--crm-dash-image-size));
}

/* Quicksearch */
ul.crm-quickSearch-results a {
  padding: 0.25rem 1rem;
  text-decoration: none;
  color: var(--crm-c-link);
}
ul.crm-quickSearch-results .ui-state-active a /* mouse,keyboard nav */ {
  background: var(--crm-c-blue);
  color: var(--crm-c-link-hover);
}
ul.crm-quickSearch-results a:active {
  background: white;
}