/* Drop 756: live validation messages, the same on the website, the client portal and the staff panel. */
:root { --lv-bad: #B91C1C; --lv-ok: #15803D; }
[data-theme="dark"], [data-admin-theme="dark"], .cp-dark { --lv-bad: #FCA5A5; --lv-ok: #4ADE80; }
.lv-msg { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.45; color: var(--lv-bad); }
.lv-msg[hidden] { display: none; }
.lv-msg::before { content: "!"; display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-inline-end: .4em; border-radius: 50%; background: var(--lv-bad); color: #FFFFFF; font-size: .72em; font-weight: 700; vertical-align: .05em; }
input.lv-bad, select.lv-bad, textarea.lv-bad { border-color: var(--lv-bad) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-bad) 14%, transparent) !important; }
input.lv-ok:not([type="checkbox"]):not([type="radio"]), select.lv-ok, textarea.lv-ok { border-color: color-mix(in srgb, var(--lv-ok) 65%, transparent) !important; }
.lv-count { display: block; margin-top: .25rem; font-size: .72rem; opacity: .65; text-align: end; font-variant-numeric: tabular-nums; }
.lv-count.lv-near { color: var(--lv-bad); opacity: 1; }
.lv-summary { margin: .6rem 0; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--lv-bad); color: var(--lv-bad); font-size: .85rem; background: color-mix(in srgb, var(--lv-bad) 7%, transparent); }
.lv-summary[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .lv-msg:not([hidden]) { animation: lv-in .18s ease-out; } @keyframes lv-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } }
/* Drop 776: the answer of a live server check */
.lc-msg { display: block; font-size: .78rem; line-height: 1.45; margin-top: .35rem; min-height: 1em; }
.lc-msg:empty { display: none; }
.lc-msg.is-ok { color: #15803d; } .lc-msg.is-bad { color: #b91c1c; } .lc-msg.is-wait { color: var(--fg-muted, var(--a-fg-3, #5B6780)); }
.lc-bad { border-color: #dc2626 !important; } .lc-ok { border-color: #16a34a !important; }
/* drop 953: messages carry their own background, so they read on any surface — a light page, a dark band, a photo.
   Red text alone on navy was nearly invisible. Same for the answers of live server checks. */
.lv-msg, .lc-msg.is-bad, .lc-msg.is-ok { display: inline-flex; align-items: center; gap: .1rem; width: auto; max-width: 100%; flex-basis: 100%; box-sizing: border-box;
  margin-top: .35rem; padding: .22rem .6rem; border-radius: 6px; font-weight: 600; font-size: .8rem; line-height: 1.4;
  color: #991B1B; background: #FEF2F2; border: 1px solid #FCA5A5; }
.lc-msg.is-ok { color: #14532D; background: #F0FDF4; border-color: #86EFAC; }
.lv-msg::before { background: #DC2626; }
[data-theme="dark"] .lv-msg, [data-admin-theme="dark"] .lv-msg, .cp-dark .lv-msg,
[data-theme="dark"] .lc-msg.is-bad, [data-admin-theme="dark"] .lc-msg.is-bad { color: #FEE2E2; background: #7F1D1D; border-color: #B91C1C; }
[data-theme="dark"] .lc-msg.is-ok, [data-admin-theme="dark"] .lc-msg.is-ok { color: #DCFCE7; background: #14532D; border-color: #15803D; }
.lv-summary { color: #991B1B; background: #FEF2F2; border-color: #FCA5A5; font-weight: 600; }
[data-theme="dark"] .lv-summary, [data-admin-theme="dark"] .lv-summary { color: #FEE2E2; background: #7F1D1D; border-color: #B91C1C; }
.lv-msg { order: 99; }   /* in a row (a field beside its button) the message goes to its own line, after the button */
[data-lc-wrap] { flex-wrap: wrap; }
.lc-msg:empty, .lc-msg.is-bad:empty, .lc-msg.is-ok:empty { display: none; }   /* drop 975: an empty answer never shows an empty badge */
.bi-ar { margin-top: .45rem; }   /* drop 988: the Arabic companion sits under the English field */
/* drop 1001: an action that cannot run yet */
.lv-blocked{opacity:.55;cursor:not-allowed}
.lv-blocked-msg{margin-top:.4rem;padding:.45rem .7rem;border-radius:8px;font-size:.84rem;line-height:1.4;background:color-mix(in srgb,#c2410c 9%,transparent);color:#9a3412;border-inline-start:3px solid #c2410c}