/* Time Tracking — internal tool. Plain CSS, no build step. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1f2937;
  background: #f3f4f6;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }

.app-header { background: #fff; border-bottom: 1px solid #e5e7eb; padding: .75rem 1.25rem; }
.app-header .inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1.25rem; }
.app-header .brand { font-weight: 600; color: #111827; }
.app-header nav { display: flex; gap: 1rem; flex: 1; }
.app-header nav a { color: #374151; }
.app-header nav a.active { color: #111827; font-weight: 600; }
.app-header .user { color: #6b7280; font-size: .9rem; }
.app-header form { display: inline; }
.app-header .logout-link { background: none; border: 0; padding: 0; color: #2563eb; font: inherit; cursor: pointer; }

.container { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.25rem; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 1.5rem; margin-bottom: 1.25rem; }

.guest-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; }
.guest-wrap .brand { font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 1rem; }
.guest-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 1.5rem; width: 100%; max-width: 380px; }

.form-row { margin-bottom: 1rem; }
.form-row > label { display: block; font-weight: 500; margin-bottom: .35rem; color: #374151; font-size: .9rem; }
.form-input, input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], textarea, select {
  display: block; width: 100%; padding: .5rem .65rem; border: 1px solid #d1d5db; border-radius: 4px;
  font: inherit; color: #111827; background: #fff;
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  outline: 0; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.form-error { margin-top: .35rem; color: #b91c1c; font-size: .85rem; }
.form-help { margin-top: .35rem; color: #6b7280; font-size: .85rem; }
.checkbox-row { display: flex; align-items: center; gap: .5rem; }
.checkbox-row input { width: auto; }

.btn {
  display: inline-block; padding: .5rem 1rem; border: 1px solid transparent; border-radius: 4px;
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #fff; color: #374151; border-color: #d1d5db; }
.btn-secondary:hover { background: #f9fafb; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }

.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.form-actions .spacer { flex: 1; }

.auth-status { margin-bottom: 1rem; color: #065f46; font-size: .9rem; background: #d1fae5; border: 1px solid #6ee7b7; padding: .5rem .75rem; border-radius: 4px; }
.flash-success { margin: 0 0 1rem; color: #065f46; background: #d1fae5; border: 1px solid #6ee7b7; padding: .5rem .75rem; border-radius: 4px; }

table.data { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
table.data th, table.data td { padding: .55rem .75rem; border-bottom: 1px solid #e5e7eb; text-align: left; }
table.data th { background: #f9fafb; font-weight: 600; color: #374151; font-size: .9rem; }
table.data tr:hover td { background: #f9fafb; }

.muted { color: #6b7280; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }