pleno-vue/src/assets/main.css

.input.has-sharp-edges {
  border-radius: 0;
}
textarea.has-sharp-edges {
  border-radius: 0;
}

.pos-addon-popper {
  padding: 0.5rem;
  background-color: #fbfcfe;
  opacity: 0.9;
  border: 3px solid #68696b;
  min-width: 250px;
  min-height: 100px;
  text-align: center;
}
/*body .has-text-grey {*/
/*  color: #333333 !important;*/
/*}*/

:root {
  --pleno-mobile-safe-top: env(safe-area-inset-top, 0px);
  /* 1. Primary Brand Colors (HSL) */
  --bulma-primary-h: 197deg !important;
  --bulma-primary-l: 35% !important;
  --bulma-link-h: 224deg !important;
  --bulma-link-l: 13% !important;
  --bulma-info-h: 215deg !important;
  --bulma-info-l: 56% !important;
  --bulma-warning-h: 44deg !important;
  --bulma-warning-l: 50% !important;
  --bulma-dark-h: 0 !important;
  --bulma-dark-s: 0% !important;
  --bulma-dark-l: 20% !important;

  --bulma-dark-dark-invert-l: 100% !important;

  /* 2. Typography - Avenir */
  --bulma-family-primary: "Avenir", sans-serif;
  --bulma-body-size: 11pt !important;
  --bulma-title-weight: 800 !important;
  --bulma-body-weight: 400 !important;

  /* 3. Strict Hierarchy  */
  --bulma-title-size: 13pt !important;

  /* 4. Brand Specific Restrictions  */
  --bulma-shadow: none !important;
  --bulma-box-shadow: none !important;
  --bulma-card-shadow: none !important;

  --bulma-skeleton-background: hsla(197 100% 35% / 0.7) !important;
  --pleno-compact-table-header-font-size: 0.72rem;
  --pleno-compact-table-header-line-height: 1;
}

body:not(.pleno-large-table-headers) .table thead th {
  font-size: var(--pleno-compact-table-header-font-size);
  line-height: var(--pleno-compact-table-header-line-height);
  white-space: nowrap;
  vertical-align: middle;
}

.pleno-table-header-content {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  max-width: 100%;
  vertical-align: middle;
}

/*:root {*/
/*  --bulma-primary-h: 207deg !important;*/
/*  --bulma-primary-s: 60% !important;*/
/*  --bulma-primary-l: 19% !important;*/
/*  --bulma-link-h: 200deg !important;*/
/*  --bulma-link-s: 80% !important;*/
/*  --bulma-link-l: 41% !important;*/
/*  --bulma-info-h: 215deg !important;*/
/*  --bulma-info-l: 56% !important;*/
/*  --bulma-success-s: 84% !important;*/
/*  --bulma-warning-h: 44deg !important;*/
/*  --bulma-warning-l: 50% !important;*/
/*}*/

.button-same-width {
  min-width: 124px !important;
}

/*:root {*/
/*  --bulma-link-h: 200 !important;*/
/*  --bulma-link-s: 80% !important;*/
/*  --bulma-link-l: 41% !important;*/

/*  --bulma-warning-h: 44 !important;*/
/*  --bulma-warning-s: 100% !important;*/
/*  --bulma-warning-l: 50% !important;*/
/*}*/

/*:root {*/
/*  --bulma-menu-item-h: var(--bulma-menu-item-selected-h);*/
/*  --bulma-menu-item-s: var(--bulma-menu-item-selected-s);*/
/*  --bulma-menu-item-l: var(--bulma-menu-item-selected-l);*/
/*  --bulma-menu-item-background-l: var(--bulma-menu-item-selected-background-l);*/
/*  --bulma-menu-item-color-l: var(--bulma-menu-item-selected-color-l);*/
/*  !* Set the base H, S, and L for the menu item *!*/
/*  --bulma-menu-item-h: 200;*/
/*  --bulma-menu-item-s: 80%;*/

/*  !* Set the base lightness to 41% (from your hex) *!*/
/*  --bulma-menu-item-background-l: 41%;*/

/*  !* Set delta to 0% if you want exactly #1584BC *!*/
/*  !* Or use a small % if you want it to brighten/darken on state changes *!*/
/*  --bulma-menu-item-background-l-delta: 0%;*/
/*}*/
/*button.is-link {*/
/*  background-color: #1584BC;*/
/*}*/

.mt-30 {
  margin-top: 30px !important;
}

.cell .card-content .field {
  width: 100%;
}

.cell .card-content .field .label {
  font-weight: 800;
}

@media screen and (max-width: 768px) {
  .mb-8-mobile {
    margin-bottom: 8px !important;
  }
}

@media screen and (min-width: 769px) {
  .ml-16-tablet {
    margin-left: 16px !important;
  }
  .mt-30-tablet {
    margin-top: 30px !important;
  }
}

/* AUT-1: enhanced primary-button hover state.
   Bulma's default only nudges background lightness; this adds a small
   lift + brightness shift so the hover is unambiguous. Transitions keep
   it smooth so it doesn't feel jarring on click-heavy screens. */
.button.is-primary {
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}

.button.is-primary:hover,
.button.is-primary.is-hovered {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.button.is-primary:active,
.button.is-primary.is-active {
  filter: brightness(0.95);
  transform: translateY(0);
}

.button.is-primary:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-1px);
}