/* ===== S.AI.LS — Template grafici (override variabili e stili) ===== */
/* template-default: nessun override, usa :root di app.css (Attuale arancio/slate) */

/* ---- Card template: evidenziazione selezione (click) ---- */
.template-card-selected {
    border-color: var(--app-orange) !important;
    background: var(--app-orange-light) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ---- Anteprime nella pagina Template (card scelta) ---- */
/* Il markup usa classi tipo Tailwind (h-20, w-full…) ma senza Tailwind CDN: serve altezza/larghezza esplicite. */
.template-preview {
    display: block;
    width: 100%;
    height: 5rem;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}
.template-preview-default { background: linear-gradient(135deg, #f8fafc 0%, #fff7ed 50%, #ea580c 100%); }
.template-preview-blu { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #93c5fd 100%); }
.template-preview-chiaro-classico { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #64748b 100%); }
.template-preview-chiaro-verde { background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 50%, #15803d 100%); }
.template-preview-chiaro-lavanda { background: linear-gradient(135deg, #f5f3ff 0%, #c4b5fd 50%, #6d28d9 100%); }
.template-preview-scuro-slate { background: linear-gradient(135deg, #0f172a 0%, #334155 50%, #64748b 100%); }
.template-preview-scuro-blu { background: linear-gradient(135deg, #0c1929 0%, #1e3a5f 50%, #3b82f6 100%); }
.template-preview-scuro-carbonio { background: linear-gradient(135deg, #0a0a0a 0%, #262626 50%, #525252 100%); }
.template-preview-creatio { background: linear-gradient(135deg, #3d2b56 0%, #5c4a6e 50%, #7c6b8e 100%); }
.template-preview-new {
    background: linear-gradient(135deg, #312e81 0%, #4f46e5 42%, #eef2ff 100%);
}

/* ========== TEMPLATE NEW (CRM enterprise HD: viola/blu regale, sidebar chiara) ========== */
body.template-new {
    --app-bg: #f4f4f7;
    --app-panel-bg: #ffffff;
    --app-border: #e4e4e9;
    --app-border-accent: #c7c7d2;
    --app-border-strong: #a1a1aa;
    --app-text: #18181b;
    --app-text-muted: #52525b;
    --app-text-soft: #71717a;
    --app-accent: #4338ca;
    --app-accent-hover: #3730a3;
    --app-menu-active-bg: #eef2ff;
    --app-menu-active-border: #6366f1;
    --app-heading: #09090b;
    --app-orange: #4338ca;
    --app-orange-light: #eef2ff;
    --app-orange-border: #312e81;
    --app-orange-soft: #a5b4fc;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.template-new .topbar {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border-bottom: 1px solid rgba(24, 24, 27, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px -8px rgba(67, 56, 202, 0.12);
}

body.template-new .topbar::after {
    height: 3px;
    background: linear-gradient(90deg, #312e81 0%, #4f46e5 38%, #6366f1 72%, #a5b4fc 100%);
    opacity: 1;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

body.template-new .mysales-sidebar::before {
    background: linear-gradient(90deg, #4338ca 0%, #6366f1 50%, #a5b4fc 100%);
    height: 3px;
    opacity: 1;
}

body.template-new .mysales-sidebar {
    background:
        radial-gradient(105% 58% at 50% -8%, rgba(67, 56, 202, 0.07) 0%, transparent 52%),
        linear-gradient(180deg, #f4f4f7 0%, #ececf1 100%);
    border-right: 1px solid rgba(24, 24, 27, 0.08);
    box-shadow:
        4px 0 32px rgba(15, 23, 42, 0.06),
        1px 0 0 rgba(255, 255, 255, 0.9) inset;
}

body.template-new .mysales-sidebar__head {
    border-bottom-color: rgba(24, 24, 27, 0.08);
}

body.template-new .mysales-sidebar__brand-title {
    color: var(--app-heading);
    font-weight: 700;
    letter-spacing: -0.03em;
}

body.template-new .mysales-sidebar__brand-sub {
    color: var(--app-text-soft);
    font-weight: 500;
}

body.template-new .mysales-sidebar__logo {
    border-color: #4338ca;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(67, 56, 202, 0.12),
        0 4px 14px rgba(67, 56, 202, 0.15);
}

body.template-new .mysales-content-quick {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border-bottom: 1px solid rgba(24, 24, 27, 0.07);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

body.template-new .mysales-mobile-bar {
    background: #fff;
    border-bottom: 1px solid rgba(24, 24, 27, 0.08);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

body.template-new .mysales-bell {
    border-radius: 12px;
    transition:
        background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

body.template-new .mysales-bell:hover {
    background: #eef2ff;
    color: #4338ca;
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 2px 8px rgba(67, 56, 202, 0.12);
}

body.template-new .mysales-top-esci {
    border-radius: 12px;
    color: var(--app-text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition:
        background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s ease,
        box-shadow 0.2s ease;
}

body.template-new .mysales-top-esci:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.25);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.08);
}

body.template-new .mysales-panel .card,
body.template-new .mysales-panel .table {
    border-radius: 12px;
}

body.template-new .mysales-panel .card {
    border: 1px solid rgba(24, 24, 27, 0.08);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 32px -12px rgba(15, 23, 42, 0.08);
}

body.template-new .mysales-panel .card-header {
    background: linear-gradient(180deg, #fafaff 0%, #f4f4f7 100%);
    border-bottom: 1px solid rgba(24, 24, 27, 0.07);
    color: var(--app-heading);
    font-weight: 600;
}

body.template-new .mysales-panel .table thead th {
    background: linear-gradient(180deg, #3730a3 0%, #312e81 100%);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

body.template-new .mysales-panel .table tbody tr:nth-child(even) {
    background: #fafafa;
}

body.template-new .mysales-panel .table tbody tr:hover {
    background: #eef2ff !important;
}

body.template-new .mysales-panel .btn-primary {
    background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
    border-color: #3730a3;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 6px rgba(67, 56, 202, 0.35);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

body.template-new .mysales-panel .btn-primary:hover {
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
    border-color: #4338ca;
    filter: brightness(1.02);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 4px 16px rgba(67, 56, 202, 0.4);
}

body.template-new .mysales-panel .btn-primary:active {
    transform: translateY(1px);
}

body.template-new .mysales-panel .btn-warning {
    background: #f4f4f5;
    border-color: #d4d4d8;
    color: #3f3f46;
    border-radius: 10px;
    font-weight: 600;
}

body.template-new .mysales-panel .btn-warning:hover {
    background: #e4e4e7;
    border-color: #a1a1aa;
    color: #18181b;
}

body.template-new .panel {
    background: var(--app-panel-bg);
    border: 1px solid rgba(24, 24, 27, 0.08);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 16px 40px -20px rgba(15, 23, 42, 0.1);
}

body.template-new .page-title,
body.template-new h1,
body.template-new h2,
body.template-new h3 {
    color: var(--app-heading);
    letter-spacing: -0.02em;
}

body.template-new .page-breadcrumb {
    color: var(--app-text-soft);
}

body.template-new .form-control,
body.template-new .form-select,
body.template-new input.field,
body.template-new select.field,
body.template-new textarea.field {
    border-radius: 10px;
    border-color: #d4d4d8;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

body.template-new .form-control:focus,
body.template-new .form-select:focus,
body.template-new input.field:focus,
body.template-new select.field:focus,
body.template-new textarea.field:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}

body.template-new.login-page {
    background: linear-gradient(165deg, #eef2ff 0%, #f4f4f7 45%, #e0e7ff 100%);
}

body.template-new.login-page .login-card {
    border: 1px solid rgba(24, 24, 27, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 24px 48px -12px rgba(67, 56, 202, 0.18);
}

body.template-new.login-page .login-logo-box {
    border-color: #4338ca;
    box-shadow: 0 4px 16px rgba(67, 56, 202, 0.2);
}

body.template-new.login-page .login-button {
    background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
    border-color: #3730a3;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(67, 56, 202, 0.35);
}

body.template-new.login-page .login-button:hover {
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
    filter: brightness(1.03);
}

body.template-new .template-card-selected {
    border-color: #6366f1 !important;
    background: #eef2ff !important;
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.35),
        0 8px 28px rgba(67, 56, 202, 0.15) !important;
}

/* ========== TEMPLATE BLU (stile login S.AI.LS - img1) ========== */
body.template-blu {
    --app-bg: #1e40af;
    --app-panel-bg: #1e3a8a;
    --app-border: #3b82f6;
    --app-border-accent: #60a5fa;
    --app-border-strong: #2563eb;
    --app-text: #ffffff;
    --app-text-muted: #e0e7ff;
    --app-text-soft: #c7d2fe;
    --app-accent: #60a5fa;
    --app-accent-hover: #93c5fd;
    --app-menu-active-bg: #2563eb;
    --app-menu-active-border: #93c5fd;
    --app-heading: #ffffff;
    --app-orange: #60a5fa;
    --app-orange-light: #1e3a8a;
    --app-orange-border: #93c5fd;
    --app-orange-soft: #3b82f6;
    --mysales-table-wrap-bg: #f1f5f9;
}
body.template-blu {
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
body.template-blu .topbar::after {
    background: linear-gradient(90deg, #3b82f6 0%, #93c5fd 100%);
}
body.template-blu .mysales-sidebar::before {
    background: linear-gradient(90deg, #3b82f6 0%, #93c5fd 100%);
}
body.template-blu .brand-title {
    color: #fff;
}
body.template-blu .brand-sub {
    color: #c7d2fe;
}
body.template-blu .brand-logo-wrap {
    border-color: #60a5fa;
    background: #1e3a8a;
}
body.template-blu .menu-link {
    color: #e0e7ff;
}
body.template-blu .menu-link:hover,
body.template-blu .menu-link-active {
    color: #fff;
    background: rgba(59, 130, 246, 0.3);
    border-color: #93c5fd;
}
body.template-blu .panel {
    background: #1e3a8a;
    border-color: #3b82f6;
}
body.template-blu .page-title,
body.template-blu h1, body.template-blu h2, body.template-blu h3 {
    color: #fff;
}
body.template-blu .page-breadcrumb {
    color: #c7d2fe;
}
body.template-blu .btn-primary {
    background: #3b82f6;
    border-color: #2563eb;
    color: #fff;
}
body.template-blu .btn-primary:hover {
    background: #60a5fa;
}
body.template-blu input.field,
body.template-blu select.field,
body.template-blu textarea.field {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}
body.template-blu .top-logout {
    color: #c7d2fe;
}
body.template-blu .top-logout:hover {
    color: #fff;
}

/* ========== TEMPLATE CHIARO CLASSICO ========== */
body.template-chiaro-classico {
    --app-bg: #e8ecf1;
    --app-panel-bg: #f8fafc;
    --app-border: #e2e8f0;
    --app-border-accent: #94a3b8;
    --app-border-strong: #cbd5e1;
    --app-text: #1e293b;
    --app-text-muted: #475569;
    --app-text-soft: #64748b;
    --app-accent: #475569;
    --app-accent-hover: #334155;
    --app-menu-active-bg: #e2e8f0;
    --app-menu-active-border: #94a3b8;
    --app-heading: #0f172a;
    --app-orange: #475569;
    --app-orange-light: #f1f5f9;
    --app-orange-border: #334155;
    --app-orange-soft: #cbd5e1;
    --mysales-table-wrap-bg: #f1f5f9;
}
body.template-chiaro-classico .topbar::after {
    background: linear-gradient(90deg, #475569 0%, #94a3b8 100%);
}

/* ========== TEMPLATE CHIARO VERDE ========== */
body.template-chiaro-verde {
    --app-bg: #f0fdf4;
    --app-panel-bg: #ffffff;
    --app-border: #bbf7d0;
    --app-border-accent: #86efac;
    --app-border-strong: #86efac;
    --app-text: #14532d;
    --app-text-muted: #166534;
    --app-text-soft: #15803d;
    --app-accent: #15803d;
    --app-accent-hover: #166534;
    --app-menu-active-bg: #dcfce7;
    --app-menu-active-border: #22c55e;
    --app-heading: #052e16;
    --app-orange: #15803d;
    --app-orange-light: #dcfce7;
    --app-orange-border: #166534;
    --app-orange-soft: #86efac;
}
body.template-chiaro-verde .topbar::after {
    background: linear-gradient(90deg, #15803d 0%, #22c55e 100%);
}

/* ========== TEMPLATE CHIARO LAVANDA ========== */
body.template-chiaro-lavanda {
    --app-bg: #f5f3ff;
    --app-panel-bg: #ffffff;
    --app-border: #c4b5fd;
    --app-border-accent: #a78bfa;
    --app-border-strong: #ddd6fe;
    --app-text: #4c1d95;
    --app-text-muted: #5b21b6;
    --app-text-soft: #6d28d9;
    --app-accent: #6d28d9;
    --app-accent-hover: #5b21b6;
    --app-menu-active-bg: #ede9fe;
    --app-menu-active-border: #8b5cf6;
    --app-heading: #3b0764;
    --app-orange: #6d28d9;
    --app-orange-light: #ede9fe;
    --app-orange-border: #5b21b6;
    --app-orange-soft: #c4b5fd;
}
body.template-chiaro-lavanda .topbar::after {
    background: linear-gradient(90deg, #6d28d9 0%, #a78bfa 100%);
}

/* ========== TEMPLATE SCURO SLATE ========== */
body.template-scuro-slate {
    --app-bg: #0f172a;
    --app-panel-bg: #1e293b;
    --app-border: #334155;
    --app-border-accent: #64748b;
    --app-border-strong: #475569;
    --app-text: #f1f5f9;
    --app-text-muted: #cbd5e1;
    --app-text-soft: #94a3b8;
    --app-accent: #94a3b8;
    --app-accent-hover: #cbd5e1;
    --app-menu-active-bg: #334155;
    --app-menu-active-border: #64748b;
    --app-heading: #ffffff;
    --app-orange: #f97316;
    --app-orange-light: #1e293b;
    --app-orange-border: #fb923c;
    --app-orange-soft: #ea580c;
    --mysales-table-wrap-bg: #f1f5f9;
}
body.template-scuro-slate .topbar::after {
    background: linear-gradient(90deg, #475569 0%, #64748b 100%);
}
body.template-scuro-slate input.field,
body.template-scuro-slate select.field,
body.template-scuro-slate textarea.field {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

/* ========== TEMPLATE SCURO BLU ========== */
body.template-scuro-blu {
    --app-bg: #0c1929;
    --app-panel-bg: #1e3a5f;
    --app-border: #1e40af;
    --app-border-accent: #3b82f6;
    --app-border-strong: #2563eb;
    --app-text: #e0e7ff;
    --app-text-muted: #c7d2fe;
    --app-text-soft: #93c5fd;
    --app-accent: #60a5fa;
    --app-accent-hover: #93c5fd;
    --app-menu-active-bg: #1e40af;
    --app-menu-active-border: #3b82f6;
    --app-heading: #ffffff;
    --app-orange: #60a5fa;
    --app-orange-light: #1e3a5f;
    --app-orange-border: #93c5fd;
    --app-orange-soft: #3b82f6;
    --mysales-table-wrap-bg: #e8eef7;
}
body.template-scuro-blu .topbar::after {
    background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
}
body.template-scuro-blu input.field,
body.template-scuro-blu select.field,
body.template-scuro-blu textarea.field {
    background: #1e3a8a;
    border-color: #2563eb;
    color: #e0e7ff;
}

/* ========== TEMPLATE SCURO CARBONIO ========== */
body.template-scuro-carbonio {
    --app-bg: #0a0a0a;
    --app-panel-bg: #171717;
    --app-border: #404040;
    --app-border-accent: #525252;
    --app-border-strong: #737373;
    --app-text: #fafafa;
    --app-text-muted: #d4d4d4;
    --app-text-soft: #a3a3a3;
    --app-accent: #a3a3a3;
    --app-accent-hover: #d4d4d4;
    --app-menu-active-bg: #262626;
    --app-menu-active-border: #525252;
    --app-heading: #ffffff;
    --app-orange: #f97316;
    --app-orange-light: #262626;
    --app-orange-border: #fb923c;
    --app-orange-soft: #ea580c;
    --mysales-table-wrap-bg: #f4f4f5;
}
body.template-scuro-carbonio .topbar::after {
    background: linear-gradient(90deg, #404040 0%, #737373 100%);
}
body.template-scuro-carbonio input.field,
body.template-scuro-carbonio select.field,
body.template-scuro-carbonio textarea.field {
    background: #262626;
    border-color: #404040;
    color: #fafafa;
}

/* ---- Template scuri: niente righe chiare, solo caratteri chiari (testo leggibile su sfondo scuro) ---- */
body.template-scuro-slate .dark-table tbody tr,
body.template-scuro-blu .dark-table tbody tr,
body.template-scuro-carbonio .dark-table tbody tr {
    background: var(--app-panel-bg) !important;
    color: var(--app-text);
}
body.template-scuro-slate .dark-table tbody tr:nth-child(even),
body.template-scuro-blu .dark-table tbody tr:nth-child(even),
body.template-scuro-carbonio .dark-table tbody tr:nth-child(even) {
    background: var(--app-border) !important;
}
body.template-scuro-slate .dark-table tbody tr:hover,
body.template-scuro-blu .dark-table tbody tr:hover,
body.template-scuro-carbonio .dark-table tbody tr:hover {
    background: var(--app-menu-active-bg) !important;
}
body.template-scuro-slate .dark-table td,
body.template-scuro-slate .dark-table th,
body.template-scuro-blu .dark-table td,
body.template-scuro-blu .dark-table th,
body.template-scuro-carbonio .dark-table td,
body.template-scuro-carbonio .dark-table th {
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}
body.template-scuro-slate .goal-row,
body.template-scuro-blu .goal-row,
body.template-scuro-carbonio .goal-row {
    background: transparent !important;
    border-bottom-color: var(--app-border) !important;
    color: var(--app-text);
}
body.template-scuro-slate .goal-row:hover,
body.template-scuro-blu .goal-row:hover,
body.template-scuro-carbonio .goal-row:hover {
    background: var(--app-menu-active-bg) !important;
    color: var(--app-text);
}
body.template-scuro-slate .panel,
body.template-scuro-blu .panel,
body.template-scuro-carbonio .panel {
    background: var(--app-panel-bg) !important;
}
body.template-scuro-slate .status-pill,
body.template-scuro-blu .status-pill,
body.template-scuro-carbonio .status-pill {
    background: var(--app-border) !important;
    color: var(--app-text) !important;
}
body.template-scuro-slate h1, body.template-scuro-slate h2, body.template-scuro-slate h3,
body.template-scuro-slate .page-title, body.template-scuro-slate .font-semibold,
body.template-scuro-blu h1, body.template-scuro-blu h2, body.template-scuro-blu h3,
body.template-scuro-blu .page-title, body.template-scuro-blu .font-semibold,
body.template-scuro-carbonio h1, body.template-scuro-carbonio h2, body.template-scuro-carbonio h3,
body.template-scuro-carbonio .page-title, body.template-scuro-carbonio .font-semibold {
    color: var(--app-heading) !important;
}
body.template-scuro-slate .text-slate-500,
body.template-scuro-slate .text-slate-600,
body.template-scuro-slate .text-slate-800,
body.template-scuro-blu .text-slate-500,
body.template-scuro-blu .text-slate-600,
body.template-scuro-blu .text-slate-800,
body.template-scuro-carbonio .text-slate-500,
body.template-scuro-carbonio .text-slate-600,
body.template-scuro-carbonio .text-slate-800 {
    color: var(--app-text-muted) !important;
}

/* ---- Superfici bianche Bootstrap: temi scuri + blu (card, campagna live, livebar) ---- */
body.template-scuro-slate .rounded-lg.border.bg-white,
body.template-scuro-blu .rounded-lg.border.bg-white,
body.template-scuro-carbonio .rounded-lg.border.bg-white,
body.template-blu .rounded-lg.border.bg-white,
body.template-scuro-slate [class*="bg-white"],
body.template-scuro-blu [class*="bg-white"],
body.template-scuro-carbonio [class*="bg-white"],
body.template-blu [class*="bg-white"] {
    background-color: var(--app-panel-bg) !important;
    color: var(--app-text);
}

/* Card: sfondo e testo coerenti (evita “foglio bianco” su tema scuro) */
body.template-scuro-slate .card,
body.template-scuro-blu .card,
body.template-scuro-carbonio .card,
body.template-blu .card {
    background-color: var(--app-panel-bg) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text);
}

body.template-scuro-slate .card-header,
body.template-scuro-blu .card-header,
body.template-scuro-carbonio .card-header,
body.template-blu .card-header {
    background-color: var(--app-panel-bg) !important;
    border-bottom-color: var(--app-border) !important;
    color: var(--app-heading) !important;
}

body.template-scuro-slate .card-body,
body.template-scuro-blu .card-body,
body.template-scuro-carbonio .card-body,
body.template-blu .card-body {
    color: var(--app-text);
}

body.template-scuro-slate .card .text-muted,
body.template-scuro-blu .card .text-muted,
body.template-scuro-carbonio .card .text-muted,
body.template-blu .card .text-muted {
    color: var(--app-text-muted) !important;
}

body.template-scuro-slate .card .text-body,
body.template-scuro-slate .card .text-dark,
body.template-scuro-blu .card .text-body,
body.template-scuro-blu .card .text-dark,
body.template-scuro-carbonio .card .text-body,
body.template-scuro-carbonio .card .text-dark,
body.template-blu .card .text-body,
body.template-blu .card .text-dark {
    color: var(--app-text) !important;
}

/* Campagna online: maschera e riquadri anagrafica senza bianco forzato */
body.template-scuro-slate .mysales-co-anagrafica,
body.template-scuro-blu .mysales-co-anagrafica,
body.template-scuro-carbonio .mysales-co-anagrafica,
body.template-blu .mysales-co-anagrafica {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, var(--app-border) 55%, var(--app-panel-bg) 100%) !important;
    border-color: var(--app-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.template-scuro-slate .mysales-co-field-cell,
body.template-scuro-blu .mysales-co-field-cell,
body.template-scuro-carbonio .mysales-co-field-cell,
body.template-blu .mysales-co-field-cell {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--app-border) !important;
}

body.template-scuro-slate .mysales-co-storico-inline-scroll,
body.template-scuro-blu .mysales-co-storico-inline-scroll,
body.template-scuro-carbonio .mysales-co-storico-inline-scroll,
body.template-blu .mysales-co-storico-inline-scroll {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.template-scuro-slate .mysales-co .text-muted,
body.template-scuro-blu .mysales-co .text-muted,
body.template-scuro-carbonio .mysales-co .text-muted,
body.template-blu .mysales-co .text-muted {
    color: var(--app-text-muted) !important;
}

body.template-scuro-slate .mysales-co .text-body,
body.template-scuro-slate .mysales-co .text-dark,
body.template-scuro-blu .mysales-co .text-body,
body.template-scuro-blu .mysales-co .text-dark,
body.template-scuro-carbonio .mysales-co .text-body,
body.template-scuro-carbonio .mysales-co .text-dark,
body.template-blu .mysales-co .text-body,
body.template-blu .mysales-co .text-dark {
    color: var(--app-text) !important;
}

body.template-scuro-slate .mysales-co-finished,
body.template-scuro-blu .mysales-co-finished,
body.template-scuro-carbonio .mysales-co-finished,
body.template-blu .mysales-co-finished {
    background: linear-gradient(180deg, rgba(25, 135, 84, 0.14) 0%, var(--app-panel-bg) 45%) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}

/* Pannelli card coerenti con “Chiaro classico” (meno bianco puro) */
body.template-chiaro-classico .card {
    background-color: var(--app-panel-bg) !important;
    border-color: var(--app-border);
    color: var(--app-text);
}

/* ========== Login page per template ========== */
body.template-blu.login-page {
    background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
}
body.template-blu.login-page .login-panel { color: #fff; }
body.template-blu.login-page .login-select {
    background: rgba(30, 58, 138, 0.5);
    border-color: rgba(96, 165, 250, 0.5);
    color: #e0e7ff;
}
body.template-blu.login-page .login-logo-text,
body.template-blu.login-page .login-logo-sub,
body.template-blu.login-page .login-label,
body.template-blu.login-page h1 { color: #fff; }
body.template-blu.login-page .login-input {
    background: rgba(30, 58, 138, 0.4);
    border-color: rgba(59, 130, 246, 0.5);
    color: #e0e7ff;
}
body.template-blu.login-page .login-input::placeholder { color: #93c5fd; }
body.template-blu.login-page .login-button {
    background: #3b82f6;
    color: #fff;
}

body.template-chiaro-classico.login-page {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
}
body.template-chiaro-classico.login-page .login-panel { color: #1e293b; }
body.template-chiaro-classico.login-page .login-select {
    background: #fff;
    border-color: #cbd5e1;
    color: #334155;
}
body.template-chiaro-classico.login-page .login-logo-text,
body.template-chiaro-classico.login-page .login-logo-sub { color: #0f172a; }
body.template-chiaro-classico.login-page .login-label,
body.template-chiaro-classico.login-page h1 { color: #1e293b; }
body.template-chiaro-classico.login-page .login-input {
    background: #fff;
    border-color: #cbd5e1;
    color: #1e293b;
}
body.template-chiaro-classico.login-page .login-input::placeholder { color: #64748b; }
body.template-chiaro-classico.login-page .login-button {
    background: #475569;
    color: #fff;
}

body.template-chiaro-verde.login-page {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
}
body.template-chiaro-verde.login-page .login-panel { color: #14532d; }
body.template-chiaro-verde.login-page .login-select {
    background: #fff;
    border-color: #bbf7d0;
    color: #166534;
}
body.template-chiaro-verde.login-page .login-logo-text,
body.template-chiaro-verde.login-page .login-logo-sub { color: #052e16; }
body.template-chiaro-verde.login-page .login-label,
body.template-chiaro-verde.login-page h1 { color: #14532d; }
body.template-chiaro-verde.login-page .login-input {
    background: #fff;
    border-color: #bbf7d0;
    color: #14532d;
}
body.template-chiaro-verde.login-page .login-input::placeholder { color: #15803d; }
body.template-chiaro-verde.login-page .login-button {
    background: #15803d;
    color: #fff;
}

body.template-chiaro-lavanda.login-page {
    background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
}
body.template-chiaro-lavanda.login-page .login-panel { color: #4c1d95; }
body.template-chiaro-lavanda.login-page .login-select {
    background: #fff;
    border-color: #c4b5fd;
    color: #5b21b6;
}
body.template-chiaro-lavanda.login-page .login-logo-text,
body.template-chiaro-lavanda.login-page .login-logo-sub { color: #3b0764; }
body.template-chiaro-lavanda.login-page .login-label,
body.template-chiaro-lavanda.login-page h1 { color: #4c1d95; }
body.template-chiaro-lavanda.login-page .login-input {
    background: #fff;
    border-color: #c4b5fd;
    color: #4c1d95;
}
body.template-chiaro-lavanda.login-page .login-input::placeholder { color: #6d28d9; }
body.template-chiaro-lavanda.login-page .login-button {
    background: #6d28d9;
    color: #fff;
}

body.template-scuro-slate.login-page {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}
body.template-scuro-slate.login-page .login-panel { color: #f1f5f9; }
body.template-scuro-slate.login-page .login-select {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}
body.template-scuro-slate.login-page .login-logo-text,
body.template-scuro-slate.login-page .login-logo-sub,
body.template-scuro-slate.login-page .login-label,
body.template-scuro-slate.login-page h1 { color: #fff; }
body.template-scuro-slate.login-page .login-input {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}
body.template-scuro-slate.login-page .login-input::placeholder { color: #94a3b8; }
body.template-scuro-slate.login-page .login-button {
    background: #475569;
    color: #fff;
}

body.template-scuro-blu.login-page {
    background: linear-gradient(180deg, #0c1929 0%, #1e3a5f 100%);
}
body.template-scuro-blu.login-page .login-panel { color: #e0e7ff; }
body.template-scuro-blu.login-page .login-select {
    background: #1e40af;
    border-color: #2563eb;
    color: #e0e7ff;
}
body.template-scuro-blu.login-page .login-logo-text,
body.template-scuro-blu.login-page .login-logo-sub,
body.template-scuro-blu.login-page .login-label,
body.template-scuro-blu.login-page h1 { color: #fff; }
body.template-scuro-blu.login-page .login-input {
    background: #1e3a8a;
    border-color: #2563eb;
    color: #e0e7ff;
}
body.template-scuro-blu.login-page .login-input::placeholder { color: #93c5fd; }
body.template-scuro-blu.login-page .login-button {
    background: #2563eb;
    color: #fff;
}

body.template-scuro-carbonio.login-page {
    background: linear-gradient(180deg, #0a0a0a 0%, #171717 100%);
}
body.template-scuro-carbonio.login-page .login-panel { color: #fafafa; }
body.template-scuro-carbonio.login-page .login-select {
    background: #262626;
    border-color: #404040;
    color: #fafafa;
}
body.template-scuro-carbonio.login-page .login-logo-text,
body.template-scuro-carbonio.login-page .login-logo-sub,
body.template-scuro-carbonio.login-page .login-label,
body.template-scuro-carbonio.login-page h1 { color: #fff; }
body.template-scuro-carbonio.login-page .login-input {
    background: #262626;
    border-color: #404040;
    color: #fafafa;
}
body.template-scuro-carbonio.login-page .login-input::placeholder { color: #a3a3a3; }
body.template-scuro-carbonio.login-page .login-button {
    background: #404040;
    color: #fff;
}

/* ========== TEMPLATE CREATIO (menu a sinistra, blu e viola, niente verde) ========== */
body.template-creatio {
    --app-bg: #f5f5f7;
    --app-panel-bg: #ffffff;
    --app-border: #e5e5ea;
    --app-text: #1d1d1f;
    --app-text-muted: #6e6e73;
    --app-text-soft: #86868b;
    --app-heading: #1d1d1f;
    --app-accent: #5e5ce6;
    --app-accent-hover: #4846c9;
    --app-orange: #bf5af2;
    --app-orange-light: #f5f0f9;
    --app-orange-border: #5e5ce6;
    --app-orange-soft: #e5d5f5;
}
/* Pulsanti nelle pagine: blu e viola */
body.template-creatio .btn-primary {
    background: #5e5ce6;
    border-color: #4846c9;
    color: #fff;
}
body.template-creatio .btn-primary:hover {
    background: #4846c9;
    border-color: #5e5ce6;
}
body.template-creatio .btn-warning {
    background: #6d6af0;
    border-color: #5e5ce6;
    color: #fff;
}
body.template-creatio .btn-warning:hover {
    background: #5e5ce6;
}
/* Evita verde: sostituisci con blu/viola per success e azioni positive */
body.template-creatio .status-pill[style*="background:#16a34a"],
body.template-creatio .status-pill[style*="background: #16a34a"],
body.template-creatio .btn[style*="background:#16a34a"],
body.template-creatio .btn[style*="background: #16a34a"],
body.template-creatio .btn[style*="background:#15803d"],
body.template-creatio .btn[style*="background: #15803d"] {
    background: #5e5ce6 !important;
    border-color: #4846c9 !important;
    color: #fff !important;
}
body.template-creatio .goal-pct-ok {
    background: #e5d5f5 !important;
    color: #5e5ce6 !important;
}
body.template-creatio a.btn[style*="16a34a"],
body.template-creatio a.btn[style*="15803d"] {
    background: #5e5ce6 !important;
    border-color: #4846c9 !important;
    color: #fff !important;
}
/* Messaggi successo e box verdi → blu/viola */
body.template-creatio div[style*="dcfce7"],
body.template-creatio div[style*="f0fdf4"],
body.template-creatio .bg-green-50 {
    background: #e5d5f5 !important;
    border-color: #c4b5fd !important;
    color: #5e5ce6 !important;
}
body.template-creatio span.btn[style*="16a34a"],
body.template-creatio span.btn[style*="15803d"] {
    background: #5e5ce6 !important;
    border-color: #4846c9 !important;
    color: #fff !important;
}

.creatio-layout { display: flex; min-height: 100vh; }
.creatio-wrap { display: flex; flex: 1; min-width: 0; }
.creatio-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #3d2b56;
    color: #e5e0ec;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0,0,0,0.1);
}
.creatio-sidebar-brand {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}
.creatio-brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: #fff;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    padding: 8px;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.creatio-brand-link:hover { border-color: #c4b5fd; box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
.creatio-brand-link.app-logo-img-wrap { background: transparent; }
.creatio-brand-link .app-logo-img { width: 100%; height: 100%; object-fit: contain; }
.creatio-logo-svg { width: 100%; height: 100%; display: block; }
.creatio-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.creatio-brand-title { font-size: 1.15rem; font-weight: 700; color: #fff; }
.creatio-brand-sub { font-size: 0.7rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
.creatio-nav {
    flex: 1;
    padding: 0.75rem 0;
    overflow-y: auto;
}
.creatio-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}
.creatio-nav-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.creatio-nav-icon-svg {
    width: 18px;
    height: 18px;
    display: block;
}
.creatio-nav-label { flex: 1; }
.creatio-nav-link:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.creatio-nav-link-active {
    background: rgba(191, 90, 242, 0.25);
    color: #fff;
    border-left-color: #bf5af2;
}
.creatio-nav-group { margin-bottom: 0.25rem; }
.creatio-nav-group--collapsible .creatio-subnav {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-left: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
}
.creatio-nav-group--collapsible.is-open .creatio-subnav {
    max-height: 320px;
    opacity: 1;
    margin-top: 0.15rem;
    margin-bottom: 0.5rem;
}
.creatio-nav-link-toggle {
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: none;
    font: inherit;
    background: transparent;
}
.creatio-subnav {
    padding-left: 1rem;
    margin-top: 0.15rem;
    margin-bottom: 0.5rem;
}
.creatio-subnav-link {
    display: block;
    padding: 0.4rem 0.75rem;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.8rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.creatio-subnav-link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.creatio-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--app-bg);
}
.creatio-topbar {
    height: 52px;
    flex-shrink: 0;
    background: #2d1f42;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}
.creatio-topbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}
.creatio-topbar-right { display: flex; align-items: center; gap: 12px; }
.creatio-topbar-logout {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.creatio-topbar-logout:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.creatio-content {
    flex: 1;
    padding: 1rem 1.25rem;
    overflow: auto;
}
body.template-creatio .panel {
    background: var(--app-panel-bg);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
body.template-creatio .page-title { color: var(--app-heading); }
body.template-creatio .page-breadcrumb { color: var(--app-text-soft); }
/* Dashboard: badge e card senza verde */
body.template-creatio .dash-badge-ok {
    background: #e5d5f5 !important;
    color: #5e5ce6 !important;
    border-color: #5e5ce6 !important;
}
body.template-creatio .dashboard-card-completati::before {
    background: linear-gradient(180deg, #5e5ce6, #bf5af2) !important;
}
body.template-creatio .dashboard-badge-ok {
    background: none !important;
    color: #5e5ce6 !important;
}
body.template-creatio .produzione-trend-up {
    color: #5e5ce6;
}

/* Login page: sfondo bianco e cornice arancio (anche con template Creatio) */
body.template-creatio.login-page {
    background: #fff;
}
body.template-creatio.login-page .login-card {
    border: 3px solid #ea580c;
    background: #fff;
    color: #1e293b;
}
body.template-creatio.login-page .login-select {
    background: #fff;
    border-color: #cbd5e1;
    color: #1e293b;
}
body.template-creatio.login-page .login-logo-text,
body.template-creatio.login-page .login-logo-sub,
body.template-creatio.login-page .login-label,
body.template-creatio.login-page h1 { color: #1e293b; }
body.template-creatio.login-page .login-logo-box { border-color: #ea580c; }
body.template-creatio.login-page .login-input {
    background: #fff;
    border-color: #cbd5e1;
    color: #1e293b;
}
body.template-creatio.login-page .login-input::placeholder { color: #64748b; }
body.template-creatio.login-page .login-button {
    background: #ea580c;
    color: #fff;
    border-color: #c2410c;
}

/* ---------- Statistiche Creatio (tab + KPI + grafici come img 3/4) ---------- */
.statistiche-creatio { padding: 0; }
.statistiche-creatio-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--app-border);
    margin-bottom: 1.25rem;
}
.statistiche-tab {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--app-text-soft);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}
.statistiche-tab:hover { color: var(--app-text); }
.statistiche-tab-active {
    color: #5e5ce6;
    border-bottom-color: #5e5ce6;
}
.statistiche-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
    .statistiche-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.statistiche-kpi-card {
    border-radius: 12px;
    padding: 1.25rem;
    color: #fff;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.statistiche-kpi-label {
    font-size: 0.8rem;
    opacity: 0.95;
    margin-bottom: 0.35rem;
}
.statistiche-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
}
.statistiche-kpi-blue { background: linear-gradient(135deg, #5e5ce6, #7d7af5); }
.statistiche-kpi-sky { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.statistiche-kpi-orange { background: linear-gradient(135deg, #f97316, #fb923c); }
.statistiche-kpi-violet { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
/* Due grafici affiancati (stessa larghezza); su schermo stretto uno sotto l’altro */
.statistiche-charts-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: stretch;
}
@media (max-width: 900px) {
    .statistiche-charts-row { grid-template-columns: 1fr; }
}
.statistiche-charts-row > .statistiche-chart-cell {
    min-width: 0;
}
.statistiche-chart-full { grid-column: 1 / -1; }
.statistiche-chart-wide { }
.statistiche-chart-card {
    background: var(--app-panel-bg);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.statistiche-chart-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-text);
}
.statistiche-legend-icon {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}
.statistiche-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 200px;
}
.statistiche-chart-donut { min-height: 220px; }

.statistiche-section-card {
    background: var(--app-panel-bg);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.statistiche-section-card--full { grid-column: 1 / -1; }
.statistiche-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--app-heading);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--app-border);
}
.statistiche-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.statistiche-list li {
    padding: 0.35rem 0;
    font-size: 0.9rem;
    color: var(--app-text);
}
.statistiche-section-card .text-center { text-align: center; }
.statistiche-kpi-row--wrap {
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: 1fr;
}

/* ---------- Dashboard Creatio: KPI tiles come terza img ---------- */
body.template-creatio .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 1100px) {
    body.template-creatio .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
body.template-creatio .dash-hero {
    margin-bottom: 1.25rem;
}
body.template-creatio .goals-sidial-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 900px) {
    body.template-creatio .goals-sidial-wrap { grid-template-columns: 1fr; }
}

/* ---------- Dettaglio Goals operatori (iframe): card stile Creatio come quarta img ---------- */
.op-detail-creatio .op-inner { max-width: 960px; }
.op-detail-creatio .op-card {
    border-radius: 12px;
    border: 1px solid rgba(94, 92, 230, 0.2);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.op-detail-creatio .op-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 768px) {
    .op-detail-creatio .op-grid { grid-template-columns: repeat(2, 1fr); }
}
.op-detail-creatio .op-card.op-col-4:nth-child(1) { background: linear-gradient(135deg, #1e3a5f, #2563eb); color: #fff; }
.op-detail-creatio .op-card.op-col-4:nth-child(2) { background: linear-gradient(135deg, #1e40af, #3b82f6); color: #fff; }
.op-detail-creatio .op-card.op-col-4:nth-child(3) { background: linear-gradient(135deg, #c2410c, #f97316); color: #fff; }
.op-detail-creatio .op-card.op-col-4:nth-child(4) { background: linear-gradient(135deg, #5e5ce6, #8b5cf6); color: #fff; }
/* Testo chiaro solo sulle prime 4 card colorate; le card bianche (5+) restano con testo scuro */
.op-detail-creatio .op-card.op-col-4:nth-child(1) .kpi-val,
.op-detail-creatio .op-card.op-col-4:nth-child(1) .kpi-lab,
.op-detail-creatio .op-card.op-col-4:nth-child(1) h3,
.op-detail-creatio .op-card.op-col-4:nth-child(2) .kpi-val,
.op-detail-creatio .op-card.op-col-4:nth-child(2) .kpi-lab,
.op-detail-creatio .op-card.op-col-4:nth-child(2) h3,
.op-detail-creatio .op-card.op-col-4:nth-child(3) .kpi-val,
.op-detail-creatio .op-card.op-col-4:nth-child(3) .kpi-lab,
.op-detail-creatio .op-card.op-col-4:nth-child(3) h3,
.op-detail-creatio .op-card.op-col-4:nth-child(4) .kpi-val,
.op-detail-creatio .op-card.op-col-4:nth-child(4) .kpi-lab,
.op-detail-creatio .op-card.op-col-4:nth-child(4) h3 { color: #fff !important; }
.op-detail-creatio .op-card.op-col-4:nth-child(1) .kpi-lab,
.op-detail-creatio .op-card.op-col-4:nth-child(2) .kpi-lab,
.op-detail-creatio .op-card.op-col-4:nth-child(3) .kpi-lab,
.op-detail-creatio .op-card.op-col-4:nth-child(4) .kpi-lab { opacity: 0.95; }
.op-detail-creatio .op-card.op-col-4:nth-child(1) .kpi-val,
.op-detail-creatio .op-card.op-col-4:nth-child(2) .kpi-val,
.op-detail-creatio .op-card.op-col-4:nth-child(3) .kpi-val,
.op-detail-creatio .op-card.op-col-4:nth-child(4) .kpi-val { font-size: 1.5rem; }
.op-detail-creatio .op-card.op-col-4:nth-child(1) h3,
.op-detail-creatio .op-card.op-col-4:nth-child(2) h3,
.op-detail-creatio .op-card.op-col-4:nth-child(3) h3,
.op-detail-creatio .op-card.op-col-4:nth-child(4) h3 { opacity: 0.95; }
.op-detail-creatio .op-card h3 { opacity: 0.95; }
.op-detail-creatio .op-header.op-card {
    background: linear-gradient(135deg, #3d2b56, #5e5ce6);
    color: #fff;
    border: none;
}
/* Testo chiaro sul banner viola (nome operatore e username) */
.op-detail-creatio .op-header .op-name,
.op-detail-creatio .op-header .kpi-lab { color: #fff !important; }
.op-detail-creatio .op-name { color: #fff !important; }
.op-detail-creatio table th { background: #5e5ce6; color: #fff; }
.op-detail-creatio .op-card.op-col-12 { grid-column: 1 / -1; }