/* =========================
   Base & layout
   ========================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.4;
  color: #222;
  background: #fafafa;
}

.container {
  max-width: 1200px;       /* limite comodo per grandi schermi */
  margin: 0 auto;
  padding: 0 16px;         /* respiro ai lati su schermi piccoli */
}

/* =========================
   Header / Navbar
   ========================= */
.header {
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 0;
  flex-wrap: wrap;         /* nav va a capo se non c’è spazio */
}

.logo {
  height: 56px;
  width: auto;
  max-width: 100%;
}

.brand {
  font-weight: 600;
  font-size: 1.1rem;
}

.nav {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.nav a {
  text-decoration: none;
  color: #0a58ca;
  padding: .35rem .6rem;
  border-radius: .4rem;
}

.nav a:hover {
  background: #eef5ff;
}

/* =========================
   Main / Footer
   ========================= */
.main {
  padding: 1rem 0 2rem;
}

.footer {
  margin-top: 2rem;
  border-top: 1px solid #e6e6e6;
  background: #fff;
  padding: 1rem 0;
  color: #666;
  font-size: .95rem;
}

/* =========================
   Card, form, inputs
   ========================= */
.card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: .6rem;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  width: 100%;
}

.card-narrow { max-width: 520px; margin: 0 auto; }
.card-wide   { max-width: 900px; margin: 0 auto; }

h1,h2,h3 { margin: .2rem 0 1rem; }
p { margin: 0 0 .75rem; }

label {
  display: block;
  font-weight: 600;
  margin: .25rem 0 .25rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-width: 0;
  padding: .55rem .6rem;
  border: 1px solid #dcdcdc;
  border-radius: .4rem;
  background: #fff;
  outline: none;
}

textarea { min-height: 90px; }

input[type="file"] {
  max-width: 100%; /* evita overflow nelle celle strette */
}

/* =========================
   Buttons
   ========================= */
.btn {
  display: inline-block;
  padding: .5rem .8rem;
  border: 1px solid #0a58ca;
  background: #0d6efd;
  color: #fff;
  border-radius: .5rem;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}

.btn:hover { filter: brightness(0.95); }

.btn.secondary {
  background: #eef5ff;
  color: #0a58ca;
  border-color: #b6d4fe;
}

.btn.secondary:hover { background: #e6f0ff; }

.btn.danger {
  background: #dc3545;
  border-color: #d12b3b;
}

.btn.danger:hover { filter: brightness(0.95); }

.actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;  /* i pulsanti vanno a capo su schermi stretti */
}

.muted { color: #777; font-size: .92rem; }

/* =========================
   Messaggi
   ========================= */
.msg { margin-top: .75rem; padding: .6rem .75rem; border-radius: .4rem; }
.msg-error { background: #fdeaea; color: #9c1f1f; border: 1px solid #f4c7c7; }

/* =========================
   Tabelle
   ========================= */
.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: .6rem;
  overflow: hidden;
}

.table th, .table td {
  padding: .6rem .6rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: top;
  word-break: break-word;  /* evita che testi lunghi escano dai margini */
}

.table thead th {
  background: #f7f9fb;
  font-weight: 700;
}

/* Se vuoi forzare una larghezza minima (opzionale): */
/* .table.force-full { min-width: 900px; } */

/* =========================
   Badge (pill)
   ========================= */
.pill {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1.2;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pill.ok {
  background: #e6f7ed;
  color: #1b7f3b;
  border-color: #bfe9cf;
}

.pill.ko {
  background: #fdeaea;
  color: #b32020;
  border-color: #f4c7c7;
}

/* =========================
   Responsive helpers
   ========================= */

/* 1) Form a griglia nei filtri: sotto i 900px va in colonna */
@media (max-width: 900px) {
  /* selettore generico: i filtri usano style inline di grid; forziamo 1 colonna */
  #filters-form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* 2) Celle con pulsanti / form: impilati in verticale su schermi stretti */
@media (max-width: 768px) {
  td > div,
  td form {
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }

  /* Pulsanti più comodi al tap, a tutta larghezza dentro la cella */
  td .btn, td .btn.secondary, td .btn.danger {
    width: 100%;
    text-align: center;
  }
}

/* 3) Header: logo e nav a capo se necessario */
@media (max-width: 640px) {
  .logo { height: 48px; }
  .brand { font-size: 1rem; }
}

/* 4) Evita overflow orizzontale globale */
img, video { max-width: 100%; height: auto; display: block; }