/* FamilyPlate custom styles (works with Tailwind CDN) */

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  font-weight: 500;
  color: rgb(191 219 254);
  min-height: 44px;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}
.nav-active {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  min-height: 44px;
  border-radius: 0.75rem;
  background: #0b64bd;
  color: white;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover { background: #0c4f99; }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.15rem;
  min-height: 44px;
  border-radius: 0.75rem;
  background: white;
  color: #1c1917;
  font-weight: 600;
  border: 1px solid #d6d3d1;
  transition: background 0.15s;
}
.dark .btn-secondary {
  background: #1c1917;
  color: #f5f5f4;
  border-color: #44403c;
}
.btn-secondary:hover { background: #f5f5f4; }
.dark .btn-secondary:hover { background: #292524; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.15rem;
  min-height: 44px;
  border-radius: 0.75rem;
  background: #dc2626;
  color: white;
  font-weight: 600;
}
.btn-danger:hover { background: #b91c1c; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  border-radius: 0.75rem;
  font-weight: 500;
  color: #57534e;
}
.dark .btn-ghost { color: #a8a29e; }
.btn-ghost:hover { background: #f5f5f4; }
.dark .btn-ghost:hover { background: #292524; }

.card {
  background: white;
  border: 1px solid #e7e5e4;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.dark .card {
  background: #1c1917;
  border-color: #292524;
}

.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid #d6d3d1;
  background: white;
  color: #1c1917;
  font-size: 1rem;
}
.dark .input, .dark .select, .dark .textarea {
  background: #0c0a09;
  border-color: #44403c;
  color: #fafaf9;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid #3a9ef5;
  outline-offset: 0;
  border-color: #3a9ef5;
}
.textarea { min-height: 120px; resize: vertical; }

.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #57534e;
  margin-bottom: 0.35rem;
}

.dark .label { color: #a8a29e; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #dceeff;
  color: #0c4f99;
}
.dark .badge {
  background: #143968;
  color: #b9dcff;
}

.badge-amber {
  background: #fef3c7;
  color: #92400e;
}
.dark .badge-amber {
  background: #78350f;
  color: #fde68a;
}

/* Scaled ingredient highlight */
.scaled-changed {
  background: linear-gradient(90deg, rgba(22, 128, 224, 0.08), transparent);
}
.dark .scaled-changed {
  background: linear-gradient(90deg, rgba(58, 158, 245, 0.12), transparent);
}

/* Kitchen mode large type */
.kitchen-text {
  font-size: 1.35rem;
  line-height: 1.75;
}
@media (min-width: 640px) {
  .kitchen-text { font-size: 1.5rem; }
}

/* Ingredient rows in forms: reorder | name | form | amount | unit | notes | remove */
.ing-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .ing-row {
    grid-template-columns: auto 1.4fr 0.9fr 0.7fr 0.85fr 1fr 1.15fr auto;
  }
}
.ing-row .ing-step {
  min-width: 0;
  font-size: 0.875rem;
}

/* Ingredient reorder controls (fp-ingredient-reorder) */
.ing-row .ing-reorder {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: nowrap;
}
.ing-row .ing-drag-handle {
  cursor: grab;
  user-select: none;
  touch-action: none;
  color: #a8a29e;
  padding: 0.35rem 0.4rem;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 0.375rem;
}
.ing-row .ing-drag-handle:active {
  cursor: grabbing;
}
.ing-row.ing-ghost {
  opacity: 0.45;
}
.ing-row.ing-chosen {
  background: rgba(251, 191, 36, 0.08);
}

/* Unit dropdown: real <select> so the full list is always available */
.unit-combo .unit-picker {
  width: 100%;
  cursor: pointer;
}
.unit-combo .unit-other.hidden {
  display: none;
}

/* Meal calendar cells */
.meal-cell {
  min-height: 5.5rem;
}

/* Print (global) */
@media print {
  .print\:hidden { display: none !important; }
  html, body { height: auto !important; overflow: visible !important; }
  body { background: white; color: black; display: block !important; }
  /* Sidebar / nav off when printing any page */
  aside#sidebar,
  #nav-overlay,
  header.sticky {
    display: none !important;
  }
  main { margin: 0 !important; padding: 0 !important; overflow: visible !important; height: auto !important; }

  .recipe-print h1 {
    font-size: 20pt;
    margin: 0 0 6pt 0;
    color: #000;
  }
  .recipe-print h2 {
    font-size: 13pt;
    margin: 14pt 0 6pt 0;
    color: #000;
    page-break-after: avoid;
  }
  .recipe-print li {
    page-break-inside: avoid;
  }
  .recipe-print {
    color: #000;
  }
}

/* HTMX loading indicator */
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }

/* Checkbox large touch targets */
.check-lg {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: #0b64bd;
}