/* appfc.it - Reti miste AC (RLC) - UI CSS (alto contrasto)
   File: assets/ui.css
*/

/* ============ PALETTE (MODIFICA QUI) ============ */
:root{
  --bg:#0b1220;
  --card:#111a2e;
  --panel:#0c1426;

  --text:#f3f6ff;              /* testo principale molto chiaro */
  --text-soft:rgba(243,246,255,.92);
  --text-dim:rgba(243,246,255,.78);

  --border:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.22);

  --shadow:rgba(0,0,0,.28);

  --btn:#2f6fed;
  --btn-gray:#475569;
  --btn-green:#22c55e;
  --btn-orange:#f59e0b;
  --btn-red:#ef4444;

  --focus:rgba(47,111,237,.55);
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html, body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;
  background:var(--bg);
  color:var(--text);
}

.wrap{max-width:1180px;margin:0 auto;padding:18px}

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:0 10px 30px var(--shadow);
}

h1{
  font-size:20px;
  margin:0 0 10px;
  color:var(--text);
  letter-spacing:.2px;
}
h2{
  font-size:15px;
  margin:0 0 10px;
  color:var(--text-soft);
}

.small{font-size:12.5px;color:var(--text-dim);line-height:1.35}
.mini{font-size:12.5px;color:var(--text-soft);line-height:1.35}
.note{color:var(--text-soft)}

.row{display:flex;gap:12px;flex-wrap:wrap}
.field{flex:1;min-width:160px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:980px){.grid2{grid-template-columns:1fr}}

/* ============ FORM ============ */
label{
  display:block;
  font-size:13px;              /* ↑ più leggibile */
  font-weight:700;
  margin-bottom:6px;
  color:var(--text-soft);
  letter-spacing:.2px;
}

input[type="text"], select, textarea{
  width:100%;
  border-radius:10px;
  border:1px solid var(--border-strong);
  background:var(--panel);
  color:var(--text);
  padding:11px 12px;
  outline:none;
}

input[type="text"]:focus, select:focus, textarea:focus{
  box-shadow:0 0 0 3px var(--focus);
  border-color:rgba(255,255,255,.35);
}

textarea{
  min-height:110px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  line-height:1.35;
}

::placeholder{color:rgba(243,246,255,.55)}

/* Fix leggibilità option (alcuni browser) */
select option{
  background:var(--panel);
  color:var(--text);
}

/* ============ BUTTONS ============ */
.btnbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.btn{
  border:none;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  color:#fff;
  background:var(--btn);
  box-shadow:0 8px 18px rgba(47,111,237,.28);
}
.btn:hover{filter:brightness(1.10)}
.btn:active{transform:translateY(1px)}

.btn.secondary{background:var(--btn-green);box-shadow:0 8px 18px rgba(34,197,94,.22)}
.btn.gray{background:var(--btn-gray);box-shadow:none}
.btn.orange{background:var(--btn-orange);box-shadow:0 8px 18px rgba(245,158,11,.20)}
.btn.red{background:var(--btn-red);box-shadow:0 8px 18px rgba(239,68,68,.18)}

a.linkbtn{display:inline-block;text-decoration:none}

/* ============ PANEL/BUILDER ============ */
.builder{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}

/* Chip */
.chipbar{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:1px solid rgba(255,255,255,.18);
  background:#0b1220;
  color:var(--text);
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}
.chip:hover{filter:brightness(1.12)}

/* ============ MESSAGES ============ */
.okmsg{
  margin-top:10px;
  background:#102a1c;
  border:1px solid rgba(34,197,94,.25);
  color:#eafff2;
  padding:10px;
  border-radius:12px;
  display:none;
}
.warnmsg{
  margin-top:10px;
  background:#2a1f10;
  border:1px solid rgba(245,158,11,.25);
  color:#fff1d9;
  padding:10px;
  border-radius:12px;
  display:none;
}
.err{
  background:#3b1220;
  border:1px solid rgba(255,80,120,.35);
  color:#ffe0ea;
  padding:10px;
  border-radius:12px;
}

/* ============ TABLES ============ */
table{width:100%;border-collapse:collapse}
td{
  padding:8px 6px;
  border-bottom:1px solid rgba(255,255,255,.10);
  vertical-align:top;
  color:var(--text);
}
td.k{
  width:300px;
  color:var(--text-soft);
  font-weight:700;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* ============ DETAILS ============ */
details{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
}
summary{cursor:pointer;font-weight:900;color:var(--text)}

/* ============ TOP LINKS ============ */
.toplinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ============ PRESET GRID ============ */
.presetGrid{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
@media (max-width:980px){.presetGrid{grid-template-columns:1fr}}
.fileHidden{display:none}
.importModeRow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px}
.importModeRow label{margin:0}
.radioBox{display:flex;gap:8px;align-items:center}