/**
 * @file
 * MyEvent global UI layer.
 *
 * Loaded after Solo and the theme's base stylesheet to give native Drupal
 * elements one consistent MyEvent visual language.
 */

:root {
  --myevent-ui-primary: #6f3cff;
  --myevent-ui-primary-hover: #5d2ee8;
  --myevent-ui-primary-soft: #f2edff;
  --myevent-ui-teal: #0aa7a0;
  --myevent-ui-teal-soft: #e5f8f6;
  --myevent-ui-success: #159b70;
  --myevent-ui-success-soft: #e7f7f0;
  --myevent-ui-warning: #e98428;
  --myevent-ui-warning-soft: #fff0e4;
  --myevent-ui-danger: #d94b59;
  --myevent-ui-danger-soft: #fff0f2;
  --myevent-ui-info: #3f82f6;
  --myevent-ui-info-soft: #edf4ff;
  --myevent-ui-pink: #ed4f86;
  --myevent-ui-pink-soft: #fff0f5;
  --myevent-ui-orange: #f08a28;
  --myevent-ui-orange-soft: #fff3e8;
  --myevent-ui-blue: #2f86f6;
  --myevent-ui-blue-soft: #edf5ff;
  --myevent-ui-gold: #f0ad24;
  --myevent-ui-gold-soft: #fff8e8;
  --myevent-ui-coral: #ef684f;
  --myevent-ui-coral-soft: #fff1ed;
  --myevent-ui-ink: #12172f;
  --myevent-ui-text: #283149;
  --myevent-ui-muted: #6c768d;
  --myevent-ui-border: #e1e6ef;
  --myevent-ui-border-strong: #d4dae5;
  --myevent-ui-surface: #fff;
  --myevent-ui-surface-soft: #fafbfe;
  --myevent-ui-radius: 9px;
}

html,
body {
  color: var(--myevent-ui-text);
}

/* Native tables ------------------------------------------------------- */
table {
  border: 1px solid var(--myevent-ui-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--myevent-ui-radius);
  background: var(--myevent-ui-surface);
  overflow: hidden;
}

table thead,
table thead tr,
table thead th {
  background: #fff !important;
}

table th {
  color: var(--myevent-ui-ink);
  font-weight: 750;
}

table th,
table td {
  padding: .65rem .75rem;
  border: 0;
  border-bottom: 1px solid var(--myevent-ui-border);
  vertical-align: middle;
}

table tbody tr:last-child td {
  border-bottom: 0;
}

table tbody tr:hover td {
  background: #fbfcfe;
}

/* Buttons ------------------------------------------------------------- */
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: 2.5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--myevent-ui-primary);
  border-radius: var(--myevent-ui-radius);
  background: var(--myevent-ui-primary);
  background-image: none !important;
  color: #fff;
  font-weight: 700;
  box-shadow: none !important;
}

.button:hover,
.button:focus-visible,
button:hover,
button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
  border-color: var(--myevent-ui-primary-hover);
  background: var(--myevent-ui-primary-hover);
  color: #fff;
}

.button--secondary,
.button.secondary,
a.button--secondary {
  border-color: #d8cdfb;
  background: #fff;
  color: var(--myevent-ui-primary);
}

/* Form controls ------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
  border: 1px solid var(--myevent-ui-border-strong);
  border-radius: var(--myevent-ui-radius);
  background: #fff;
  color: var(--myevent-ui-text);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--myevent-ui-primary);
  outline: 3px solid rgba(111, 60, 255, .12);
  outline-offset: 0;
}

/* Fieldsets/details --------------------------------------------------- */
fieldset,
details {
  border: 1px solid var(--myevent-ui-border);
  border-radius: var(--myevent-ui-radius);
  background: #fff;
  box-shadow: none;
}

details > summary {
  color: var(--myevent-ui-ink);
  font-weight: 700;
}

/* Local tasks --------------------------------------------------------- */
.tabs ul.primary,
.tabs ul.secondary,
ul.tabs.primary,
ul.tabs.secondary {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
  padding: .5rem 0;
  border: 0;
  background: transparent;
}

.tabs li,
.tabs ul.primary li,
.tabs ul.secondary li {
  margin: 0;
}

