/* CRAD by Harvesta - component classes layered on top of Tailwind.
   Tailwind utilities do the layout/spacing work in the markup; this file
   only holds the few repeated component shapes. Flat colours, no gradients. */

/* ---- form controls ---- */
.inp {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid #ddd2c2;
  border-radius: .5rem;
  background: #fff;
  color: #241d15;
  font-family: inherit;
  font-size: .9rem;
}
.inp:focus {
  outline: none;
  border-color: #238a68;
  box-shadow: 0 0 0 3px #dcede6;
}
.inp:disabled { background: #f0e8dd; color: #7a6c5d; }
textarea.inp { resize: vertical; min-height: 72px; }

.lbl {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: #57402c;
  margin-bottom: .3rem;
}
.lbl .req { color: #a6402f; }
.lbl .unit { font-weight: 400; color: #7a6c5d; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem .9rem;
  border-radius: .5rem;
  border: 1px solid transparent;
  font-size: .88rem;
  font-family: inherit;
  cursor: pointer;
  background: #165D46;
  color: #fff;
  white-space: nowrap;
}
.btn:hover { background: #0f4232; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-brown { background: #A76A3E; }
.btn-brown:hover { background: #8a5732; }
.btn-ghost { background: #fff; border-color: #ddd2c2; color: #57402c; }
.btn-ghost:hover { background: #f0e8dd; }
.btn-danger { background: #a6402f; }
.btn-danger:hover { background: #8c3527; }
.btn-sm { padding: .35rem .6rem; font-size: .8rem; }

/* ---- card ---- */
.card {
  background: #fff;
  border: 1px solid #ddd2c2;
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(58, 42, 28, .12);
}
.card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid #ddd2c2;
}
.card-head h2, .card-head h3 { margin: 0; flex: 1; font-size: 1rem; font-weight: 600; }
.card-head > i { color: #8a6a45; }

/* ---- tables ---- */
.tbl { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tbl th {
  text-align: left;
  padding: .6rem .65rem;
  background: #f0e8dd;
  color: #3a2a1c;
  font-weight: 600;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 1px solid #ddd2c2;
}
.tbl td {
  padding: .6rem .65rem;
  border-bottom: 1px solid #ddd2c2;
  vertical-align: middle;
}
.tbl tbody tr:hover { background: #f2f8f3; }

/* ---- badges / chips ---- */
.badge {
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  background: #f0e8dd;
  color: #57402c;
  white-space: nowrap;
}
.badge-green { background: #dcede6; color: #165D46; }
.badge-brown { background: #ecd4a8; color: #5c3d1f; }
.badge-warn  { background: #f8efdc; color: #9a6b18; }
.badge-grey  { background: #e8e4dd; color: #7a6c5d; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border: 1px solid #ddd2c2;
  border-radius: 20px;
  font-size: .8rem;
  background: #fff;
  cursor: pointer;
}
.chip.on { background: #dcede6; border-color: #238a68; color: #165D46; }

/* ---- nav ---- */
.nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .65rem;
  border-radius: .5rem;
  color: #57402c;
  cursor: pointer;
  font-size: .9rem;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-item i { width: 18px; text-align: center; color: #A76A3E; }
.nav-item:hover { background: #f0f7f3; }
.nav-item.active { background: #dcede6; color: #165D46; font-weight: 600; }
.nav-item.active i { color: #165D46; }

.nav-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7a6c5d;
  padding: .75rem .6rem .3rem;
}

/* ---- checkbox rows ---- */
.param-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .35rem;
  border-radius: .5rem;
  font-size: .87rem;
}
.param-row:hover { background: #fff; }
.param-row input,
.check input { width: 17px; height: 17px; accent-color: #165D46; flex-shrink: 0; }
.check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  cursor: pointer;
  padding: .3rem 0;
}

/* ---- page / nav state ---- */
.page { display: none; }
.page.active { display: block; }
.app { display: none; }
.app.visible { display: block; }

.modal { display: none; }
.modal.show { display: flex; }

.alert { display: none; align-items: center; gap: .5rem; }
.alert.show { display: flex; }

/* ---- misc ---- */
.spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Sidebar slide on mobile */
@media (max-width: 900px) {
  #sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  #sidebar.open { transform: translateX(0); box-shadow: 2px 0 8px rgba(36,29,21,.15); }
}