/* OKR styles */
@import url('tokens.css');
body{font-family:var(--font-body);}
table { width:100%; border-collapse:collapse; margin-bottom:var(--space-5); }
th, td { border:1px solid var(--neutral-light); padding:var(--space-2); }
th { background:var(--color-primary); color:#fff; }
.add-row td { padding:0; }
.add-row button { width:100%; padding:var(--space-2); border:none; background:var(--neutral-light); cursor:pointer; text-align:left; color:var(--color-secondary); }

.toggle-btn {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: var(--neutral-light);
  cursor: pointer;
  text-indent: -9999px;
  transition: background 0.3s;
  vertical-align: middle;
}
.toggle-btn::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}
.toggle-btn.completed {
  background: #4cd964;
}
.toggle-btn.completed::after {
  transform: translateX(20px);
}

.obj-row input { width:100%; box-sizing:border-box; min-height:44px; }
.kr-row input, .kr-row select { width:100%; box-sizing:border-box; min-height:44px; }
.obj-row { background:var(--neutral-light); }
.item-row input, .item-row select { width:100%; box-sizing:border-box; min-height:44px; }

@media (max-width:480px){
  #okr-table thead { display:none; }
  #okr-table tr { display:block; margin-bottom:8px; }
  #okr-table td { display:flex; justify-content:space-between; align-items:center; }
  #okr-table td::before { font-weight:bold; }
  #okr-table td:nth-child(1)::before { content:'Objective'; }
  #okr-table td:nth-child(2)::before { content:'Key Result'; }
  #okr-table td:nth-child(3)::before { content:'Type'; }
  #okr-table td:nth-child(4)::before { content:'Outcome'; }
}