/* utilities.css — utility classes per eliminare style="..." inline dalle view.
 * Introdotto per rimuovere 'unsafe-inline' da CSP style-src (audit L-2).
 * Naming: sintassi Tailwind-like (m/p/d/text/w/h/gap), unità legate al design
 * system esistente (rem multipli di .5). Colori riferiti alle var CSS di admin.css
 * (--c-error, --c-success, --c-warning, --c-muted, --c-primary).
 */

/* ── Margin ─────────────────────────────────────────────── */
.m-0    { margin: 0; }
.mt-0   { margin-top: 0; }
.mt-05  { margin-top: .3rem; }
.mt-1   { margin-top: .5rem; }
.mt-2   { margin-top: 1rem; }
.mt-3   { margin-top: 1.5rem; }
.mt-4   { margin-top: 2rem; }
.mb-05  { margin-bottom: .3rem; }
.mb-1   { margin-bottom: .5rem; }
.mb-2   { margin-bottom: 1rem; }
.mb-3   { margin-bottom: 1.5rem; }
.mb-4   { margin-bottom: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-3rem { margin-top: 3rem; margin-bottom: 3rem; }
.mt-auto { margin-top: auto; }

/* ── Padding ────────────────────────────────────────────── */
.p-0    { padding: 0; }
.p-1    { padding: .4rem; }
.p-2    { padding: .5rem; }
.p-3    { padding: .7rem; }
.px-2   { padding-left: .5rem; padding-right: .5rem; }
.py-1   { padding-top: .3rem; padding-bottom: .3rem; }
.py-2   { padding-top: .5rem; padding-bottom: .5rem; }
.px-8-py-2 { padding: 2px 8px; }
.p-4rem-1rem { padding: 4rem 1rem; }

/* ── Display ────────────────────────────────────────────── */
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-block        { display: block; }
.d-none         { display: none; }
.d-flex         { display: flex; }
.d-inline-flex  { display: inline-flex; }

/* ── Flexbox ────────────────────────────────────────────── */
.flex-1        { flex: 1; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end   { justify-content: flex-end; }
.gap-05        { gap: .3rem; }
.gap-1         { gap: .5rem; }
.gap-2         { gap: 1rem; }
.flex-column   { flex-direction: column; }

/* ── Text ───────────────────────────────────────────────── */
.text-left     { text-align: left; }
.text-right    { text-align: right; }
.text-center   { text-align: center; }
.text-justify  { text-align: justify; }
.text-nowrap   { white-space: nowrap; }
.text-wrap     { white-space: pre-wrap; word-break: break-word; }
.text-mono     { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.text-bold     { font-weight: 700; }
.text-medium   { font-weight: 500; }
.text-semibold { font-weight: 600; }
.text-italic   { font-style: italic; }
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-strike   { text-decoration: line-through; }
.text-underline { text-decoration: underline; }
.text-no-underline { text-decoration: none; }

/* ── Font size ──────────────────────────────────────────── */
.fs-xs         { font-size: .7em; }
.fs-sm         { font-size: .85rem; }
.fs-base       { font-size: 1rem; }
.fs-lg         { font-size: 1.2rem; }
.fs-xl         { font-size: 1.5rem; }
.fs-2xl        { font-size: 1.8rem; }
.fs-3xl        { font-size: 2.5rem; }
.fs-4xl        { font-size: 4rem; }
.fs-9          { font-size: .9em; }

/* ── Colors (referenced from admin.css vars) ───────────── */
.text-error    { color: var(--c-error); }
.text-success  { color: var(--c-success); }
.text-warning  { color: var(--c-warning); }
.text-muted    { color: var(--c-muted); }
.text-primary  { color: var(--c-primary); }
.text-info     { color: var(--c-info, #3b82f6); }
.text-inherit  { color: inherit; }
.text-white    { color: #fff; }

.bg-error      { background: var(--c-error); }
.bg-success    { background: var(--c-success); }
.bg-warning    { background: var(--c-warning); }
.bg-muted      { background: var(--c-muted); }
.bg-primary    { background: var(--c-primary); }

/* ── Width / height ─────────────────────────────────────── */
.w-full        { width: 100%; }
.w-auto        { width: auto; }
.w-60          { width: 60px; }
.w-80          { width: 80px; }
.w-100         { width: 100px; }
.w-140         { width: 140px; }
.w-160         { width: 160px; }
.w-200         { width: 200px; }
.mw-100        { max-width: 100%; }
.mw-420        { max-width: 420px; }
.mw-520        { max-width: 520px; }
.mw-700        { max-width: 700px; }
.h-full        { height: 100%; }
.h-14          { height: 14px; }

/* ── Line height ────────────────────────────────────────── */
.lh-tight      { line-height: 1.2; }
.lh-normal     { line-height: 1.4; }
.lh-loose      { line-height: 1.8; }

/* ── Border ─────────────────────────────────────────────── */
.b-0           { border: 0; }
.b-1           { border: 1px solid var(--c-border); }
.bl-4-primary  { border-left: 4px solid var(--c-primary); }
.bl-4-error    { border-left: 4px solid var(--c-error); }
.bl-4-success  { border-left: 4px solid var(--c-success); }
.bl-4-warning  { border-left: 4px solid var(--c-warning); }
.bl-4-muted    { border-left: 4px solid var(--c-muted); }
.br-3          { border-radius: 3px; }
.br-6          { border-radius: 6px; }
.br-8          { border-radius: 8px; }

/* ── Misc ───────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.opacity-50    { opacity: .5; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Common composite (evita 3-class stacks nel markup) ─── */
.center-form   { max-width: 420px; margin: 3rem auto; }
.card-hero     { max-width: 520px; margin: 3rem auto; padding: 2rem; }
.text-center-mt-3 { text-align: center; margin-top: 1.5rem; }
.text-center-mt-4 { text-align: center; margin-top: 2rem; }
.block-mv-075 { display: block; margin: .75rem 0; }
.progress-track { width: 100%; height: 14px; border-radius: 3px; overflow: hidden; background: var(--c-border, #e5e7eb); }
.progress-bar-hot { height: 100%; background: #dc2626; }
.progress-bar-cool { height: 100%; background: #3b82f6; }

/* ── Dynamic width bins (per progress bar %) ────────────────
 * Genera .w-pct-0 → .w-pct-100 con step 5 per progress bar,
 * usate al posto di style="width:XX%". Il PHP arrotonda: max(0, min(100, round($v/5)*5)).
 */
.w-pct-0{width:0%}.w-pct-5{width:5%}.w-pct-10{width:10%}.w-pct-15{width:15%}.w-pct-20{width:20%}
.w-pct-25{width:25%}.w-pct-30{width:30%}.w-pct-35{width:35%}.w-pct-40{width:40%}.w-pct-45{width:45%}
.w-pct-50{width:50%}.w-pct-55{width:55%}.w-pct-60{width:60%}.w-pct-65{width:65%}.w-pct-70{width:70%}
.w-pct-75{width:75%}.w-pct-80{width:80%}.w-pct-85{width:85%}.w-pct-90{width:90%}.w-pct-95{width:95%}
.w-pct-100{width:100%}

/* ── Min-width flex items ──────────────────────────────── */
.mw-flex-130 { flex: 1; min-width: 130px; }
.mw-flex-150 { flex: 1; min-width: 150px; }

/* ── Extra sizing ──────────────────────────────────────── */
.w-30          { width: 30px; }
.w-45pct       { width: 45%; }
.w-50          { width: 50px; }
.w-70          { width: 70px; }
.w-90          { width: 90px; }
.w-8rem        { width: 8rem; }
.w-fit         { width: fit-content; }
.mw-0          { min-width: 0; }
.mw-280        { min-width: 280px; }
.mw-320        { min-width: 320px; }
.mw-380        { max-width: 380px; }
.mw-400        { max-width: 400px; }
.mw-480        { max-width: 480px; }
.mw-500        { max-width: 500px; }
.mw-600        { max-width: 600px; }
.mw-700        { max-width: 700px; }
.mw-780        { max-width: 780px; }
.mw-800        { max-width: 800px; }
.mw-820        { max-width: 820px; }
.mw-900        { max-width: 900px; }
.mnw-flex-300  { flex: 1; min-width: 300px; }
.mnw-flex-150  { min-width: 150px; }
.mnw-flex-130  { flex: 1; min-width: 130px; }
.mxh-160       { max-height: 160px; }
.mxh-60vh      { max-height: 60vh; }
.mnh-15        { min-height: 1.5rem; }
.mnh-300       { min-height: 300px; }
.h-6           { height: 6px; }
.h-280         { height: 280px; }
.h-600         { height: 600px; }
.h-full        { height: 100%; }
.fit-cover     { object-fit: cover; }

/* ── Extra font sizes ──────────────────────────────────── */
.fs-08em       { font-size: .8rem; }
.fs-085        { font-size: .85rem; }
.fs-085-em     { font-size: .85em; }
.fs-090        { font-size: .9rem; }
.fs-090em      { font-size: .9em; }
.fs-095        { font-size: .95rem; }
.fs-070rem     { font-size: .7rem; }
.fs-075rem     { font-size: .75rem; }
.fs-105        { font-size: 1.05rem; }
.fs-110        { font-size: 1.1rem; }
.fs-14         { font-size: 1.4rem; }
.fs-16         { font-size: 1.6rem; }
.fs-18         { font-size: 1.8rem; }
.fs-5rem       { font-size: 5rem; }
.fw-500        { font-weight: 500; }
.fw-600        { font-weight: 600; }
.fw-700        { font-weight: 700; }

/* ── Text extras ──────────────────────────────────────── */
.word-break-all { word-break: break-all; }
.text-strike-op50 { opacity: .5; text-decoration: line-through; }
.list-none      { list-style: none; }
.text-underline { text-decoration: underline; }
.no-underline   { text-decoration: none; }
.color-inherit  { color: inherit; }
.letter-wide    { letter-spacing: 1px; }
.letter-wide-005 { letter-spacing: 0.05em; }
.user-select-all { user-select: all; }

/* ── Colors (extras: hex ricorrenti, con fallback var) ── */
.text-blue-700 { color: #1d4ed8; }
.text-red-700  { color: #b91c1c; }
.text-orange-600 { color: #ea580c; }
.text-amber-800 { color: #92400e; }
.bg-white       { background: #fff; }
.bg-f4          { background: #f4f4f4; }
.bg-f9fafb      { background: #f9fafb; }
.bg-fff8e1      { background: #fff8e1; }
.bg-alt         { background: var(--c-bg-alt, #fafafa); }
.bg-alt-2       { background: var(--c-bg-alt, #f5f5f5); }
.bg-neutral     { background: var(--c-bg); }
.bg-blue-strong { background: #1e40af; }
.bg-hero-primary { background: linear-gradient(135deg,#34d399,#12894b); }
.bg-amber-strong { background: #ffb300; }
.bg-success-soft { background: var(--c-success-bg, #d1fae5); }
.bg-amber-soft  { background: #fef3c7; }
.bg-error-soft  { background: #fee2e2; }
.bg-error-strong { background: #7f1d1d; }
.bg-transparent { background: transparent; background: none; }
.opacity-90     { opacity: .9; }

/* ── Padding extras ────────────────────────────────────── */
.pt-2           { padding-top: 1rem; }
.py-4rem-1rem   { padding: 4rem 1rem; }
.p-3rem-1rem    { padding: 3rem 1rem; }
.p-3rem         { padding: 3rem; }
.p-2rem         { padding: 2rem; }
.p-3            { padding: .75rem; }
.py-1-3rem      { padding: .3rem .5rem; }
.p-hero         { padding: 1.5rem; }
.p-12-16        { padding: 12px 16px; }
.p-05rem        { padding: 0.5rem; }
.pl-0           { padding-left: 0; }
.pl-2           { padding-left: 1.2rem; }
.pb-1           { padding-bottom: .5rem; }
.px-05-py-03    { padding: .3rem .5rem; }

/* ── Margin extras ─────────────────────────────────────── */
.mv-05-1        { margin: .3rem 0 .5rem; }
.mv-05          { margin: .3rem 0; }
.mv-05rem       { margin: .5rem 0; }
.mv-075         { margin: .75rem 0; }
.mv-1           { margin: 1rem 0; }
.my-4           { margin-top: 2rem; margin-bottom: 2rem; }
.my-05          { margin: .3rem 0; }
.mt-1-5         { margin-top: .75rem; }
.mt-3rem-pt-05  { margin-top: 3rem; padding-top: .3rem; border-top: 1px solid var(--c-text); }
.ml-1           { margin-left: .5rem; }
.mt-05rem       { margin-top: .5rem; }
.mb-16          { margin-bottom: 16px; }
.mb-08          { margin-bottom: .8rem; }
.mb-1-5         { margin-bottom: .75rem; }
.m-0-auto       { margin: 0 auto; }
.mx-auto-mb-3   { margin: 0 auto 1.5rem; }

/* ── Display / flex composite ─────────────────────────── */
.d-flex-gap-05  { display: flex; gap: .3rem; }
.d-flex-gap-1   { display: flex; gap: .5rem; }
.d-flex-gap-2   { display: flex; gap: 1rem; }
.d-flex-gap-3   { display: flex; gap: 2rem; }
.d-flex-col     { display: flex; flex-direction: column; }
.d-inline-flex-gap-1 { display: inline-flex; gap: .5rem; }
.grid-auto-fill-200 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.grid-auto-fill-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.grid-auto-fill-380 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.5rem; }
.grid-5         { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.grid-2         { display: grid; grid-template-columns: 1fr 1fr; }
.grid-2-gap-1   { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-2-gap-3   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-2-gap-4   { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-col-full  { grid-column: 1 / -1; }
.self-center    { align-self: center; }
.self-end       { align-self: flex-end; }
.self-flex-0    { flex: 0 0 auto; }
.flex-shrink-0  { flex-shrink: 0; }
.items-flex-start { align-items: flex-start; }
.items-flex-end { align-items: flex-end; }
.justify-flex-end { justify-content: flex-end; }
.wrap-align-center { flex-wrap: wrap; align-items: center; }
.wrap-justify-center { flex-wrap: wrap; justify-content: center; }
.spread-2rem    { display: flex; justify-content: space-between; gap: 2rem; margin: 1rem 0; }
.spread-1rem    { display: flex; justify-content: space-between; gap: 1rem; }
.spread-05-sm   { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--c-text-muted, #666); margin-bottom: .3rem; }

/* ── Border extras ────────────────────────────────────── */
.b-1-6          { border: 1px solid var(--c-border); border-radius: 6px; padding: .5rem; }
.br-4           { border-radius: 4px; }
.br-50          { border-radius: 50%; }
.bt-1-text      { border-top: 1px solid var(--c-text); }
.bt-2-text      { border-top: 2px solid var(--c-text); }
.bb-1           { border-bottom: 1px solid var(--c-border); }
.bb-2-text      { border-bottom: 2px solid var(--c-text); }
.bl-4-amber     { border-left: 4px solid #ffb300; }
.bl-4-neutral   { border-left: 4px solid var(--c-border); }
.b-eee          { border-color: #eee; }
.b-1            { border: 1px solid var(--c-border); }
.b-1-shadow     { border: 1px solid var(--c-border); border-radius: 8px; padding: 1.5rem; }
.table-collapse { border-collapse: collapse; }
.overflow-auto  { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ── Line height + font ──────────────────────────────── */
.lh-2           { line-height: 2; }
.lh-16          { line-height: 1.6; }
.font-inherit   { font: inherit; }

/* ── Progress / bars ───────────────────────────────────── */
.progress-track-thin { height: 6px; background: var(--c-bg); border-radius: 4px; overflow: hidden; margin-top: .4rem; }
.progress-track-h14 { height: 14px; border-radius: 3px; min-width: 2px; }
.progress-cool { background: #3b82f6; }
.progress-hot { background: #dc2626; }

/* ── Composite specific ─────────────────────────────────── */
.chat-scroll { min-height: 300px; max-height: 60vh; overflow-y: auto; padding: .5rem; }
.field-preview { background: var(--c-bg-alt, #fafafa); padding: .5rem; border-radius: 4px; margin-top: .3rem; font-size: .8rem; max-width: 500px; overflow: auto; }
.code-block { background: #f4f4f4; padding: 1rem; overflow: auto; }
.code-cell { background: #f4f4f4; padding: .75rem; border-radius: 6px; font-size: 1.3rem; letter-spacing: 1px; user-select: all; }
.otp-code { background: #f9fafb; border: 1px solid var(--c-border); padding: 1rem; border-radius: 8px; font-size: 1.3rem; font-family: ui-monospace, monospace; letter-spacing: 0.05em; user-select: all; }
.card-warning-note { background: #fff8e1; border-left: 4px solid #ffb300; }
.link-btn-underline { background: none; border: none; color: var(--c-primary); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.badge-primary-inverse { background: #fff; color: var(--c-primary); font-weight: 600; }
.hero-primary { background: linear-gradient(135deg,#34d399,#12894b); color: #fff; padding: 1.5rem; }
.subtitle-hero { margin-top: .5rem; font-size: .85rem; opacity: .9; }
.avatar-circle { background: var(--c-primary); color: #fff; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.dot-map-marker { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.action-list-item { padding: .6rem 0; border-bottom: 1px solid var(--c-border); }
.action-list-item-flex { display: flex; align-items: center; gap: .7rem; margin-top: .4rem; }
.action-list-row { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--c-border); }
.mono-columns-2 { font-family: monospace; font-size: 1.1rem; columns: 2; max-width: 480px; }
.mono-code-list { list-style: none; padding: 0; margin: 0; font-family: monospace; font-size: 1.1rem; line-height: 2; }
.expand-header { cursor: pointer; font-size: 1.1rem; font-weight: 600; }
.expand-header-error { cursor: pointer; font-weight: 600; color: var(--c-error, #dc2626); }
.expand-header-bold { cursor: pointer; font-weight: 600; }
.compact-list-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-bottom: 1px solid var(--c-border); }
.error-callout { margin-top: 1.5rem; border-left: 4px solid var(--c-error, #dc2626); }
.warning-callout { margin-top: 1.5rem; border-left: 4px solid var(--c-warning, #f97316); }
.warning-callout-alt { margin: 1rem 0; border-left: 4px solid var(--c-warning); }
.stack-pre { white-space: pre-wrap; font-size: 0.75rem; max-width: 700px; }
.filter-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.header-flex-wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.header-mb { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.print-source { text-align: center; padding: 1.5rem; color: var(--c-muted); font-size: 0.85rem; }
.margin-full { margin: 1rem 0; min-height: 1.5rem; }
.grid-2-mt-4-gap-4 { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.mb-2-gap-1 { margin-bottom: 1rem; display: flex; gap: .5rem; align-items: center; }
.mb-08-gap-1 { margin-bottom: .8rem; display: flex; gap: .5rem; }
.list-item-min { margin-top: .75rem; padding: .75rem; border: 1px solid var(--c-border); border-radius: 6px; min-width: 320px; }
.filter-actions-mt { display: flex; gap: .5rem; margin-top: 1rem; }
.filter-actions-mt-c { display: flex; gap: .5rem; margin-top: 1rem; justify-content: center; }
.flex-gap-05-mt { display: none; gap: .5rem; align-items: center; margin-bottom: .5rem; padding: .7rem; background: var(--c-bg-alt, #f5f5f5); border-radius: 6px; }
.flex-gap-1-align-mv { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.5rem 0; }
.flex-gap-1-wrap-mv1 { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.flex-gap-3-align-wrap { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.mono-input { width: 100%; font-family: monospace; }
.mono-input-mv { width: 100%; font-family: monospace; margin: 0.5rem 0; }
.small-table { width: 100%; font-size: .85rem; }
.photo-preview { width: 100%; max-height: 160px; object-fit: cover; border-radius: 4px; }
.list-mt-3 { margin-top: 1.5rem; padding-left: 0; list-style: none; }
.list-item-mb { margin-bottom: .75rem; display: flex; gap: 1rem; align-items: flex-start; }
.icon-lg { font-size: 1.4rem; flex: 0 0 auto; }
.big-error-hero { font-size: 5rem; margin: 0; color: var(--c-error); }
.big-muted-hero { font-size: 5rem; margin: 0; color: var(--c-muted); }
.card-suggest { display: none; border-left: 4px solid var(--c-primary); margin-bottom: 1.5rem; }
.font-mono-inline { font-family: monospace; font-size: .85rem; }

/* ── Semantic colors (per gestire hex arbitrari negli array PHP) ── */
/* Corrispondenza hex → semantic: usiamo naming Tailwind-like per intensità.
   Refactor delle view: le variabili $col ora contengono queste semantiche invece
   di hex, così l'HTML resta pulito e la CSP style-src può togliere 'unsafe-inline'.
*/
.text-danger        { color: #dc2626; }
.text-danger-strong { color: #b91c1c; }
.text-warning-strong { color: #c2410c; }
.text-warning-alt   { color: #a16207; }
.text-warning-amber { color: #d97706; }
.text-warning-orange { color: #ea580c; }
.text-info-strong   { color: #1e40af; }
.text-info-alt      { color: #1d4ed8; }
.text-success-strong { color: #059669; }
.text-success-dark  { color: #065f46; }
.text-success-fresh { color: #15803d; }
.text-info-mid      { color: #0369a1; }
.text-neutral       { color: #9ca3af; }

.bg-danger          { background: #dc2626; }
.bg-danger-strong   { background: #b91c1c; }
.bg-warning-strong  { background: #c2410c; }
.bg-warning-alt     { background: #a16207; }
.bg-warning-amber   { background: #d97706; }
.bg-warning-orange  { background: #ea580c; }
.bg-info-strong     { background: #1e40af; }
.bg-info-alt        { background: #1d4ed8; }
.bg-success-strong  { background: #059669; }
.bg-success-dark    { background: #065f46; }
.bg-success-fresh   { background: #15803d; }
.bg-info-mid        { background: #0369a1; }
.bg-neutral         { background: #9ca3af; }

.bl-4-danger        { border-left: 4px solid #dc2626; }
.bl-4-danger-strong { border-left: 4px solid #b91c1c; }
.bl-4-warning-strong { border-left: 4px solid #c2410c; }
.bl-4-warning-alt   { border-left: 4px solid #a16207; }
.bl-4-warning-amber { border-left: 4px solid #d97706; }
.bl-4-warning-orange { border-left: 4px solid #ea580c; }
.bl-4-info-strong   { border-left: 4px solid #1e40af; }
.bl-4-info-alt      { border-left: 4px solid #1d4ed8; }
.bl-4-success-strong { border-left: 4px solid #059669; }
.bl-4-success-dark  { border-left: 4px solid #065f46; }
.bl-4-success-fresh { border-left: 4px solid #15803d; }
.bl-4-info-mid      { border-left: 4px solid #0369a1; }
.bl-4-neutral       { border-left: 4px solid #9ca3af; }

/* ── Progress bar dinamiche: valori width raw generati server-side.
 * Per rimuovere unsafe-inline usiamo classe .w-pct-N (step 5) definita sopra
 * insieme a class .bg-<semantic>. Snippet: max(0, min(100, round($v/5)*5)) → N.
 */

/* ── Dinamici color condizionali ─────────────────────── */
.reminder-done      { opacity: .5; }
.reminder-overdue   { background: rgba(239, 68, 68, .08); }
.note-pinned        { background: rgba(251, 191, 36, 0.08); }
.note-normal        { background: var(--c-card, #fff); }
.note-card          { padding: .7rem; border: 1px solid var(--c-border); border-radius: 6px; margin-bottom: .5rem; }

/* Score categoria colors — mappa a class name semantic (refactor scoreCategoriaColor) */
.score-ok           { color: #059669; }
.score-attenzione   { color: #d97706; }
.score-rischio      { color: #ea580c; }
.score-churn        { color: #dc2626; }
.score-nessuno      { color: #9ca3af; }
.score-bg-ok        { background: #059669; }
.score-bg-attenzione { background: #d97706; }
.score-bg-rischio   { background: #ea580c; }
.score-bg-churn     { background: #dc2626; }
.score-bg-nessuno   { background: #9ca3af; }

/* Ordini stato colors — stessa strategia di score */
.stato-bg-bozza     { background: #9ca3af; }
.stato-bg-in_firma  { background: #d97706; }
.stato-bg-firmato   { background: #1e40af; }
.stato-bg-confermato { background: #059669; }
.stato-bg-evaso     { background: #065f46; }
.stato-bg-annullato { background: #dc2626; }

/* Progress bar hot/cool (riordino) */
.bar-hot            { background: #dc2626; }
.bar-cool           { background: #3b82f6; }
.bar-h14-r3         { height: 14px; border-radius: 3px; min-width: 2px; }

/* Multiline ai_assistant */
.ai-msg             { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 8px; }
.ai-msg-user        { background: var(--c-bg); border-left: 3px solid var(--c-muted); }
.ai-msg-assistant   { background: transparent; border-left: 3px solid var(--c-primary); }

/* Leaflet map cluster marker (mappa.php) — colore per score categoria */
.cli-marker-dot { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); background: #6b7280; }
.cli-marker-ok         .cli-marker-dot { background: #10b981; }
.cli-marker-attenzione .cli-marker-dot { background: #f59e0b; }
.cli-marker-rischio    .cli-marker-dot { background: #ef4444; }
.cli-marker-churn      .cli-marker-dot { background: #7f1d1d; }
.cli-marker-default    .cli-marker-dot { background: #6b7280; }