@charset "utf-8";
/* CSS Document */

body {
	background-color:white;
	font-family: proxima-nova, calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	margin: 0;
	color: #0c234b;
	font-weight: 400;
}
h2 {
	font-weight: 500;
	color: #0c234b;
	margin-bottom: 1rem;
	font-size: 1.9rem;
}
h3 {
	font-weight: 500;
	color: #0c234b;
	font-size: 1.6rem;
}
h4 {
	font-weight: 500;
	color: #0c234b;
	font-size: 1.4rem;
	margin: 0;
}

p {
	line-height: 1.6em;
}
li {
	line-height: 1.4em;
}
hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.logo {
	max-width: 80vw;
	clear: both;
	margin-top: 20px;
}
.container {
	width: 90%;
	margin: 0 auto;
	max-width: 1000px;
	padding: 0 0 40px 0;
}

.dashboardcontainer {
	width: 90%;
	margin: 0 auto;
	max-width: 1500px;
	padding: 0 0 40px 0;
}


div#harvestForm  {
	clear: both;
	
}

.right_col{
	background-color:#FFFFFF;
	box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .15) !important;
	border: 1px solid rgba(0, 0, 0, .125);
	padding: 25px;
	margin: 16px 0;
	font-size: 1.00em;
}

.right_col p {
	margin: 7px 0;
	line-height: 1.35em;
}
.def {
	font-weight: 600;
}

.businfo label {
	text-align: left;
	margin: auto 0;
	padding: 0 0 5px 0;
}
.redrow {
	width: 90%;
	max-width: 1000px;
	clear: both;
	margin: 0 auto;
	padding: 0 100px 0 25px;
	
}
.harvestfform {
	width: 100%;
	
}
.arizona-logo {
    display: inline-block;
    height: 20px;
    margin: 20px 0 20px;
    max-width: 80%;
    width: 276px;
    padding: 0 0 0 .8rem;
}
/* Responsive two-column layout that stacks on small screens */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  gap: var(--gap);
  align-items: start;
	text-align: left;
}

/* Optional variant: 2/1 split */
.two-col-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap);
  align-items: start;
}
#addVariety {
	margin: 0 0 20px 0;
}

/* Stack to a single column on narrow screens */
@media (max-width: 800px) {
  .two-col,
  .two-col-2-1 {
    grid-template-columns: 1fr;
  }
}

/* (Recommended) make .businfo responsive instead of fixed width */
.businfo { width: 100%; max-width: 600px; }

/* Keep a fixed one-line slot under every input */
.error-msg {
  font-size: 0.85rem;
  color: #c62828;
  min-height: 0.4em;       /* reserves space */
  visibility: hidden;       /* hidden when empty, but still takes space */
  white-space: nowrap;      /* avoid multi-line wrap (no jump) */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* show when there is text */
.error-msg.has-text { 
	visibility: visible;
	max-width: 90px;
}

/* (nice to have) make each field stack label, input, error cleanly */
.variety-group .triple > div { display: flex; flex-direction: column; }

/* Don't highlight invalid fields by default */
input:invalid { outline: none; }

input:invalid,
select:invalid {
  border-color: #d32f2f;
  border-width: 2px;
}
/* Don't show red border on untouched fields */
input:invalid:not(.user-touched),
select:invalid:not(.user-touched) {
  border-color: #ccc;
  border-width: 1px;
}

/* Always show red border when form has show-errors class (after submit attempt) */
form.show-errors input:invalid,
form.show-errors select:invalid {
  border-color: #d32f2f !important;
  border-width: 2px !important;
}
.redbar {
	background-color: #ab0520;
	height: 60px;
	width: 100%;
	margin: 0 0 25px 0;
}
.redbar_lower {
	background-color: #f4ede5;
	width: 100%;
	margin: 0;
	padding: 30px 0 10px 0;
	text-align: center;
	font-size: .8em;
    font-weight: 400;
}

.redbar_lower a {
	color: #8b0015;
	font-weight: 700;
	text-decoration: underline;
}
.acknowldge {
	text-align: center;
	font-weight: 250;
	font-size: 1.15em;
	line-height: 1.6em;
	}
:root { --gap: 0.75rem; }
    form {display: grid; gap: var(--gap); }
    .grid { display: grid; gap: var(--gap);}
    .row { text-align: left; margin: auto; width: 400px;  }
    .triple { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--gap); align-items: end ; }
    label { font-weight: 600; display: block; margin-bottom: 0.25rem; }
    input { width: 100%; padding: 0.6rem; border: 1px solid #cbd5e1; border-radius: 5px; }
	.businfo input { width: 80%; padding: 0.6rem; border: 1px solid #cbd5e1; border-radius: 5px; }
	select { width: 60%; padding: 0.6rem; border: 1px solid #cbd5e1; border-radius: 5px; }
    button, .link-btn { padding: 0.6rem 1rem; border: 0; border-radius: 5px; cursor: pointer; }
    button[type="submit"] { background:#ab0520; color: #fff; }
    .link-btn { background: #eef2ff; color: #1f2937; }
    .danger { background: #fee2e2; }
    .muted2 { font-weight: 600; color: #248209;font-style: italic; font-size: 1.2em; }
    .variety-group { padding: 0.75rem; border: 1px solid rgba(0, 0, 0, .1); border-radius: 5px; margin-bottom: 12px; }
    .controls { display: flex; gap: 0.5rem; }

/* Autocomplete styles */
.autocomplete-container {
  position: relative;
	max-height: 35px;
}

.autocomplete-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: none;
}

.autocomplete-suggestions.active {
  display: block;
}

.autocomplete-suggestion {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.highlighted {
  background-color: #f0f0f0;
}

.autocomplete-suggestion:last-child {
  border-bottom: none;
}

#varieties {
  counter-reset: variety-counter;
}

/* Increment the counter for each variety group */
.variety-group {
  counter-increment: variety-counter;
  position: relative; /* Needed for absolute positioning of the number */
}

/* Display the counter number */
.variety-group::before {
  content: counter(variety-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: white; 
  color: #949494;
	border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  
 
}

/* Alternative: Display number inline at the top of each variety group */
.variety-group.inline-number::before {
  content: "Variety #" counter(variety-counter);
  position: static;
  transform: none;
  display: block;
  width: auto;
  height: auto;
  background: none;
  color: #0c234b;
  border-radius: 0;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  box-shadow: none;
}