/* ──────────────────────────────────────────────────────*
 * Filter & Sort Bar (card grid controls)
 *──────────────────────────────────────────────────────*/

.card-grid-controls {
  background-color: var(--element-bg);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  color: var(--text-color);
  margin-left: 50px;
  max-width: 1340px;
  height:	66px;
}

.grid-controls-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--element-bg);
  color: var(--text-color);
  border-radius: 10px;
  gap: 1rem;
  flex-wrap: wrap;
  height: 66px;  
}

.


/* ── Container Setup ─────────────────────────────────── */
.grid-controls-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.controls-middle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 2;
  flex-wrap: nowrap;
}

.controls-right {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.5rem 1rem;
  flex: 1;
  margin-right: 1rem;
}

/* ── Left (count) ───────────────────────────────────── */
.controls-left {
  display: flex;
  flex: 1;  
  flex-direction: column;
  align-items: flex-start;  
  gap: 0.25rem;
  flex: 1;
  margin-left: 1rem;
  font-size: 1rem;
  font-weight: 500;
}

/* ── Search Box ─────────────────────────────────────── */
.card-search-input {
  flex: 1 1 100px;
  width: 125px;  
  max-width: 125px;
  padding: 0.4em 0.6em;
  border-radius: 4px;
  border: 1px solid var(--button-outline);
  background: var(--element-bg);
  color: var(--text-color);
}

/* ── Strategize + Filter ───────────────────────────── */
.filter-toggle {
  height: 33px;
  width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}    

.filter-icon {
  height: 25px;
  width: auto;
    
}    
    
.strategize-btn {
  height: 33px;
  width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Sort dropdown ──────────────────────────────────── */
.sort-select {
  padding: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--button-outline);
  background: var(--dropdown-bg);
  color: var(--dropdown-text);
}

   
    
/* ── “Group By:” toggles ───────────────────────────── */
.sort-scope-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.scope-label {
  font-weight: 600;
  white-space: nowrap;
}

.sort-scope-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sort-scope-toggles .switch-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── “Show:” toggles ───────────────────────────────── */
.show-ownership-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.show-label {
  font-weight: 600;
  white-space: nowrap;
}

.show-ownership-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.show-ownership-toggles .switch-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Switch base styles (unchanged) ───────────────── */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 14px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 34px;
  top: 0; left: 0; right: 0; bottom: 0;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 12px; width: 12px;
  left: 3px; bottom: 1px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: var(--button-bg);
  box-shadow: 0 0 5px var(--button-outline);
}
input:checked + .slider:before {
  transform: translateX(16px);
}
.slider.round {
  border-radius: 34px;
}


/* make the switch toggle itself a little smaller */
.sort-scope-container .switch,
.show-ownership-container .switch {
  width: 24px;     /* was 30px */
  height: 12px;    /* was 14px */
}

/* shrink the little circle inside */
.sort-scope-container .slider:before,
.show-ownership-container .slider:before {
  width: 10px;     /* was 12px */
  height: 10px;    /* was 12px */
  bottom: 1px;     /* keep it centered vertically */
}

/* tighten up the label text below/next to it */
.sort-scope-container .switch-label,
.show-ownership-container .switch-label {
  font-size: 0.9rem;     /* was ~1rem */
  line-height: 1.2;      /* a little more compact */
  padding: 0;            /* remove any extra vertical padding */
}

/* reduce the gap between stacked switches */
.sort-scope-toggles,
.show-ownership-toggles {
  gap: 0.25rem;           /* tighten the row gap */
}

/* optionally pull in the “Group By:” / “Show:” labels a bit */
.scope-label,
.show-label {
  font-size: 1rem;        /* was 1.25rem / 1.5rem */
  margin-right: 0.5rem;   /* less breathing room */
}