#app { display: none; }

.summary-row { cursor: pointer; }
.summary-row:hover td { background: var(--pico-card-sectioning-background-color); }

.badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 4px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.badge-ok { background: #e8f5e9; color: #2e7d32; }
.badge-pending { background: #fff3e0; color: #e65100; }

.pay-ok { color: #2e7d32; }
.pay-late { color: #c62828; font-weight: 600; }
.pay-due { color: #e65100; }

.issue-yes { color: #c62828; font-weight: 600; }
.issue-no { color: #2e7d32; }

.toggle-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; padding: .2rem .5rem; transition: transform .2s;
}
.toggle-btn.open { transform: rotate(90deg); }

.detail-cell { padding: 1rem 1.5rem !important; background: var(--pico-card-background-color); }

.detail-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem;
  margin-bottom: 1rem; padding: .75rem; border-radius: 8px;
  background: var(--pico-card-sectioning-background-color);
  align-items: center;
}
.detail-meta label { margin: 0; font-size: .85rem; }
.detail-meta input[type="number"] { width: 5rem; padding: .25rem .5rem; margin-left: .5rem; display: inline-block; }
.detail-meta input[type="checkbox"] { margin-left: .5rem; }
.detail-meta .computed { font-size: .85rem; color: var(--pico-muted-color); }

.detail-section { margin-bottom: 1rem; }
.detail-section h4 { margin-bottom: .5rem; font-size: .95rem; }

.section-title {
  font-size: 1rem; margin: 1rem 0 0.5rem; padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.section-title:first-of-type { margin-top: 0; }

.category { margin-bottom: 0.5rem; border: 1px solid var(--pico-muted-border-color); border-radius: 6px; overflow: hidden; }
.category-header {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
  cursor: pointer; background: var(--pico-card-sectioning-background-color);
  font-size: .9rem; font-weight: 600;
}
.category-header:hover { background: var(--pico-secondary-background); }
.cat-arrow { font-size: 0.7rem; transition: transform .2s; flex-shrink: 0; }
.cat-progress {
  margin-left: auto; font-size: .75rem; font-weight: 500;
  color: var(--pico-muted-color); padding: .1rem .4rem; border-radius: 4px;
  background: var(--pico-card-background-color);
}
.category-body { padding: 0.5rem 0.75rem 0.75rem 1.25rem; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem 0; font-size: .9rem;
  flex-wrap: wrap;
}
.checklist li .howto-btn {
  background: none; border: 1px solid var(--pico-muted-border-color);
  border-radius: 50%; width: 1.2rem; height: 1.2rem;
  font-size: .65rem; cursor: pointer; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.checklist li .howto-btn:hover { background: var(--pico-card-sectioning-background-color); }
.checklist li .howto-text {
  width: 100%; font-size: .8rem; color: var(--pico-muted-color);
  padding: .35rem .5rem .35rem 1.75rem;
  line-height: 1.5; white-space: pre-line;
}

.task-row { display: flex; gap: .5rem; margin-top: .5rem; }
.task-row input { flex: 1; padding: .35rem .5rem; font-size: .85rem; }
.task-row button { white-space: nowrap; padding: .35rem .75rem; font-size: .85rem; }

.del-btn {
  background: none; border: none; color: #c62828; cursor: pointer;
  font-size: .75rem; padding: .1rem .4rem; margin-left: auto;
}

.check-btn { width: 100%; margin-top: .75rem; }
.check-btn:disabled { opacity: .5; cursor: not-allowed; }

.del-client-btn {
  margin-top: 1rem; padding: .35rem .75rem; font-size: .85rem;
  background: transparent; color: #c62828; border: 1px solid #c62828;
  border-radius: 4px; cursor: pointer;
}
.del-client-btn:hover { background: rgba(198, 40, 40, .08); }

#toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; padding: .6rem 1.5rem; border-radius: 8px;
  font-size: .875rem; opacity: 0; transition: opacity .3s;
  pointer-events: none; z-index: 999;
}
#toast.show { opacity: 1; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.toolbar h2 { margin: 0; }

.empty-msg { text-align: center; opacity: .6; padding: 2rem 0; }