body { font-family: system-ui, sans-serif; margin: 10px; }
.bars .bar-container { margin-bottom: 12px; }
.bar-label { font-size: 14px; margin-bottom: 4px; }
.bar-bg { width: 100%; height: 16px; background:#eee; border-radius:8px; overflow:hidden; }
.bar-fill { height:100%; }
.bar-fill.green { background:#4caf50; }
.bar-fill.blue { background:#2196f3; }
.bar-fill.orange { background:#ff9800; }

.chart-block { margin-top:20px; }
.chart-svg { width:100%; height:150px; }

.buttons-row { display:flex; gap:10px; margin:20px 0; }
.buttons-row button { flex:1; padding:10px; font-size:16px; }

.meals-block table { width:100%; border-collapse:collapse; font-size:14px; }
.meals-block th, .meals-block td { border-bottom:1px solid #ddd; padding:4px; }
.icon { cursor:pointer; }

.modal {
  position:fixed; left:0; top:0; right:0; bottom:0;
  background:rgba(0,0,0,0.4);
  display:none; align-items:center; justify-content:center;
}
.modal-content {
  background:#fff; padding:15px; border-radius:8px;
  width:90%; max-width:400px;
}
.login-form { max-width:320px; margin:40px auto; display:flex; flex-direction:column; gap:8px; }
.login-form input { padding:8px; }
.login-form button { padding:8px; }
.error { color:#f44336; margin-top:8px; }
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#2196f3;
  color:white;
  padding:10px;
  border-radius:6px;
  margin-bottom:15px;
}
.topbtn {
  background:white;
  color:#2196f3;
  border:none;
  padding:6px 10px;
  margin-left:8px;
  border-radius:4px;
  font-size:14px;
}
input[type=range] {
  width: 100%;
}
.range-switch button {
  padding:6px 10px;
  margin-right:6px;
  border-radius:4px;
  border:none;
  background:#ddd;
}
.range-switch button.active {
  background:#2196f3;
  color:white;
}
/* Tło modalne */
.modal-overlay {
    display: none; 
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Okno modalne */
.modal-box {
    background: #fff;
    width: 420px;
    max-width: 90%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(0,0,0,0.35);
    font-family: Arial, sans-serif;
}

/* Pasek tytułu */
.modal-header {
    background: #2b6cb0;      /* niebieski administracyjny */
    color: #fff;
    padding: 14px 18px;
    font-size: 18px;
    font-weight: bold;
}

/* Wnętrze */
.modal-body {
    padding: 18px;
}

/* Wiersz formularza */
.modal-row {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
}

/* Label */
.modal-row label {
    font-size: 14px;
    margin-bottom: 6px;
    color: #333;
}

/* Input */
.modal-row input,
.modal-row select {
    padding: 8px 10px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Stopka z przyciskami */
.modal-footer {
    padding: 14px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Przyciski */
.btn {
    padding: 8px 16px;
    font-size: 15px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
}

.btn-save {
    background: #2b6cb0;
    color: #fff;
}

.btn-cancel {
    background: #ddd;
    color: #333;
}