/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ===== Header filters - responsive layout ===== */

/* Base: filters as a visible second row in the navbar */
#header-date-filters {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Large screens (1200px+): overlay filters centered on the navbar (single row) */
@media (min-width: 1200px) {
  #header-date-filters {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Compensate: no extra padding needed since filters overlay */
  html body.fixed-navbar {
    padding-top: 5rem;
  }
}

/* Below large (< 1200px): filters as second row, adjust body padding */
@media (max-width: 1199.98px) {
  #header-date-filters {
    border-top: 1px solid rgba(255,255,255,0.15);
    border-radius: 0 !important;
  }

  /* Extra padding for the filter row (~48px) */
  html body.fixed-navbar {
    padding-top: 8rem;
  }

  /* Hide week input and separator to save space */
  #header-date-filters .week-group,
  #header-date-filters .week-separator {
    display: none !important;
  }

  /* Slightly smaller inputs */
  #header-date-filters .header-date-input {
    width: 130px !important;
  }

  #header-date-filters #header-vertical-filter {
    width: 115px !important;
  }

  #header-date-filters {
    padding: 6px 12px !important;
    gap: 6px !important;
  }
}

/* Mobile (< 768px): compact filter inputs */
@media (max-width: 767.98px) {
  #header-date-filters .header-date-input {
    width: 115px !important;
    font-size: 12px !important;
    height: 30px !important;
  }

  #header-date-filters #header-vertical-filter {
    width: 95px !important;
    font-size: 12px !important;
    height: 30px !important;
  }

  #header-date-filters #header-apply-dates {
    height: 30px !important;
    padding: 4px 8px !important;
  }

  #header-date-filters {
    padding: 5px 8px !important;
    gap: 4px !important;
  }

  #header-date-filters .icon-calendar {
    display: none;
  }
}