/* ═══ MATERIKA — stile comune di hub (cornice) e app /app/ ═══════════════════ Valori ripresi dalla cornice dell'hub. Tema: - scuro = predefinito; - chiaro = ; - auto = nessun attributo: segue il dispositivo (prefers-color-scheme); - data-tema="scuro" forza lo scuro anche su un dispositivo chiaro. La scelta Auto/Chiaro/Scuro e' per utente: /api/msg/prefs/theme, copia in localStorage 'mk_tema'. REGOLE: - lime (--mk-acc) solo come FONDO, con testo nero (--mk-acc-ink); - per il testo d'accento c'e' --mk-acc-text: lime sullo scuro, oliva sul chiaro; - verde e rosso "di significato" nei dati restano ai moduli: qui non ci sono. I moduli interni (KPI, vendite, preventivatore...) NON usano questo file. */ :root{ --mk-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mk-mono:'SF Mono',ui-monospace,'Cascadia Mono','JetBrains Mono',Menlo,monospace; /* raggi */ --mk-r-xs:6px; /* pulsanti */ --mk-r-sm:8px; /* campi, pulsante principale, riquadri piccoli, avvisi */ --mk-r-md:9px; /* voci di menu, ricerca */ --mk-r-lg:12px; /* riquadri, schede, card di accesso, notifiche */ --mk-r-pill:999px; /* accento: invariato tra i temi */ --mk-acc:#e1f501;--mk-acc-hover:#edfe2b;--mk-acc-ink:#0a0a0a; --mk-logo-bg:#000000; /* rosso e ambra di stato (urgente, promemoria, avvisi) */ --mk-red:#dc2626;--mk-red-ink:#ffffff;--mk-amber:#f59e0b; /* ── scuro ── */ --mk-bg:#111111; /* fondo pagina */ --mk-bar:#1a1a1a; /* barra laterale, intestazione */ --mk-bar-hover:#2a2a2a; --mk-surf:#222222; /* riquadri, card */ --mk-surf2:#2a2a2a; /* riquadri su riquadri, campi */ --mk-surf3:#333333; --mk-bd:rgba(255,255,255,0.08);--mk-bd2:rgba(255,255,255,0.14); --mk-tx:#f0f2f7;--mk-tx2:#9ca3b4;--mk-tx3:#6b7280; --mk-acc-text:#e1f501; --mk-acc-dim:rgba(225,245,1,0.12); --mk-acc-line:rgba(225,245,1,0.40); --mk-red-text:#f87171;--mk-red-dim:rgba(248,113,113,0.14);--mk-red-line:rgba(248,113,113,0.30); --mk-amber-text:#fbbf24;--mk-amber-dim:rgba(245,158,11,0.12);--mk-amber-line:rgba(245,158,11,0.30); --mk-sh-1:0 1px 2px rgba(0,0,0,0.30); --mk-sh-2:0 12px 34px rgba(0,0,0,0.50); --mk-sh-pop:0 16px 40px rgba(0,0,0,0.35); --mk-toast:rgba(40,40,40,0.97); color-scheme:dark; } :root[data-tema="chiaro"]{ --mk-bg:#eef1f6;--mk-bar:#ffffff;--mk-bar-hover:#f1f3f7; --mk-surf:#f5f7fa;--mk-surf2:#e9edf3;--mk-surf3:#dde3ec; --mk-bd:rgba(0,0,0,0.08);--mk-bd2:rgba(0,0,0,0.14); --mk-tx:#1a1f2b;--mk-tx2:#556070;--mk-tx3:#8b94a3; --mk-acc-text:#677000;--mk-acc-dim:rgba(225,245,1,0.10);--mk-acc-line:#a3b000; --mk-red-text:#c62828;--mk-red-dim:#fff0ee;--mk-red-line:rgba(220,38,38,0.35); --mk-amber-text:#b45309;--mk-amber-dim:#fff7e6;--mk-amber-line:rgba(180,83,9,0.30); --mk-sh-1:0 1px 2px rgba(0,0,0,0.08); --mk-sh-2:0 12px 34px rgba(0,0,0,0.16); --mk-sh-pop:0 16px 40px rgba(0,0,0,0.14); --mk-toast:rgba(255,255,255,0.98); color-scheme:light; } @media (prefers-color-scheme:light){:root:not([data-tema="scuro"]){ --mk-bg:#eef1f6;--mk-bar:#ffffff;--mk-bar-hover:#f1f3f7; --mk-surf:#f5f7fa;--mk-surf2:#e9edf3;--mk-surf3:#dde3ec; --mk-bd:rgba(0,0,0,0.08);--mk-bd2:rgba(0,0,0,0.14); --mk-tx:#1a1f2b;--mk-tx2:#556070;--mk-tx3:#8b94a3; --mk-acc-text:#677000;--mk-acc-dim:rgba(225,245,1,0.10);--mk-acc-line:#a3b000; --mk-red-text:#c62828;--mk-red-dim:#fff0ee;--mk-red-line:rgba(220,38,38,0.35); --mk-amber-text:#b45309;--mk-amber-dim:#fff7e6;--mk-amber-line:rgba(180,83,9,0.30); --mk-sh-1:0 1px 2px rgba(0,0,0,0.08); --mk-sh-2:0 12px 34px rgba(0,0,0,0.16); --mk-sh-pop:0 16px 40px rgba(0,0,0,0.14); --mk-toast:rgba(255,255,255,0.98); color-scheme:light; }} /* ═══ classi di base ═══ */ /* pulsante secondario (come .btn dell'hub) */ .mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 13px;border-radius:var(--mk-r-xs); border:1px solid var(--mk-bd2);background:var(--mk-surf);color:var(--mk-tx2);font:600 12px/1.2 var(--mk-font);cursor:pointer;text-decoration:none} .mk-btn:hover{background:var(--mk-surf2);color:var(--mk-tx)} /* pulsante principale: lime pieno, testo nero (come "Entra" dell'accesso) */ .mk-btn-pri{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px;border:0;border-radius:var(--mk-r-sm); background:var(--mk-acc);color:var(--mk-acc-ink);font:700 14px/1.2 var(--mk-font);cursor:pointer} .mk-btn-pri:hover{background:var(--mk-acc-hover)} /* etichetta di campo / di sezione */ .mk-lbl{display:block;font-size:11px;color:var(--mk-tx2);font-weight:600;text-transform:uppercase;letter-spacing:.5px} /* riquadro */ .mk-box{background:var(--mk-surf2);border:1px solid var(--mk-bd);border-radius:var(--mk-r-lg);padding:14px 16px} /* campo */ .mk-inp{width:100%;padding:11px;border-radius:var(--mk-r-sm);border:1px solid var(--mk-bd2);background:var(--mk-surf2);color:var(--mk-tx);font:14px var(--mk-font);outline:none} .mk-inp:focus{border-color:var(--mk-acc-line)} /* contatore: lime con testo nero; .u = urgente (rosso) */ .mk-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--mk-r-pill); background:var(--mk-acc);color:var(--mk-acc-ink);font:700 11px var(--mk-mono)} .mk-count.u{background:var(--mk-red);color:var(--mk-red-ink)} /* targhetta (TASK, URGENTE...) */ .mk-tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase; background:var(--mk-acc);color:var(--mk-acc-ink)} .mk-tag.u{background:var(--mk-red);color:var(--mk-red-ink)} /* avviso: riquadro con filetto a sinistra (come gli Avvisi della dashboard) */ .mk-alert{display:flex;align-items:center;gap:11px;background:var(--mk-surf2);border:1px solid var(--mk-bd);border-left:3px solid var(--mk-amber); padding:11px 13px;border-radius:var(--mk-r-sm);color:var(--mk-tx);font-size:14px} .mk-alert.red{border-left-color:var(--mk-red)} /* marchio: simbolo Materika lime su nero */ .mk-logo{display:flex;align-items:center;justify-content:center;background:var(--mk-logo-bg);color:var(--mk-acc);border-radius:var(--mk-r-md);flex-shrink:0}