* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: #f5f7fb;
  color: #1d2939;
  padding-bottom: 120px; /* ruimte voor FAB */
}
header {
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #e0e6ed;
}
header h1 { margin: 0 0 .5rem 0; font-size: 1.25rem; }
.header-controls { display: flex; gap: .75rem; align-items: center; font-size: .9rem; flex-wrap: wrap; }
.header-controls select, .header-controls button { padding: .35rem .6rem; font-size: .9rem; border-radius: 4px; border: 1px solid #c5cbd6; background: #fff; cursor: pointer; }
.show-done { display: flex; align-items: center; gap: .25rem; color: #62718a; }

section { padding: 1rem 1.5rem; }

/* Parent + subtasks */
.parent-group {
  margin: 1.25rem 0 .35rem;
  font-size: .8rem;
  color: #62718a;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
ul.tickets { list-style: none; padding: 0; margin: 0; }
ul.tickets li {
  display: grid;
  grid-template-columns: 60px 90px 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .65rem .65rem;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 6px;
  margin-bottom: .3rem;
  transition: background .15s;
}
ul.tickets li.is-subtask {
  margin-left: 1.5rem;
  background: #fafbff;
  border-color: #ecf0f7;
}
ul.tickets li.active-timer {
  background: #fff4e6;
  border-color: #f59f00;
  border-width: 2px;
}
ul.tickets li.is-recent {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.gap-warn {
  padding: .75rem 1rem;
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  margin: .75rem 0;
  border-radius: 4px;
  color: #92400e;
  font-size: .9rem;
}
.start-btn {
  font-size: 1.1rem;
  padding: .25rem .65rem;
  background: #16a34a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s;
}
.start-btn:hover { background: #15803d; }
.key { font-weight: 600; color: #1d2939; font-size: .9rem; }
.summary { font-size: .92rem; color: #2d3a4f; }
.ticket-meta { font-size: .72rem; color: #62718a; white-space: nowrap; }
.ticket-meta .done-pill { background: #d1fae5; color: #065f46; padding: 1px 6px; border-radius: 3px; font-weight: 600; }

.loading, .error, .empty { padding: 1rem; color: #62718a; }
.error { color: #b91c1c; }

/* === Floating Action Button === */
.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: auto;
  min-width: 80px;
  height: 80px;
  border-radius: 40px;
  padding: 0 24px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.1);
  z-index: 100;
  transition: all .2s;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.25), 0 6px 12px rgba(0,0,0,0.15); }
.fab.idle {
  background: #16a34a;
  color: white;
}
.fab.idle .fab-icon { font-size: 1.8rem; }
.fab.idle .fab-text { display: none; }
.fab.active {
  background: #b91c1c;
  color: white;
  font-family: ui-monospace, monospace;
  padding: 0 28px;
  animation: pulse 2s infinite;
}
.fab.active .fab-icon {
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 2px;
  display: inline-block;
  font-size: 0; /* hide ▶ */
}
.fab.active .fab-text {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(185,28,28,0.4), 0 0 0 0 rgba(185,28,28,0.4); }
  50% { box-shadow: 0 8px 24px rgba(185,28,28,0.5), 0 0 0 16px rgba(185,28,28,0); }
}

/* === Dialog === */
.dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.dialog.hidden { display: none; }
.dialog-box {
  background: white;
  padding: 1.5rem 1.75rem;
  border-radius: 12px;
  width: 95%;
  max-width: 480px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.3);
}
.dialog-box h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.dialog-info { background: #fff8e1; padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .95rem; }
.dialog-info strong { color: #b91c1c; }
.dialog-summary { color: #62718a; font-size: .85rem; margin-top: .2rem; }
.dialog-box label { display: block; margin-bottom: .25rem; color: #62718a; font-size: .85rem; }
.dialog-box textarea {
  width: 100%;
  padding: .5rem;
  font-family: inherit;
  font-size: .95rem;
  border: 1px solid #c5cbd6;
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 1rem;
}
.dialog-buttons { display: flex; flex-direction: column; gap: .5rem; }
.dialog-buttons button {
  padding: .7rem 1rem;
  font-family: inherit;
  font-size: .95rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.dialog-buttons .primary { background: #b91c1c; color: white; }
.dialog-buttons .primary:hover { background: #991b1b; }
.dialog-buttons .primary:disabled { background: #999; }
.dialog-buttons .secondary { background: #fff; border: 1px solid #c5cbd6; color: #1d2939; }
.dialog-buttons .link {
  background: transparent;
  color: #62718a;
  font-size: .85rem;
  text-decoration: underline;
  padding: .4rem;
  font-weight: normal;
}