/* Shared Bulma 1.x brand overrides. --client-primary / --bulma-primary-* come from base.html. */

/* Bulma 1 primary-invert is a dark tint of the brand hue (not white). Force light
   invert so navbar/button text matches Bulma 0.9 primary behaviour. */
:root {
  --bulma-primary-invert-l: 100%;
}

.input,
.textarea,
.select select {
  border-color: var(--client-primary);
}

.input:focus,
.textarea:focus,
.select select:focus,
.is-focused.input,
.is-focused.textarea,
.select select.is-focused,
.input.is-active,
.textarea.is-active,
.select select.is-active {
  border-color: var(--client-primary);
  box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--client-primary) 25%, transparent);
}

.button.is-primary:focus:not(:active),
.button.is-primary.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--client-primary) 25%, transparent);
}

/* Solid primary: white label on brand (Bulma 1 invert is a dark tint by default). */
.button.is-primary:not(.is-light):not(.is-soft):not(.is-outlined):not(.is-inverted):not(.is-text):not(.is-ghost) {
  background-color: var(--client-primary);
  border-color: transparent;
  color: #fff;
}

.button.is-primary:not(.is-light):not(.is-soft):not(.is-outlined):not(.is-inverted):not(.is-text):not(.is-ghost):hover,
.button.is-primary:not(.is-light):not(.is-soft):not(.is-outlined):not(.is-inverted):not(.is-text):not(.is-ghost).is-hovered {
  background-color: color-mix(in srgb, var(--client-primary) 82%, black);
  color: #fff;
}

/* Light primary (settings home, etc.): brand text on tinted ground — not white-on-white. */
.button.is-primary.is-light {
  background-color: color-mix(in srgb, var(--client-primary) 14%, white);
  border-color: transparent;
  color: var(--client-primary);
  --bulma-button-color-l: var(--bulma-primary-l);
  --bulma-button-background-l: 93%;
}

.button.is-primary.is-light:hover,
.button.is-primary.is-light.is-hovered,
.button.is-primary.is-light:focus {
  background-color: color-mix(in srgb, var(--client-primary) 22%, white);
  color: var(--client-primary);
}

.button.is-primary.is-light:active,
.button.is-primary.is-light.is-active {
  background-color: color-mix(in srgb, var(--client-primary) 28%, white);
  color: var(--client-primary);
}

/* White text only on top-level bar links — never on the has-dropdown wrapper
   (that would inherit into the settings panel as white-on-white). */
.navbar.is-primary > .navbar-brand > .navbar-item,
.navbar.is-primary > .navbar-menu > .navbar-start > a.navbar-item,
.navbar.is-primary > .navbar-menu > .navbar-end > a.navbar-item,
.navbar.is-primary > .navbar-menu > .navbar-end > .navbar-item > .navbar-link,
.navbar.is-primary .navbar-burger {
  color: #fff;
}

.navbar.is-primary .navbar-burger span {
  background-color: #fff;
}

.navbar.is-primary .navbar-menu > .navbar-end > .navbar-item > .navbar-link::after {
  border-color: #fff transparent transparent;
}

#navbar.navbar.is-primary .navbar-dropdown .navbar-item,
#navbar.navbar.is-primary .navbar-dropdown a.navbar-item {
  color: var(--bulma-text);
  background-color: var(--bulma-scheme-main);
}

#navbar.navbar.is-primary .navbar-dropdown a.navbar-item:hover,
#navbar.navbar.is-primary .navbar-dropdown a.navbar-item:focus {
  background-color: var(--bulma-background);
  color: var(--bulma-text-strong);
}

/* Light notifications (summary tiles, etc.): tinted panels that read against white page bg.
   Bulma 1 uses background-l:90% which is easy to lose against scheme-main. */
.notification.is-primary.is-light {
  background-color: color-mix(in srgb, var(--client-primary) 16%, white);
  color: var(--client-primary);
}

.notification.is-success.is-light {
  background-color: color-mix(in srgb, hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) 16%, white);
  color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-success-l) - 12%));
}

.notification.is-link.is-light {
  background-color: color-mix(in srgb, hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) 16%, white);
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-l) - 8%));
}

.notification.is-info.is-light {
  background-color: color-mix(in srgb, hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) 16%, white);
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), calc(var(--bulma-info-l) - 8%));
}

.notification.is-warning.is-light {
  background-color: color-mix(in srgb, hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l)) 28%, white);
  color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 28%);
}

.notification.is-primary.is-light .title,
.notification.is-primary.is-light .subtitle,
.notification.is-success.is-light .title,
.notification.is-success.is-light .subtitle,
.notification.is-link.is-light .title,
.notification.is-link.is-light .subtitle,
.notification.is-info.is-light .title,
.notification.is-info.is-light .subtitle,
.notification.is-warning.is-light .title,
.notification.is-warning.is-light .subtitle {
  color: inherit;
}

/* Keep nested summary tables readable on the tinted panels */
.notification.is-light .table {
  background-color: #fff;
}

/* Bulma 0.9 tile layout (removed in Bulma 1.x; still used by summary/stat pages) */
.tile {
  align-items: stretch;
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
}

.tile.is-ancestor {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  margin-top: -0.75rem;
}

.tile.is-ancestor:last-child {
  margin-bottom: -0.75rem;
}

.tile.is-ancestor:not(:last-child) {
  margin-bottom: 0.75rem;
}

.tile.is-child {
  margin: 0 !important;
}

.tile.is-parent {
  padding: 0.75rem;
}

.tile.is-vertical {
  flex-direction: column;
}

.tile.is-vertical > .tile.is-child:not(:last-child) {
  margin-bottom: 1.5rem !important;
}

@media screen and (min-width: 769px), print {
  .tile:not(.is-child) {
    display: flex;
  }
  .tile.is-1 {
    flex: none;
    width: 8.33333%;
  }
  .tile.is-2 {
    flex: none;
    width: 16.66667%;
  }
  .tile.is-3 {
    flex: none;
    width: 25%;
  }
  .tile.is-4 {
    flex: none;
    width: 33.33333%;
  }
  .tile.is-5 {
    flex: none;
    width: 41.66667%;
  }
  .tile.is-6 {
    flex: none;
    width: 50%;
  }
  .tile.is-7 {
    flex: none;
    width: 58.33333%;
  }
  .tile.is-8 {
    flex: none;
    width: 66.66667%;
  }
  .tile.is-9 {
    flex: none;
    width: 75%;
  }
  .tile.is-10 {
    flex: none;
    width: 83.33333%;
  }
  .tile.is-11 {
    flex: none;
    width: 91.66667%;
  }
  .tile.is-12 {
    flex: none;
    width: 100%;
  }
}