/* Stil simplu, cu litere mari si culori clare — usor de citit si de folosit. */

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  color: #222;
  background: #f4f6f5;
  margin: 0;
}

.antet {
  background: #1b4332;
  color: #fff;
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.sigla {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.meniu { display: flex; flex-wrap: wrap; gap: 6px; }

.meniu a {
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 15px;
}

.meniu a:hover { background: #2d6a4f; }

.continut { padding: 20px; max-width: 1400px; margin: 0 auto; }

.subsol {
  text-align: center;
  color: #777;
  font-size: 13px;
  padding: 20px;
}

h1 { font-size: 26px; margin-top: 0; }
h2 { font-size: 20px; }

.mesaj {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 16px;
}
.mesaj-ok { background: #d8f3dc; color: #1b4332; }
.mesaj-eroare { background: #ffe0e0; color: #8a1c1c; }

.buton, button, input[type=submit] {
  display: inline-block;
  background: #1b4332;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}
.buton:hover, button:hover, input[type=submit]:hover { background: #2d6a4f; }
.buton-secundar { background: #6c757d; }
.buton-secundar:hover { background: #565e64; }
.buton-pericol { background: #a33; }
.buton-pericol:hover { background: #822; }

.card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #e0e0e0; font-size: 15px; }
th { background: #eef3f0; }

form label { display: block; margin-top: 14px; font-weight: 600; }
form input, form select, form textarea {
  width: 100%;
  padding: 9px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 4px;
}
form textarea { min-height: 70px; }
.linie-butoane { margin-top: 20px; display: flex; gap: 10px; }

.eticheta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
}

/* --- calendarul --- */
.bara-navigare {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.tabel-calendar-scroll { overflow-x: auto; }
table.calendar { min-width: 100%; }
table.calendar th, table.calendar td {
  text-align: center;
  padding: 4px;
  font-size: 13px;
  min-width: 44px;
  border: 1px solid #c8d0cc;
}
table.calendar th.col-camera, table.calendar td.col-camera {
  text-align: left;
  min-width: 130px;
  position: sticky;
  left: 0;
  background: #fff;
  font-weight: 600;
  border-right: 2px solid #8fa398;
}
table.calendar tr.categorie td {
  background: #d8e8de;
  font-weight: bold;
  text-align: left;
  position: sticky;
  left: 0;
  border-right: 2px solid #8fa398;
}
table.calendar td.astazi, table.calendar th.astazi { background: #fff3cd; }
.celula-rezervare {
  display: block;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.ocupare-scazuta { color: #2e7d32; }
.ocupare-medie { color: #f9a825; }
.ocupare-mare { color: #a33; font-weight: bold; }

.stele { color: #f9a825; font-size: 18px; }