/* style.css */

:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --shadow:0 10px 30px rgba(0,0,0,.08);

  --primary:#111827;
  --primaryText:#ffffff;

  --danger:#e11d48;
  --dangerText:#ffffff;

  --successBg:#dcfce7;
  --successText:#166534;

  --dangerBg:#ffe4e6;
  --dangerLabel:#9f1239;

  --mutedBg:#f1f5f9;
  --mutedLabel:#334155;

  --radius:16px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}

.wrap{max-width:1320px;margin:24px auto;padding:0 14px}
.page{min-height:70vh;display:flex;justify-content:center;align-items:flex-start;padding-top:6vh}

h1{margin:0 0 4px;font-size:26px;letter-spacing:-.02em}
h2{margin:0 0 12px;font-size:18px;letter-spacing:-.01em}
p{margin:0}

a{color:inherit}
.muted{color:var(--muted)}
.small{font-size:12px}
.strong{font-weight:700}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}
.break{word-break:break-all}

.mt-6{margin-top:6px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:14px;
}
.card-narrow{max-width:520px;width:100%}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.card-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}

.topbar{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.inline{display:inline}

.alert{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  margin-bottom:14px;
}
.alert-success{background:var(--successBg);color:var(--successText);border-color:#bbf7d0}
.alert-danger{background:var(--dangerBg);color:var(--dangerLabel);border-color:#fecdd3}
.alert-info{border-color:var(--border); background:#f1f5f9}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--border);
  padding:10px 12px;
  text-decoration:none;
  cursor:pointer;
  background:#fff;
  color:var(--text);
  font-weight:600;
}
.btn:hover{filter:brightness(.98)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primaryText)}
.btn-secondary{background:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--dangerText)}
.btn-sm{padding:8px 10px;border-radius:10px;font-size:13px}

.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.badge-success{background:var(--successBg);color:var(--successText)}
.badge-danger{background:var(--dangerBg);color:var(--dangerLabel)}
.badge-muted{background:var(--mutedBg);color:var(--mutedLabel)}

.form{display:flex;flex-direction:column;gap:10px}
.label{font-size:12px;color:var(--muted);font-weight:700;margin-top:4px}
.input{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.input:focus{border-color:#cbd5e1}
.input-sm{padding:8px 10px;border-radius:10px;font-size:13px}

.form-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.field{min-width:0}
.field-actions{display:flex;flex-direction:column;justify-content:flex-end}
.col-2{grid-column:span 2}

.form-inline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.form-inline .input{flex:1;min-width:180px}
.form-inline .input[type="datetime-local"]{min-width:210px}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:14px;
}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
  min-width:1180px;
}
.table th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  padding:0 12px 6px;
}
.table td{
  background:#fff;
  border:1px solid var(--border);
  padding:10px 12px;
  vertical-align:top;
}
.table tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}
.w-220{width:220px}

.stack{display:flex;flex-direction:column;gap:4px}
.vstack{display:flex;flex-direction:column;gap:8px}

@media (max-width: 980px){
  .grid-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .col-2{grid-column:span 1}
  .actions{width:100%;justify-content:flex-start}
}
.btn-copy{gap:8px}
.btn-copy.is-copying{opacity:.75;pointer-events:none}
.btn-copy.is-copied{border-color:#bbf7d0}

/* Users: tabella un po' pi첫 comoda */
.table-users{min-width:980px}

/* Users: toggle switch */
.toggle-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.switch{position:relative;display:inline-block;width:46px;height:26px}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background:#cbd5e1;border-radius:999px;transition:.2s;
  border:1px solid var(--border);
}
.slider:before{
  position:absolute;content:"";height:20px;width:20px;left:3px;top:2px;
  background:white;border-radius:999px;transition:.2s;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.switch input:checked + .slider{background:#111827}
.switch input:checked + .slider:before{transform:translateX(20px)}

.switch-disabled{opacity:.5;pointer-events:none}

.login-links{
  margin-top:12px;
  display:flex;
  justify-content:flex-end; /* a destra, più “pulito” */
}

.login-links{ margin-top:12px; }
.login-links a{ text-decoration:underline; }

.hstack{
  display:flex;
  gap:8px;
  align-items:center;
}