/* Open your `material_orange.css` file and make these changes */

/* 1. Primary Orange to Your Primary Brown */
/* Search for: #ff8a65 */
/* Replace with: #8b4513 */
/* (This is the most common replacement, affecting header, selected dates, arrows) */
.flatpickr-months .flatpickr-month {
  background: #8b4513; /* Changed from #ff8a65 */
  /* ... */
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #8b4513; /* Changed from #ff8a65 */
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #8b4513; /* Changed from #ff8a65 */
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #8b4513; /* Changed from #ff8a65 */
  border-color: #8b4513; /* Changed from #ff8a65 */
  /* ... */
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #8b4513; /* Changed from #ff8a65 */
          box-shadow: -10px 0 0 #8b4513; /* Changed from #ff8a65 */
}


/* 2. White Text/Elements (mostly from header) */
/* Search for: #fff */
/* Replace with: #ffffff (or just keep as #fff) */
/* (This affects month/year text, nav arrows in header) */
.flatpickr-months .flatpickr-month {
  color: #ffffff; /* Changed from #fff */
  fill: #ffffff; /* Changed from #fff */
  /* ... */
}
.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year {
  color: #ffffff; /* Changed from #fff */
  /* ... */
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #ffffff; /* Changed from #fff */
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #ffffff; /* Changed from #fff */
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #ffffff; /* Changed from #fff */
  fill: #ffffff; /* Changed from #fff */
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  color: #ffffff; /* Changed from #fff */
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  color: #ffffff; /* Changed from #fff */
}

/* 3. Original Material Orange Hover/Light Shades to your Secondary Orange-Brown */
/* This is often `#ff8a65` used in rgba or as a light background */
/* We'll use your secondary color: #d2691e */
/* Or, for translucent effects, use rgba(139, 69, 19, 0.1) which is a light primary color */

/* Look for lines like: */
/* .flatpickr-current-month .flatpickr-monthDropdown-months { background: #ff8a65; } */
/* Change to: */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #d2691e; /* Using secondary color for month dropdown background */
}
/* This affects the selected month dropdown background in the header */
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #d2691e; /* Also for options within the dropdown */
}

/* Weekday background from #ff8a65 to your secondary color */
.flatpickr-weekdays {
  background: #d2691e; /* Changed from #ff8a65 */
}

/* In-range day background from #e6e6e6 or other light grays */
/* Use a very light, translucent version of your primary or secondary color */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange { /* Add today.inRange too for consistency */
  background: rgba(139, 69, 19, 0.1); /* light primary color rgba */
  border-color: rgba(139, 69, 19, 0.1); /* matching border */
}
.flatpickr-day.inRange {
  -webkit-box-shadow: -5px 0 0 rgba(139, 69, 19, 0.1), 5px 0 0 rgba(139, 69, 19, 0.1); /* light primary color rgba */
          box-shadow: -5px 0 0 rgba(139, 69, 19, 0.1), 5px 0 0 rgba(139, 69, 19, 0.1); /* light primary color rgba */
}


/* 4. Default Dark Text / Day Colors */
/* Search for: #484848 (or rgba(0,0,0,0.54) for lighter versions) */
/* Replace with: a dark gray like #333 or #444 or #666 */
.flatpickr-day {
  color: #444; /* Darker text for readability on white background */
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #444; /* Changed from #484848 */
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #444; /* Changed from #484848 */
}
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: #444; /* Changed from #484848 */
}
span.flatpickr-weekday {
  color: rgba(255, 255, 255, 0.8); /* Changed to fit your theme's text color on secondary bg */
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(72, 72, 72, 0.4); /* Softer gray for disabled/out-of-month days */
}


/* 5. Various Gray Borders and Backgrounds */
/* Look for #e6e6e6, #e2e2e2, #eee, #ddd, rgba(72,72,72,0.2), rgba(0,0,0,0.1), etc. */
/* Replace with values that fit your lighter browns/grays */
.flatpickr-calendar {
  box-shadow: 0 3px 13px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow */
}
.flatpickr-calendar:before {
  border-bottom-color: rgba(72, 72, 72, 0.3); /* Adjust border of arrow */
}
.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 rgba(72, 72, 72, 0.15); /* Lighter divider */
          box-shadow: -1px 0 0 rgba(72, 72, 72, 0.15); /* Lighter divider */
}
.flatpickr-day.today {
  border-color: #a0a0a0; /* A neutral gray border for today before hover */
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: #a0a0a0; /* Match hover bg for today */
  border-color: #a0a0a0;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #f0f0f0; /* Soft hover for non-selected days */
  border-color: #f0f0f0;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #f5f5f5; /* Lighter hover for time inputs */
}

/* Also ensure your root variables are defined in style.css or elsewhere */
/* They won't be visible directly inside material_orange.css if you use them here,
   but they're helpful for consistency. */