/* OrlandoHQ — utilities.css */

.flex { display: flex; }
.col { flex-direction: column; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.shrink-0 { flex-shrink: 0; }

.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-display { font-family: 'DM Serif Display', Georgia, serif; }
.text-accent { color: var(--color-accent-text); }
.text-accent-2 { color: var(--color-accent-2-text); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.divider {
  height: 1px;
  background: var(--color-divider);
  margin: 16px 0;
  border: 0;
}

.hidden { display: none !important; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.tap-area { min-width: 44px; min-height: 44px; }

.badge-pin {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-accent-light);
  color: var(--color-accent-text);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Star rating */
.star-rating { display: inline-flex; gap: 4px; }
.star-rating button {
  width: 40px; height: 40px;
  font-size: 24px;
  color: var(--color-text-muted);
  display: grid; place-items: center;
  border-radius: 8px;
}
.star-rating button.filled { color: var(--color-star); }

/* Checkbox */
.check-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  min-height: 44px;
}
.check-box {
  width: 24px; height: 24px;
  border-radius: 7px;
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 150ms ease, border-color 150ms ease;
}
.check-item input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.check-item.packed .check-box {
  background: var(--color-success);
  border-color: var(--color-success);
}
.check-item.packed .check-box::after {
  content: '✓';
  color: var(--color-on-status);
  font-weight: 700;
  font-size: 16px;
}
.check-item.packed .label { text-decoration: line-through; color: var(--color-text-muted); }

/* Mood / emoji picker */
.emoji-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.emoji-row button {
  width: 44px; height: 44px;
  font-size: 24px;
  border-radius: 12px;
  background: var(--color-bg-elevated);
  border: 2px solid transparent;
  display: grid; place-items: center;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.emoji-row button.selected {
  background: var(--color-accent-light);
  border-color: var(--color-accent-text);
  box-shadow: 0 0 0 2px var(--color-accent-text) inset;
  transform: scale(1.08);
}

/* Quick-add bar — wraps on narrow screens so two inputs + a button never overflow */
.quick-add {
  display: flex; gap: 6px;
  flex-wrap: wrap;
  padding: 10px;
  background: var(--color-bg-elevated);
  border-radius: 14px;
  margin-bottom: 16px;
  align-items: center;
}
.quick-add input { background: var(--color-bg-card); min-height: 40px; flex: 1 1 140px; min-width: 0; }

/* Donut chart */
.donut {
  width: 160px; height: 160px;
  margin: 0 auto;
  display: block;
}
.donut .track { fill: none; stroke: var(--color-bg-elevated); stroke-width: 14; }

/* Theme preview card */
.theme-preview {
  border: 2px solid var(--color-border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  position: relative;
}
.theme-preview.selected { border-color: var(--color-accent-hover); }
.theme-preview .swatches { display: flex; gap: 6px; margin-bottom: 8px; }
.theme-preview .swatch { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-divider); }
.theme-preview .name { font-weight: 600; font-size: var(--text-sm); }