/* =============================================================================
   nav.css
   ----------------------------------------------------------------------------
   Styles for the “My cultures / Find users” tab navigation.
   Includes desktop and mobile behavior.
============================================================================= */

/* ────────────────────────────────────────────────────────────────────────── */
/* Container for the tabs — gradient background, rounded corners, shadow     */
/* ────────────────────────────────────────────────────────────────────────── */
.responsive-nav {
  display: flex;
	gap: 20px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 10000;
}
@media (max-width: 767px) {
  .responsive-nav {
    flex-direction: column;
  }
}
/* ────────────────────────────────────────────────────────────────────────── */
/* Each tab button — solid blue when active, semi-transparent white when not */
/* ────────────────────────────────────────────────────────────────────────── */
.responsive-nav .tab-btn {
  flex: 1;
  padding: 0!important;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  color: #333333 !important;
  background: transparent;
    border-radius: 12px;

}

/* ────────────────────────────────────────────────────────────────────────── */
/* Hover on any non-active tab                                             */
/* ────────────────────────────────────────────────────────────────────────── */
.responsive-nav .tab-btn:not(.active) {
  background: rgba(255,255,255,0.2);
      border: 1px solid #EAebF0;
}

.activediv:hover .activeh h2,
.activediv:hover .activeh p {
    color: #fff !important;
}


/* ────────────────────────────────────────────────────────────────────────── */
/* Active tab — solid blue background, white text, bottom indicator        */
/* ────────────────────────────────────────────────────────────────────────── */
.responsive-nav .tab-btn.active {
  background: #2962FF;
  color: #fff !important;
}
.responsive-nav .tab-btn.active h2,
.responsive-nav .tab-btn.active p{
  color: white !important;
}
.responsive-nav .tab-btn.disabled.disabled{

	  color: #333333 !important;
}
/* ────────────────────────────────────────────────────────────────────────── */
/* Disabled tab — vizualno enak neaktivnemu, a (JS-jem) neodpira panelov     */
/* ────────────────────────────────────────────────────────────────────────── */
.responsive-nav .tab-btn.disabled.active {
  background: #F57C00;
  color: #fff !important;
}

/* ────────────────────────────────────────────────────────────────────────── */
/* Lock-icon ob My cultures za neregistrirane                              */
/* ────────────────────────────────────────────────────────────────────────── */
.responsive-nav .tab-btn .lock-icon {
  margin-left: 0.5em;
  font-size: 0.9em;
  vertical-align: middle;
}

/* ────────────────────────────────────────────────────────────────────────── */
/* Tab panels — hidden by default, transparent background when shown       */
/* ────────────────────────────────────────────────────────────────────────── */
.tab-panel {
  display: none;
  padding: 0;
  background: transparent;
  border-radius: 0 0 6px 6px;
}

.tab-panel.active {
  display: block;
}

.responsive-nav br {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────────────────── */
/* Mobile: make the tab nav sticky at the bottom                           */
/* ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .responsive-nav .tab-btn {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
  .tab-panel {
    padding-bottom: 4rem; /* ensure content isn’t hidden under nav */
  }

   /* 1) Naj bo vsaka vrstica relativni kontejner */
  #selected-cultures-container .culture-row,
  #filter-selected-container .culture-row,
  #display-cultures-profile-edit .culture-row {
    position: relative;
  }

  /* 2) Premakni gumb “X” zgoraj desno */
  #selected-cultures-container .culture-row .culture-controls button.remove-btn,
  #filter-selected-container .culture-row .culture-controls button.remove-btn,
  #display-cultures-profile-edit .culture-row .culture-controls button.remove-btn {
    position: absolute;
     font-size: 1rem;      /* manjši znak */
    padding: 0.15rem;      /* manj prostora okoli X */
    width: auto;           /* da ni fiksne širine */
    height: auto;          /* da ni fiksne višine */
    line-height: 1;        /* centriraj znak vertikalno */
    top: 0.25rem;          /* pomakni malo višje, če je absolutno */
    right: 0.25rem;        /* pomakni malo bolj levo */
  }
}