:root{
  --bg: #ffffff;

  /* mėlyna (mygtukai/akcentai) */
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-100: #e8f0ff;

  /* žalia (įvestys/blokai) */
  --green-100: #eaf7ef;

  /* neutral */
  --border: rgba(0,0,0,.10);
  --text: #0f172a;
}

body{
  font-family: system-ui, Segoe UI, Arial, sans-serif;
  margin: 16px;
  background: var(--bg);
  color: var(--text);
}

.brand{
  font-weight: 800;
  font-size: 18px;
}

.card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

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

input,select,button,textarea{
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.15);
}

button{
  cursor: pointer;
  background: var(--blue-600);
  color: #fff;
  border: 1px solid rgba(0,0,0,.05);
}
button:hover{ background: var(--blue-700); }
button:disabled{
  opacity: .55;
  cursor: not-allowed;
}

input, select, textarea{
  background: var(--green-100);
  border: 1px solid rgba(22,163,74,.25);
  color: var(--text);
}
input:focus, select:focus, textarea:focus{
  outline: 2px solid rgba(37,99,235,.25);
  border-color: rgba(37,99,235,.35);
}

table{ border-collapse:collapse; width:100% }
th,td{
  border: 1px solid var(--border);
  padding: 6px;
  font-size: 14px;
  vertical-align: top;
}
th{ background: var(--blue-100) }

.muted{ opacity: .7 }
.right{ margin-left: auto }
.hidden{ display:none }
.sum{ font-weight:700 }
.pill{
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-100);
  color: #1e3a8a;
  display: inline-block;
}
.readonly{ opacity:.6 }

/* Week table scroll on small screens */
.tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableWrap table { min-width: 720px; }

/* Mobile */
@media (max-width: 720px) {
  body { margin: 10px; }
  .card { padding: 10px; }
  .row { flex-direction: column; align-items: stretch; }
  .right { margin-left: 0; }
  input, select, button, textarea { width: 100%; box-sizing: border-box; }
  button { padding: 10px 12px; }
  th, td { font-size: 13px; padding: 5px; }
  .pill { margin-bottom: 6px; }
}