/* Mobile first; widens into a multi-column form on larger screens. */

:root {
  color-scheme: light dark;
  /* Neutral greys only; red is kept for error messages. */
  --bg: #f5f5f5;
  --card: #fff;
  --text: #1a1a1a;
  --muted: #666;
  --border: #ddd;
  --accent: #1a1a1a;
  --accent-text: #fff;
  --error: #c62828;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --card: #1e1e1e;
    --text: #e6e6e6;
    --muted: #a0a0a0;
    --border: #3a3a3a;
    --accent: #e6e6e6;
    --accent-text: #121212;
    --error: #ef8a80;
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.topbar h1 {
  margin: 0;
  font-size: 1.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#user-info { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

#login-view { max-width: 24rem; margin: 2rem auto; }

h2 { margin: 0 0 1.25rem; font-size: 1.1rem; }

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.section-header h2 { margin: 0; }

.section-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Small outlined buttons for "Copy table". */
button.small {
  min-height: 2rem;
  padding: 0.2rem 0.6rem;
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: normal;
}
button.small:hover { border-color: var(--muted); }

.nowrap { white-space: nowrap; }

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

input, select, textarea, button {
  font: inherit;
  min-height: 2.75rem; /* comfortable touch target */
}

input, select, textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-weight: normal;
}

textarea { resize: vertical; }

button {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* Low-key buttons for secondary actions, so the only prominent button is the main one. */
button.link,
button.icon {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: normal;
}

button.link { padding: 0.5rem; }
button.link:hover { color: var(--text); text-decoration: underline; }

button.icon {
  width: 2.75rem;
  padding: 0;
  font-size: 1rem;
  border-radius: 50%;
}
button.icon:hover { color: var(--text); background: var(--bg); }

#login-form button,
#registration-form > button,
#customer-form > button,
#project-form > button { width: 100%; }

.fields {
  display: grid;
  /* 10rem lets date, customer, project, activity and hours share one row on desktop. */
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  column-gap: 1.25rem;
}

.fields .full { grid-column: 1 / -1; }

/* The "Recent" shortcut sits above the fields, separated from them by a line. */
.recent {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.recent select { max-width: 32rem; }

.error { color: var(--error); font-weight: 600; }

.muted { color: var(--muted); font-weight: normal; }

.registrations { list-style: none; margin: 0; padding: 0; }

/* Each row: details on the left, hours and a delete icon on the right. */
.registration {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}

.registration-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  overflow-wrap: break-word; /* break long words only if they can't fit at all */
}

.remark { font-size: 0.9rem; font-style: italic; color: var(--muted); }

.hours { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Keeps hours aligned on rows that have no delete button (other users' registrations). */
.icon-placeholder { width: 2.75rem; }

/* Month filter and the Mine / All users switch. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
  margin: 1rem 0 0.5rem;
}

.filters label { margin: 0; flex: 0 1 14rem; }

.toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.toggle button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: normal;
}

.toggle button + button { border-left: 1px solid var(--border); }

.toggle button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}

/*
 * "All users" view: each customer is a shaded block with a grey stripe, so customers
 * are clearly apart. Projects are lighter sub-headings inside the block.
 */
.customer-group {
  margin-top: 1rem;
  padding: 1rem 1.25rem 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
}

.customer-header,
.project-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  /* Line up the totals with the row hours, which sit left of the delete column. */
  padding-right: calc(2.75rem + 0.75rem);
}

.customer-header {
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
}

.customer-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.customer-header h3 { margin: 0; font-size: 1.1rem; }
.customer-header .hours { font-size: 1.1rem; }

.project-group { margin-top: 1rem; }

.project-header { padding-bottom: 0.5rem; color: var(--muted); }
.project-header h4 { margin: 0; font-size: 0.95rem; font-weight: 600; }

.badge {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.customer-group button.icon:hover { background: var(--border); }

/* Page tabs under the top bar. */
.tabs {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.tabs a {
  padding: 0.5rem 0 0.6rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tabs a:hover { color: var(--text); }

.tabs a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--text);
}

/* Customers & projects page: the two forms side by side on wide screens. */
.admin-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  column-gap: 1.25rem;
  align-items: start;
}

.hint { margin: -0.25rem 0 1rem; font-size: 0.85rem; color: var(--muted); }

.status { font-weight: 600; }

.catalog-customer { padding: 1rem 0; border-top: 1px solid var(--border); }
.catalog-customer:first-child { border-top: 0; padding-top: 0; }
.catalog-customer h3 { margin: 0 0 0.5rem; font-size: 1rem; }

.catalog-projects { list-style: none; margin: 0; padding: 0 0 0 1rem; }
.catalog-projects li { padding: 0.35rem 0; }
.catalog-projects .muted { font-size: 0.9rem; }

/* Small phones: less padding so the nested customer blocks keep room for text. */
@media (max-width: 400px) {
  .topbar h1 { font-size: 1rem; }
  main { padding: 0.75rem 0.5rem; }
  .card { padding: 1rem 0.75rem; }
  .registration { column-gap: 0.5rem; }
  .customer-group { padding: 0.75rem 0.5rem 0.25rem 0.75rem; }
  button.icon, .icon-placeholder { width: 2.25rem; }
  .customer-header,
  .project-header { padding-right: calc(2.25rem + 0.5rem); }
}

/* On the smallest phones, make room for the title. */
@media (max-width: 360px) {
  #user-initials { display: none; }
}

@media (min-width: 700px) {
  main { padding: 1.5rem; }
  .card { padding: 1.5rem; }
  #login-form button,
  #registration-form > button,
  #customer-form > button,
  #project-form > button { width: auto; }
}