/**
 * JEA Component & Utility CSS
 *
 * Defines JEA-prefixed equivalents for every Bootstrap component and utility
 * class used in JEA templates. By targeting jea-* classes in your custom CSS
 * you never need to fight Bootstrap specificity.
 *
 * Usage:
 *   - Templates carry both the Bootstrap class (for BS5 JS behavior where needed)
 *     AND the jea-* class (for custom styling).
 *   - Override any jea-* class in your template's custom CSS or jea.custom.css.
 *
 * @package     com_jea
 * @version     1.0.0
 * @since       2026
 */

/* ─────────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS (CSS custom properties)
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Palette */
    --jea-color-primary:        #0d6efd;
    --jea-color-primary-hover:  #0b5ed7;
    --jea-color-secondary:      #6c757d;
    --jea-color-secondary-hover:#5a6268;
    --jea-color-success:        #198754;
    --jea-color-success-hover:  #157347;
    --jea-color-danger:         #dc3545;
    --jea-color-danger-hover:   #bb2d3b;
    --jea-color-warning:        #ffc107;
    --jea-color-warning-hover:  #e0a800;
    --jea-color-info:           #0dcaf0;
    --jea-color-info-hover:     #0aa2c0;
    --jea-color-light:          #f8f9fa;
    --jea-color-dark:           #212529;
    --jea-color-muted:          #6c757d;
    --jea-color-white:          #fff;

    /* Typography */
    --jea-font-size-sm:   .875rem;
    --jea-font-size-base: 1rem;
    --jea-font-size-lg:   1.125rem;
    --jea-font-weight-normal:   400;
    --jea-font-weight-semibold: 600;
    --jea-font-weight-bold:     700;

    /* Borders */
    --jea-border-color:   #dee2e6;
    --jea-border-radius:  .375rem;
    --jea-border-radius-sm: .25rem;
    --jea-border-radius-lg: .5rem;
    --jea-border-radius-pill: 50rem;

    /* Shadows */
    --jea-shadow-sm:  0 .125rem .25rem rgba(0,0,0,.075);
    --jea-shadow:     0 .5rem 1rem rgba(0,0,0,.15);
    --jea-shadow-lg:  0 1rem 3rem rgba(0,0,0,.175);

    /* Spacing */
    --jea-spacing-1: .25rem;
    --jea-spacing-2: .5rem;
    --jea-spacing-3: 1rem;
    --jea-spacing-4: 1.5rem;
    --jea-spacing-5: 3rem;

    /* Transitions */
    --jea-transition: all .15s ease-in-out;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
.jea-btn {
    display: inline-block;
    font-weight: var(--jea-font-weight-normal);
    line-height: 1.5;
    color: var(--jea-color-dark);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: var(--jea-font-size-base);
    border-radius: var(--jea-border-radius);
    transition: color .15s ease-in-out, background-color .15s ease-in-out,
                border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.jea-btn:hover { text-decoration: none; }
.jea-btn:disabled,
.jea-btn[disabled] { opacity: .65; cursor: not-allowed; pointer-events: none; }

.jea-btn--sm { padding: .25rem .5rem; font-size: var(--jea-font-size-sm); border-radius: var(--jea-border-radius-sm); }
.jea-btn--lg { padding: .5rem 1rem; font-size: var(--jea-font-size-lg); border-radius: var(--jea-border-radius-lg); }

.jea-btn--primary   { color: #fff; background-color: var(--jea-color-primary);   border-color: var(--jea-color-primary);   }
.jea-btn--secondary { color: #fff; background-color: var(--jea-color-secondary); border-color: var(--jea-color-secondary); }
.jea-btn--success   { color: #fff; background-color: var(--jea-color-success);   border-color: var(--jea-color-success);   }
.jea-btn--danger    { color: #fff; background-color: var(--jea-color-danger);    border-color: var(--jea-color-danger);    }
.jea-btn--warning   { color: var(--jea-color-dark); background-color: var(--jea-color-warning); border-color: var(--jea-color-warning); }
.jea-btn--info      { color: var(--jea-color-dark); background-color: var(--jea-color-info);    border-color: var(--jea-color-info);    }
.jea-btn--light     { color: var(--jea-color-dark); background-color: var(--jea-color-light);   border-color: var(--jea-color-light);   }

.jea-btn--primary:hover   { background-color: var(--jea-color-primary-hover);   border-color: var(--jea-color-primary-hover);   color: #fff; }
.jea-btn--secondary:hover { background-color: var(--jea-color-secondary-hover); border-color: var(--jea-color-secondary-hover); color: #fff; }
.jea-btn--success:hover   { background-color: var(--jea-color-success-hover);   border-color: var(--jea-color-success-hover);   color: #fff; }
.jea-btn--danger:hover    { background-color: var(--jea-color-danger-hover);    border-color: var(--jea-color-danger-hover);    color: #fff; }
.jea-btn--warning:hover   { background-color: var(--jea-color-warning-hover);   border-color: var(--jea-color-warning-hover);   }
.jea-btn--info:hover      { background-color: var(--jea-color-info-hover);      border-color: var(--jea-color-info-hover);      }

.jea-btn--outline-primary   { color: var(--jea-color-primary);   border-color: var(--jea-color-primary);   }
.jea-btn--outline-secondary { color: var(--jea-color-secondary); border-color: var(--jea-color-secondary); }
.jea-btn--outline-success   { color: var(--jea-color-success);   border-color: var(--jea-color-success);   }
.jea-btn--outline-danger    { color: var(--jea-color-danger);    border-color: var(--jea-color-danger);    }
.jea-btn--outline-warning   { color: var(--jea-color-warning);   border-color: var(--jea-color-warning);   }
.jea-btn--outline-info      { color: var(--jea-color-info);      border-color: var(--jea-color-info);      }

.jea-btn--outline-primary:hover   { background-color: var(--jea-color-primary);   color: #fff; }
.jea-btn--outline-secondary:hover { background-color: var(--jea-color-secondary); color: #fff; }
.jea-btn--outline-success:hover   { background-color: var(--jea-color-success);   color: #fff; }
.jea-btn--outline-danger:hover    { background-color: var(--jea-color-danger);    color: #fff; }

.jea-btn--link {
    color: var(--jea-color-primary);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
}
.jea-btn--link:hover { color: var(--jea-color-primary-hover); }

/* ─────────────────────────────────────────────────────────────────────────────
   BADGES
   ───────────────────────────────────────────────────────────────────────────── */
.jea-badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: var(--jea-font-weight-bold);
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--jea-border-radius-pill);
}
.jea-badge--primary   { background-color: var(--jea-color-primary); }
.jea-badge--secondary { background-color: var(--jea-color-secondary); }
.jea-badge--success   { background-color: var(--jea-color-success); }
.jea-badge--danger    { background-color: var(--jea-color-danger); }
.jea-badge--warning   { background-color: var(--jea-color-warning); color: var(--jea-color-dark); }
.jea-badge--info      { background-color: var(--jea-color-info);    color: var(--jea-color-dark); }
.jea-badge--light     { background-color: var(--jea-color-light);   color: var(--jea-color-dark); border: 1px solid var(--jea-border-color); }
.jea-badge--dark      { background-color: var(--jea-color-dark); }

/* ─────────────────────────────────────────────────────────────────────────────
   ALERTS
   ───────────────────────────────────────────────────────────────────────────── */
.jea-alert {
    position: relative;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--jea-border-radius);
}
.jea-alert--primary {
    color: #084298; background-color: #cfe2ff; border-color: #b6d4fe;
}
.jea-alert--secondary {
    color: #41464b; background-color: #e2e3e5; border-color: #d3d6d8;
}
.jea-alert--success {
    color: #0f5132; background-color: #d1e7dd; border-color: #badbcc;
}
.jea-alert--danger {
    color: #842029; background-color: #f8d7da; border-color: #f5c2c7;
}
.jea-alert--warning {
    color: #664d03; background-color: #fff3cd; border-color: #ffecb5;
}
.jea-alert--info {
    color: #055160; background-color: #cff4fc; border-color: #b6effb;
}
.jea-alert--light {
    color: #636464; background-color: #fefefe; border-color: #fdfdfe;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARDS
   ───────────────────────────────────────────────────────────────────────────── */
.jea-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid var(--jea-border-color);
    border-radius: var(--jea-border-radius);
}
.jea-card__header {
    padding: .625rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid var(--jea-border-color);
    border-radius: calc(var(--jea-border-radius) - 1px) calc(var(--jea-border-radius) - 1px) 0 0;
}
.jea-card__header:first-child {
    border-radius: calc(var(--jea-border-radius) - 1px) calc(var(--jea-border-radius) - 1px) 0 0;
}
.jea-card__body {
    flex: 1 1 auto;
    padding: 1rem;
}
.jea-card__footer {
    padding: .625rem 1rem;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid var(--jea-border-color);
    border-radius: 0 0 calc(var(--jea-border-radius) - 1px) calc(var(--jea-border-radius) - 1px);
}
.jea-card__title {
    margin-bottom: .5rem;
    font-weight: var(--jea-font-weight-semibold);
}
.jea-card__text {
    margin-top: 0;
    margin-bottom: 1rem;
}
.jea-card__text:last-child { margin-bottom: 0; }

/* Card modifiers */
.jea-card--danger  { border-color: var(--jea-color-danger); }
.jea-card--success { border-color: var(--jea-color-success); }
.jea-card--warning { border-color: var(--jea-color-warning); }
.jea-card--info    { border-color: var(--jea-color-info); }
.jea-card--primary { border-color: var(--jea-color-primary); }
.jea-card--primary > .jea-card__header { background-color: var(--jea-color-primary); color: #fff; border-bottom-color: transparent; }

/* ─────────────────────────────────────────────────────────────────────────────
   TABLES
   ───────────────────────────────────────────────────────────────────────────── */
.jea-table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--jea-color-dark);
    vertical-align: top;
    border-color: var(--jea-border-color);
    border-collapse: collapse;
}
.jea-table > :not(caption) > * > * {
    padding: .5rem;
    background-color: transparent;
    border-bottom-width: 1px;
    border-bottom-color: var(--jea-border-color);
}
.jea-table > thead {
    vertical-align: bottom;
    border-bottom: 2px solid var(--jea-border-color);
}
.jea-table--sm > :not(caption) > * > * { padding: .25rem; }
.jea-table--borderless > :not(caption) > * > * { border-bottom: none; }
.jea-table--bordered > :not(caption) > * > * { border: 1px solid var(--jea-border-color); }
.jea-table--light > thead { background-color: var(--jea-color-light); }
.jea-table--responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─────────────────────────────────────────────────────────────────────────────
   FORM CONTROLS — JEA wrappers
   ───────────────────────────────────────────────────────────────────────────── */
.jea-form-label {
    display: inline-block;
    margin-bottom: .5rem;
    font-weight: var(--jea-font-weight-semibold);
}
.jea-form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: var(--jea-font-size-base);
    font-weight: var(--jea-font-weight-normal);
    line-height: 1.5;
    color: var(--jea-color-dark);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--jea-border-color);
    border-radius: var(--jea-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.jea-form-control:focus {
    color: var(--jea-color-dark);
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}
.jea-form-control--sm { padding: .25rem .5rem; font-size: var(--jea-font-size-sm); border-radius: var(--jea-border-radius-sm); }

.jea-form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: var(--jea-font-size-base);
    font-weight: var(--jea-font-weight-normal);
    line-height: 1.5;
    color: var(--jea-color-dark);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid var(--jea-border-color);
    border-radius: var(--jea-border-radius);
    appearance: none;
}
.jea-form-select--sm { padding: .25rem 2.25rem .25rem .5rem; font-size: var(--jea-font-size-sm); border-radius: var(--jea-border-radius-sm); }

.jea-form-text {
    display: block;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--jea-color-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHECKBOXES & RADIOS (jea-check)
   Replaces Bootstrap's form-check / form-check-inline / form-check-input / form-check-label
   ───────────────────────────────────────────────────────────────────────────── */
.jea-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem;
}
.jea-check--inline {
    display: inline-block;
    margin-right: 1rem;
}
.jea-check__input {
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0,0,0,.25);
    appearance: none;
    color-adjust: exact;
    border-radius: .25em;
    float: left;
    margin-left: -1.5em;
    cursor: pointer;
}
.jea-check__input[type="radio"] { border-radius: 50%; }
.jea-check__input:checked {
    background-color: var(--jea-color-primary);
    border-color: var(--jea-color-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.jea-check__input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.jea-check__input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}
.jea-check__label {
    display: inline-block;
    cursor: pointer;
    margin-left: .25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIST UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
.jea-list-unstyled {
    padding-left: 0;
    list-style: none;
}
.jea-list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--jea-border-radius);
}
.jea-list-group--flush { border-radius: 0; }
.jea-list-group__item {
    position: relative;
    display: block;
    padding: .5rem 1rem;
    color: var(--jea-color-dark);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid var(--jea-border-color);
}
.jea-list-group__item + .jea-list-group__item { border-top: 0; }
.jea-list-group--flush > .jea-list-group__item { border-width: 0 0 1px; border-radius: 0; }
.jea-list-group__item--action:hover { background-color: var(--jea-color-light); cursor: pointer; }

/* ─────────────────────────────────────────────────────────────────────────────
   TEXT UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
.jea-text-muted       { color: var(--jea-color-muted) !important; }
.jea-text-primary     { color: var(--jea-color-primary) !important; }
.jea-text-secondary   { color: var(--jea-color-secondary) !important; }
.jea-text-success     { color: var(--jea-color-success) !important; }
.jea-text-danger      { color: var(--jea-color-danger) !important; }
.jea-text-warning     { color: var(--jea-color-warning) !important; }
.jea-text-info        { color: var(--jea-color-info) !important; }
.jea-text-dark        { color: var(--jea-color-dark) !important; }
.jea-text-white       { color: var(--jea-color-white) !important; }
.jea-text-center      { text-align: center !important; }
.jea-text-end         { text-align: right !important; }
.jea-text-start       { text-align: left !important; }
.jea-text-uppercase   { text-transform: uppercase !important; }
.jea-text-nowrap      { white-space: nowrap !important; }
.jea-text-decoration-none { text-decoration: none !important; }
.jea-fw-normal        { font-weight: var(--jea-font-weight-normal) !important; }
.jea-fw-semibold      { font-weight: var(--jea-font-weight-semibold) !important; }
.jea-fw-bold          { font-weight: var(--jea-font-weight-bold) !important; }
.jea-small            { font-size: .875em; }
.jea-fst-italic       { font-style: italic !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   BACKGROUND UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
.jea-bg-primary   { background-color: var(--jea-color-primary) !important; }
.jea-bg-secondary { background-color: var(--jea-color-secondary) !important; }
.jea-bg-success   { background-color: var(--jea-color-success) !important; }
.jea-bg-danger    { background-color: var(--jea-color-danger) !important; }
.jea-bg-warning   { background-color: var(--jea-color-warning) !important; }
.jea-bg-info      { background-color: var(--jea-color-info) !important; }
.jea-bg-light     { background-color: var(--jea-color-light) !important; }
.jea-bg-white     { background-color: var(--jea-color-white) !important; }
.jea-bg-dark      { background-color: var(--jea-color-dark) !important; }

/* ── Record intent selector (property creation fork) ────────────────────── */
.jea-record-intent-wrap                      { background: var(--jea-color-light); }
.jea-record-intent-option                    { cursor: pointer; transition: border-color .15s, background .15s; }
.jea-record-intent-option:hover              { border-color: var(--jea-color-primary) !important; }
.jea-record-intent-option--selected          { border-color: var(--jea-color-primary) !important;
                                               background: rgba(13,110,253,.06); }

/* ── Walkthrough / prospective badge colours ─────────────────────────────── */
.jea-badge--insp-type.jea-badge--type-walkthrough { background: #0dcaf0; color: #000; }
.jea-badge--privacy                          { background: transparent; color: var(--jea-color-secondary); padding: 0 .25rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Legal Layer Tagging System — Phase O
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Element CSS custom properties (override in custom.css as needed) ─────── */
:root {
  --jea-element-facts:     #3b82f6;   /* blue    */
  --jea-element-evidence:  #22c55e;   /* green   */
  --jea-element-law:       #a855f7;   /* purple  */
  --jea-element-procedure: #f97316;   /* orange  */
  --jea-element-liability: #ef4444;   /* red     */
  --jea-element-damages:   #9f1239;   /* maroon  */
}

/* ── Bottom color bar (multi-segment, equal-width flex) ──────────────────── */
.jea-legal-color-bar {
  display:       flex;
  height:        5px;
  border-radius: 0 0 3px 3px;
  overflow:      hidden;
  margin-top:    4px;
}
.jea-legal-color-bar:empty { display: none; }
.jea-legal-color-bar span  { flex: 1; display: block; }

.jea-legal-color-bar .jea-element--facts      { background: var(--jea-element-facts);     }
.jea-legal-color-bar .jea-element--evidence   { background: var(--jea-element-evidence);  }
.jea-legal-color-bar .jea-element--law        { background: var(--jea-element-law);       }
.jea-legal-color-bar .jea-element--procedure  { background: var(--jea-element-procedure); }
.jea-legal-color-bar .jea-element--liability  { background: var(--jea-element-liability); }
.jea-legal-color-bar .jea-element--damages    { background: var(--jea-element-damages);   }

/* ── Widget container ────────────────────────────────────────────────────── */
.jea-legal-widget {
  position: relative;
  margin-top: .5rem;
}

/* ── Tag button bar ──────────────────────────────────────────────────────── */
.jea-legal-widget__bar {
  display:   flex;
  flex-wrap: wrap;
  gap:       .25rem;
  align-items: center;
}

.jea-legal-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .25rem;
  padding:         .2rem .45rem;
  font-size:       .72rem;
  border:          1.5px solid currentColor;
  border-radius:   3px;
  background:      transparent;
  cursor:          pointer;
  opacity:         .55;
  transition:      opacity .15s, background .15s;
  white-space:     nowrap;
}
.jea-legal-btn:hover       { opacity: .85; }
.jea-legal-btn.is-tagged   { opacity: 1; background: rgba(255,255,255,.08); }

/* Icon color per element (outline = untagged, filled = tagged) */
.jea-legal-btn.jea-element--facts      { color: var(--jea-element-facts);     }
.jea-legal-btn.jea-element--evidence   { color: var(--jea-element-evidence);  }
.jea-legal-btn.jea-element--law        { color: var(--jea-element-law);       }
.jea-legal-btn.jea-element--procedure  { color: var(--jea-element-procedure); }
.jea-legal-btn.jea-element--liability  { color: var(--jea-element-liability); }
.jea-legal-btn.jea-element--damages    { color: var(--jea-element-damages);   }

.jea-legal-btn.is-tagged.jea-element--facts      { background: rgba(59,130,246,.15);  }
.jea-legal-btn.is-tagged.jea-element--evidence   { background: rgba(34,197,94,.15);   }
.jea-legal-btn.is-tagged.jea-element--law        { background: rgba(168,85,247,.15);  }
.jea-legal-btn.is-tagged.jea-element--procedure  { background: rgba(249,115,22,.15);  }
.jea-legal-btn.is-tagged.jea-element--liability  { background: rgba(239,68,68,.15);   }
.jea-legal-btn.is-tagged.jea-element--damages    { background: rgba(159,18,57,.15);   }

.jea-legal-btn__label { font-weight: 600; letter-spacing: .02em; }

/* ── Notes popover ───────────────────────────────────────────────────────── */
.jea-legal-notes-popover {
  position:      absolute;
  bottom:        calc(100% + 6px);
  left:          0;
  z-index:       500;
  background:    var(--jea-color-bg-card, #1e1e1e);
  border:        1px solid var(--jea-color-border, #444);
  border-radius: 6px;
  padding:       .75rem;
  min-width:     260px;
  box-shadow:    0 4px 16px rgba(0,0,0,.4);
}
.jea-legal-notes-popover__label {
  display:       block;
  font-size:     .78rem;
  font-weight:   600;
  margin-bottom: .35rem;
  color:         var(--jea-color-text-secondary, #aaa);
}
.jea-legal-notes-popover__input {
  width:         100%;
  box-sizing:    border-box;
  background:    var(--jea-color-bg-input, #111);
  color:         var(--jea-color-text, #eee);
  border:        1px solid var(--jea-color-border, #444);
  border-radius: 4px;
  padding:       .4rem .5rem;
  font-size:     .8rem;
  resize:        vertical;
  margin-bottom: .5rem;
}
.jea-legal-notes-popover__actions {
  display:   flex;
  gap:       .4rem;
  justify-content: flex-end;
}

/* ── Legal portfolio element badges (used on dashboard section) ──────────── */
.jea-legal-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  padding:       .2rem .55rem;
  border-radius: 999px;
  font-size:     .75rem;
  font-weight:   700;
  color:         #fff;
}
.jea-legal-badge--facts      { background: var(--jea-element-facts);     }
.jea-legal-badge--evidence   { background: var(--jea-element-evidence);  }
.jea-legal-badge--law        { background: var(--jea-element-law);       }
.jea-legal-badge--procedure  { background: var(--jea-element-procedure); }
.jea-legal-badge--liability  { background: var(--jea-element-liability); }
.jea-legal-badge--damages    { background: var(--jea-element-damages);   }
.jea-legal-badge--empty { opacity: .35; }