/* styles/checkin.css */
/* ===== Laundry list components ===== */
.list {
  display: grid;
  gap: 14px;
}

.laundry-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.laundry-item .meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.unit-pill {
  background: var(--sage-50);
  color: var(--text-800);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.timestamp {
  color: #888;
}

/* ===== Check-in page (dark) ===== */
.page-title {
  font-size: clamp(32px, 6vw, 56px);
  margin: 24px 0 18px;
  color: var(--cream-100);
}

/* rounded dark container */
.panel {
  background: #1c232c;
  border: 1px solid #2a323d;
  border-radius: 18px;
  padding: 14px;
}

/* inline form row */
.toolbar {
  display: grid;
  grid-template-columns: 1fr 160px 180px auto auto;
  gap: 10px;
}
@media (max-width: 860px) {
  .toolbar {
    grid-template-columns: 1fr;
  }
}

/* inputs */
.input {
  background: #0f151c;
  border: 1px solid #2a323d;
  color: var(--cream-100);
  border-radius: 12px;
  padding: 12px 12px;
  outline: none;
}
.input:focus {
  border-color: #3a4656;
}
.input-sm {
  padding: 8px 10px;
  border-radius: 10px;
}

.section-subtitle {
  color: var(--cream-100);
  margin: 26px 0 12px;
  font-size: 28px;
  font-weight: 800;
}

/* table-like list */
.table {
  display: grid;
}
.thead,
.tr {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 1fr 120px;
  gap: 12px;
  align-items: center;
}
.thead {
  color: #d9dfc6;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid #2a323d;
}
.tbody .tr {
  padding: 12px;
  border-bottom: 1px solid #232b35;
}
.tbody .tr:last-child {
  border-bottom: 0;
}

.btn-sm {
  padding: 8px 12px;
  border-radius: 10px;
}

.dim {
  color: #aeb6a0;
  margin-left: 8px;
  font-size: 14px;
}
.empty {
  color: #aeb6a0;
  padding: 14px;
}

/* Whole viewport dark */
html {
  background: var(--dark);
}
body.theme-dark {
  background: #0f1720;
  color: #e8e6c9;
}
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3 {
  color: var(--cream-100);
}

/* Prevent light sections/footers from reappearing */
body.theme-dark .section,
body.theme-dark .section.muted,
body.theme-dark .cta,
body.theme-dark footer {
  background: transparent;
  border: 0;
  color: #cfd6bb;
}

/* Check-in UI */
.page-title {
  font-size: clamp(32px, 6vw, 56px);
  margin: 24px 0 18px;
  color: var(--cream-100);
}

.panel {
  background: #1c232c;
  border: 1px solid #2a323d;
  border-radius: 18px;
  padding: 14px;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr 160px 180px auto auto;
  gap: 10px;
}
@media (max-width: 860px) {
  .toolbar {
    grid-template-columns: 1fr;
  }
}

.input {
  background: #0f151c;
  border: 1px solid #2a323d;
  color: var(--cream-100);
  border-radius: 12px;
  padding: 12px 12px;
  outline: none;
}
.input:focus {
  border-color: #3a4656;
}

.section-subtitle {
  color: var(--cream-100);
  margin: 26px 0 12px;
  font-size: 28px;
  font-weight: 800;
}

.table {
  display: grid;
}
.thead,
.tr {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 1fr 120px;
  gap: 12px;
  align-items: center;
}
.thead {
  color: #d9dfc6;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid #2a323d;
}
.tbody .tr {
  padding: 12px;
  border-bottom: 1px solid #232b35;
}
.tbody .tr:last-child {
  border-bottom: 0;
}

.btn-sm {
  padding: 8px 12px;
  border-radius: 10px;
}
.dim {
  color: #aeb6a0;
  margin-left: 8px;
  font-size: 14px;
}
.empty {
  color: #aeb6a0;
  padding: 14px;
}

/* Keep olive buttons */
.theme-dark .btn-primary {
  background: var(--olive-600);
  color: var(--white);
}
.theme-dark .btn-primary:hover {
  background: var(--olive-700);
}