/* Reusable layout, card, form, button and table styles. */
:root {
  font-family: Inter, system-ui, sans-serif;
  color: #1c302c;
  background: #eff4f1;
  --accent: #166351;
  --line: #d5e0db;
  --muted: #50645d;
  --error: #a32532;
}

* { box-sizing: border-box; }

body { margin: 0; }
h1, h2, p { margin: 0; }

.container {
  width: min(70rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0;
  display: grid;
  gap: 1.25rem;
}

.page-header { padding: .5rem 0; }
.page-header h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.05em; }
.page-header p { color: var(--muted); margin-top: .5rem; }

.card {
  padding: clamp(1rem, 3vw, 1.75rem);
  background: white;
  border: 1px solid var(--line);
  border-radius: 1rem;
  min-width: 0;
}

.summary, .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.metric { display: grid; gap: .4rem; }
.metric span { color: var(--muted); }
.metric strong { font-size: 2rem; line-height: 1; }
.metric-overdue strong { color: var(--error); }

h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.field { display: grid; gap: .35rem; align-content: start; }
.field label { font-weight: 650; }

.field input {
  min-width: 0;
  width: 100%;
  padding: .65rem .75rem;
  min-height: 2.75rem;
  border: 1px solid #8a9e96;
  border-radius: .45rem;
  font: inherit;
  color: inherit;
  background: white;
}

:focus-visible { outline: 3px solid #287d66; outline-offset: 3px; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.error { color: var(--error); font-size: .875rem; }
.error:empty { display: none; }
#storage-error { margin-top: .75rem; }

.button {
  border: 1px solid transparent;
  border-radius: .5rem;
  background: var(--accent);
  color: white;
  padding: .65rem .95rem;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

form > .button { margin-top: 1rem; }
.button:hover { background: #104f40; }

.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 46rem; border-collapse: collapse; }
th, td {
  padding: .75rem .55rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  overflow-wrap: anywhere;
}
th { color: var(--muted); font-size: .875rem; }
td:nth-child(4), td:nth-child(7) { white-space: nowrap; }
.empty-state { text-align: center; color: var(--muted); padding: 1.75rem; }
.status { display: inline-block; padding: .25rem .5rem; border-radius: .4rem; background: #e3f2eb; }
.status-overdue { color: var(--error); background: #fcebed; }
.status-returned { background: #edf0ef; }

@media (max-width: 36rem) {
  .container { padding: 1.5rem 0; }
  .form-grid { grid-template-columns: 1fr; }
}