/*
 * connettore.css — solo cio' che il design system dei gestionali (se-ui.css) non ha.
 * Usa i token di se-ui.css (--ink, --muted, --surface, --line, --brand, --ok, --bad...).
 */

/* ---------- marchio (niente immagini: il connettore non ha un logo suo) ---------- */
.cn-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--brand);color:var(--brand-ink);flex:none}
.cn-mark svg{width:18px;height:18px}
.cn-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.cn-logo:hover{text-decoration:none;color:var(--ink)}
.cn-name{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.cn-name b{font-family:var(--f-display);font-weight:700;font-size:16px}
.cn-name span{font-size:11.5px;color:var(--muted);white-space:nowrap}
:root[data-barra="compatta"] .cn-name,:root[data-barra="compatta"] .cn-logo small{display:none}
.top-logo.cn-mark{width:30px;height:30px}
.top-logo.cn-mark svg{width:16px;height:16px}

/* ---------- pagina di accesso ---------- */
.cn-login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.cn-login-brand{background:var(--surface-2);border-right:1px solid var(--line);padding:56px 48px;display:flex;flex-direction:column;gap:18px}
.cn-logo-big{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-size:20px}
.cn-login-brand h1{font-family:var(--f-display);font-weight:650;font-size:34px;line-height:1.12;margin:24px 0 0;letter-spacing:-.015em;color:var(--ink)}
.cn-login-brand h1 em{font-style:normal;color:var(--brand-ink)}
.cn-login-brand p{color:var(--ink-2);font-size:15px;max-width:460px;margin:0}
.cn-feat{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.cn-feat li{display:flex;gap:8px;align-items:center;color:var(--ink-2)}
.cn-feat svg{width:16px;height:16px;color:var(--ok)}
.cn-login-foot{margin-top:auto;font-size:12.5px;color:var(--muted)}
.cn-login-form{display:grid;place-items:center;padding:32px 16px}
.cn-login-box{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.cn-login-box h2{font-family:var(--f-display);font-weight:650;font-size:24px;margin:0}
@media (max-width:860px){.cn-login{grid-template-columns:minmax(0,1fr)}.cn-login-brand{display:none}}

/* ---------- stati dei documenti ---------- */
.cn-stato{white-space:nowrap}
.cn-mono{font-family:var(--f-mono, 'JetBrains Mono', monospace);font-size:12.5px}
.cn-muted{color:var(--muted)}
.cn-scad.vicina{color:var(--bad);font-weight:600}

/* ---------- cruscotto ---------- */
.cn-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cn-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1040px){.cn-grid2,.cn-grid3{grid-template-columns:minmax(0,1fr)}}
.cn-barre{display:flex;flex-direction:column;gap:8px}
.cn-barra{display:grid;grid-template-columns:140px minmax(0,1fr) 48px;gap:10px;align-items:center;font-size:13px}
.cn-barra .tr{height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.cn-barra .tr i{display:block;height:100%;background:var(--s1);border-radius:5px}
.cn-barra .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
@media (max-width:480px){.cn-barra{grid-template-columns:max-content minmax(0,1fr) 32px}}

/* ---------- blocchi di testo tecnico (XML, payload) ---------- */
.cn-pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px;font-family:var(--f-mono, 'JetBrains Mono', monospace);font-size:12px;max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-all}

/* ---------- ritocchi del guscio ---------- */
.se-card .hd h2{display:inline-flex;align-items:center;gap:8px}
.se-card .hd h2 svg{width:16px;height:16px;flex:none;color:var(--muted)}
.cn-logo{position:relative}
.cn-logo small.test{position:absolute;left:44px;bottom:-12px;margin:0;font-size:9.5px}
.cn-login-box .tag{align-self:flex-start}
.ph h1 .pill{vertical-align:middle;margin-left:6px;font-family:var(--f-body)}