/* --- Reset / base --- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #e8f3e8; /* light green background */
  color: #1b3a1b; /* dark forest text */
}

a { color: inherit; text-decoration: none; }

/* --- App layout --- */
.app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

/* --- Top bar --- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}

.title { margin: 0; font-size: 24px; }
.subtitle { margin: 6px 0 0; color: #3a5f3a; font-size: 14px; }

.topnav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.navlink {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #c5e0c5;
  background: #f0f7f0;
  font-size: 14px;
}

.navlink.active {
  border-color: #a0cfa0;
  background: #d8eed8;
}

/* --- Main dashboard split --- */
.dashboard {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.panel {
  background: #f0f7f0;
  border: 1px solid #c5e0c5;
  border-radius: 18px;
  padding: 14px;
  min-height: 560px;
}

.panel-left {
  flex: 2; /* about 2/3 */
  display: flex;
  flex-direction: column;
}

.panel-right {
  flex: 1; /* about 1/3 */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.panel-title {
  margin: 0;
  font-size: 16px;
}

.panel-meta {
  font-size: 12px;
  color: #3a5f3a;
}

/* --- Item list (scroll area) --- */
.item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Each row is a rounded bar */
.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid #c5e0c5;
  background: #f7fdf7;
}

/* Low stock visual */
.item-row.low {
  border-color: #a1d6a1;
  background: #e0f4e0;
}

.item-row.out {
  border-color: #78b578;
  background: #c6e0c6;
}

/* Left side: emoji + name */
.item-left {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.item-emoji { font-size: 18px; }

.item-namewrap { min-width: 0; }

.item-name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.item-sub {
  font-size: 12px;
  color: #3a5f3a;
  margin-top: 2px;
}

/* Right side: stock + button group */
.item-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.item-stock {
  font-size: 13px;
  color: #1b3a1b;
  min-width: 92px;
  text-align: right;
}

.btn-group { display: flex; gap: 8px; }

.mini-btn {
  border: 1px solid #a0cfa0;
  background: #d8eed8;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
}

.mini-btn:hover { background: #c0e5c0; }

/* --- Cards --- */
.card {
  border: 1px solid #c5e0c5;
  background: #f7fdf7;
  border-radius: 18px;
  padding: 14px;
}

.card-link:hover { background: #e0f4e0; }

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.card-emoji { font-size: 18px; }

.card-title {
  margin: 0;
  font-size: 16px;
}

.card-text {
  margin: 0;
  color: #3a5f3a;
  font-size: 14px;
}

/* --- Forms --- */
.add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field-label {
  font-size: 12px;
  color: #3a5f3a;
}

input, select {
  border: 1px solid #a0cfa0;
  background: #f0f7f0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
}

input:focus, select:focus { border-color: #78b578; }

.primary-btn, .secondary-btn, .danger-btn {
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  text-align: center;
  display: inline-block;
}

.primary-btn {
  background: #1b3a1b;
  color: #fff;
}

.primary-btn:hover { opacity: 0.92; }

.secondary-btn {
  background: #f0f7f0;
  color: #1b3a1b;
  border-color: #a0cfa0;
}

.secondary-btn:hover { background: #d8eed8; }

.danger-btn {
  background: #c6e0c6;
  color: #2e5c2e;
  border-color: #78b578;
}

.danger-btn:hover { background: #b0d1b0; }

.btn-link { width: 100%; }

.helper-text {
  margin: 0;
  font-size: 12px;
  color: #3a5f3a;
  line-height: 1.35;
}

/* Empty state */
.empty-state {
  border: 1px dashed #a0cfa0;
  background: #edf7ed;
  border-radius: 14px;
  padding: 14px;
  color: #3a5f3a;
  font-size: 14px;
}

/* --- Edit page styling --- */
.edit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 6px;
}

.edit-row {
  border: 1px solid #c5e0c5;
  background: #f7fdf7;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 180px;
  gap: 12px;
  align-items: center;
}

.edit-left {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.edit-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #f0f7f0;
  border: 1px solid #c5e0c5;
  font-size: 18px;
}

.edit-middle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.edit-field { display: flex; flex-direction: column; gap: 6px; }

.edit-label {
  font-size: 12px;
  color: #3a5f3a;
}

.edit-input { 
  width: 100%; 
  border: 1px solid #a0cfa0;
  background: #f0f7f0;
  border-radius: 12px;
  padding: 8px 10px;
}

.edit-right {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* --- Settings layout --- */
.settings-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file-label { display: inline-block; }

.file-label input {
  display: none;
}

/* --- Settings buttons fix: Export Data & Reset Everything --- */
.file-btn,
#reset-btn {  /* add the ID or class your Reset Everything button has */
  display: inline-block;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  text-align: center;
  border-radius: 14px;
  border: 1px solid #5fae84;
  background: #d8efe0;
  color: #153926;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.file-btn:hover,
#reset-btn:hover {
  background: #b6e5c8;
}

.file-btn:active,
#reset-btn:active {
  background: #a0d8b0;
  opacity: 0.95;
}

.file-btn:focus,
#reset-btn:focus {
  outline: none;
  border-color: #4b9762;
  box-shadow: 0 0 0 2px rgba(75, 151, 98, 0.3);
}