/* assets/styles.css */

/* Theme variables */
:root {
  --brand-blue: #0d6efd;         /* bold border color */
  --border-soft: #cfd4da;        /* soft inner border for menu */
  --shadow-soft: 0 3px 14px rgba(0,0,0,0.12);
  --radius: 12px;
}

/* =========================================================
   OUTER DROPDOWN ELEMENT (wrapper): keep neutral
   Targets both the id and a class in case Dash alters markup
   ========================================================= */
#graph-type-dropdown,
.dash-dropdown {
  /* Comfortable width on phones, capped on desktop */
  width: 95vw !important;
  max-width: 520px !important;

  /* REMOVE outer border & shadow to avoid "box in a box" */
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;

  /* Layout-only values */
  font-size: 16px !important;
  padding: 0 !important; /* no extra padding on the wrapper */
}

/* =========================================================
   INNER CONTROL (React-Select): primary visual styling
   ========================================================= */
#graph-type-dropdown .Select-control,
.dash-dropdown .Select-control {
  border: 2px solid var(--brand-blue) !important;  /* bold border here */
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  background-color: #fff !important;

  /* Comfortable tap target on mobile */
  min-height: 44px !important;
  height: auto !important;
}

/* Selected value / placeholder alignment */
#graph-type-dropdown .Select-value,
#graph-type-dropdown .Select-placeholder,
.dash-dropdown .Select-value,
.dash-dropdown .Select-placeholder {
  color: #222 !important;
  line-height: 40px !important;   /* vertically centers text */
}

/* =========================================================
   DROPDOWN MENU (overlay)
   ========================================================= */
#graph-type-dropdown .Select-menu-outer,
.dash-dropdown .Select-menu-outer {
  border: 1px solid var(--border-soft) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;

  /* Critical: ensure menu floats above other elements */
  position: absolute !important;
  z-index: 10000 !important;
}

/* Options: larger tap area and clean separators */
#graph-type-dropdown .Select-option,
.dash-dropdown .Select-option {
  padding: 12px 14px !important;
  border-bottom: 1px solid #f1f3f5;
  font-size: 16px !important;
}
#graph-type-dropdown .Select-option:last-child,
.dash-dropdown .Select-option:last-child {
  border-bottom: none;
}
#graph-type-dropdown .Select-option.is-focused,
.dash-dropdown .Select-option.is-focused {
  background-color: #eef5ff !important;
}

/* =========================================================
   MOBILE REFINEMENTS
   ========================================================= */
@media (max-width: 480px) {
  #graph-type-dropdown,
  .dash-dropdown {
    width: 95vw !important;
    max-width: 520px !important;
  }
  #graph-type-dropdown .Select-control,
  .dash-dropdown .Select-control {
    min-height: 44px !important; /* keep good tap target */
  }
  #graph-type-dropdown .Select-value,
  #graph-type-dropdown .Select-placeholder,
  .dash-dropdown .Select-value,
  .dash-dropdown .Select-placeholder {
    line-height: 40px !important;
  }
}

/* =========================================================
   OPTIONAL: ensure Plotly graph sits below the menu
   (Uncomment if the menu is ever clipped by the chart)
   ========================================================= */
/*
.dash-graph {
  z-index: 1 !important;
}
*/