.tabs a,
.tabs ul.primary a,
.tabs ul.secondary a {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: .45rem .8rem;
  border: 1px solid var(--myevent-ui-border);
  border-radius: var(--myevent-ui-radius);
  background: #fff;
  color: var(--myevent-ui-text);
  text-decoration: none;
}

.tabs a.is-active,
.tabs li.is-active a,
.tabs li.active a,
.tabs a:hover,
.tabs a:focus-visible {
  border-color: #d8cdfb;
  background: var(--myevent-ui-primary-soft);
  color: var(--myevent-ui-primary);
}

/* Menus --------------------------------------------------------------- */
.menu,
ul.menu {
  list-style: none;
}

.menu a {
  color: var(--myevent-ui-text);
  text-decoration: none;
}

.menu a:hover,
.menu a:focus-visible,
.menu a.is-active {
  color: var(--myevent-ui-primary);
}

/* Lists --------------------------------------------------------------- */
.item-list ul,
.item-list ol {
  margin-block: .5rem;
}

.item-list li {
  margin-block: .2rem;
}

/* Views exposed forms ------------------------------------------------- */
.views-exposed-form {
  padding: .85rem;
  border: 1px solid var(--myevent-ui-border);
  border-radius: var(--myevent-ui-radius);
  background: var(--myevent-ui-surface-soft);
}

.views-exposed-form .form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: end;
}

/* Pager --------------------------------------------------------------- */
.pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  padding: 0;
}

.pager__item {
  margin: 0;
}

.pager__item a {
  display: inline-flex;
  min-width: 2.25rem;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: .4rem .65rem;
  border: 1px solid var(--myevent-ui-border);
  border-radius: var(--myevent-ui-radius);
  background: #fff;
  color: var(--myevent-ui-text);
  text-decoration: none;
}

.pager__item.is-active a,
.pager__item a:hover,
.pager__item a:focus-visible {
  border-color: var(--myevent-ui-primary);
  background: var(--myevent-ui-primary);
  color: #fff;
}

/* Status messages ----------------------------------------------------- */
.messages {
  border-radius: var(--myevent-ui-radius);
  box-shadow: none;
}

.messages--status {
  border-color: #c8eadc;
  background: var(--myevent-ui-success-soft);
  color: #17694f;
}

.messages--warning {
  border-color: #ffd3ae;
  background: var(--myevent-ui-warning-soft);
  color: #8a4e16;
}

.messages--error {
  border-color: #f2cbd1;
  background: var(--myevent-ui-danger-soft);
  color: #9f3141;
}

/* Dropbuttons ---------------------------------------------------------- */
.dropbutton-wrapper .dropbutton,
.dropbutton-widget {
  border: 1px solid var(--myevent-ui-border);
  border-radius: var(--myevent-ui-radius);
  background: #fff;
  box-shadow: none;
}

.dropbutton a {
  color: var(--myevent-ui-primary);
}

/* Dialogs ------------------------------------------------------------- */
.ui-dialog {
  border: 1px solid var(--myevent-ui-border);
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
  border: 0;
  border-bottom: 1px solid var(--myevent-ui-border);
  background: #fff;
  color: var(--myevent-ui-ink);
}

.ui-dialog .ui-dialog-content {
  background: #fff;
}

.ui-dialog .ui-dialog-buttonpane {
  border-top: 1px solid var(--myevent-ui-border);
  background: #fff;
}

/* Focus --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline-color: var(--myevent-ui-primary);
}


/* ------------------------------------------------------------------ */
/* MyEvent account shell product language                             */
/* ------------------------------------------------------------------ */

/* MyEvent has one event/event-companion concept. JS removes this node; the
 * CSS rule prevents a visual flash before the behavior runs. */
.ptah-shell-sidebar__main a.ptah-shell-nav-item[href^="/user/"][href$="/groups"] {
  display: none !important;
}

.ptah-shell-brand-home-link {
  display: inline-flex;
  align-items: center;
  color: inherit !important;
  text-decoration: none !important;
}

.ptah-shell-brand-home-link:hover,
.ptah-shell-brand-home-link:focus {
  color: inherit !important;
  text-decoration: none !important;
}